https://github.com/mojtabaghiasi/video_js

Flutter plugin for use Video.js in flutter web
https://github.com/mojtabaghiasi/video_js

dart dartlang flutter flutter-web flutter-widget player video video-player videojs videojs-player videojs-plugin

Last synced: 29 days ago
JSON representation

Flutter plugin for use Video.js in flutter web

• Host: GitHub
• URL: https://github.com/mojtabaghiasi/video_js
• Owner: mojtabaghiasi
• License: bsd-3-clause
• Created: 2021-11-16T07:13:12.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-02-10T08:24:01.000Z (almost 2 years ago)
• Last Synced: 2024-10-01T16:40:03.444Z (about 1 month ago)
• Topics: dart, dartlang, flutter, flutter-web, flutter-widget, player, video, video-player, videojs, videojs-player, videojs-plugin
• Language: Dart
• Homepage: https://pub.dev/packages/video_js
• Size: 1.59 MB
• Stars: 16
• Watchers: 1
• Forks: 17
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Flutter Video.js player

Flutter plugin for use [Video.js](https://github.com/videojs/video.js) in flutter web



## Installation

Add it to your package's pubspec.yaml file

```yml

dependencies:

  video_js: ^0.1.2

```

### Web

To implement you need to include Video.js library in the index.html of web section

```javascript

  

    

```

To support HLS formats you need to add this script too

```javascript

  

```

Example:

```html

	

	

	

	

	

	

	

	

	

	example

	

	    

	                               

	      

```

*Note*

See usage [example](https://github.com/mojtabaghiasi/video_js/tree/master/example) in video_js plugin

Then do this in main method :

```dart

void main() {

  // this line need for javascript's call backs

  VideoJsResults().init();

  runApp(MyApp());

}

```

## Example

```dart

import 'package:flutter/material.dart';

import 'package:videojs/videojs.dart';

void main(){

  VideoJsResults().init();

  runApp(VideoApp());

}

class VideoApp extends StatefulWidget {

  @override

  _VideoAppState createState() => _VideoAppState();

}

class _VideoAppState extends State {

  late VideoJsController _videoJsController;

  @override

  void initState() {

    super.initState();

    _videoJsController = VideoJsController("videoId", videoJsOptions: VideoJsOptions(

        controls: true,

        loop: false,

        muted: false,

        poster: 'https://file-examples-com.github.io/uploads/2017/10/file_example_JPG_100kB.jpg',

        aspectRatio: '16:9',

        fluid: false,

        language: 'en',

        liveui: false,

        notSupportedMessage: 'this movie type not supported',

        playbackRates: [1, 2, 3],

        preferFullWindow: false,

        responsive: false,

        sources: [Source("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", "video/mp4")],

        suppressNotSupportedError: false));

  }

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Video JS Demo',

      home: Scaffold(

        body: Center(

            child: VideoJsWidget(

              videoJsController: _videoJsController,

              height: MediaQuery.of(context).size.width / 2.5,

              width: MediaQuery.of(context).size.width / 1.5,

            )

        ),

        floatingActionButton: FloatingActionButton(

          onPressed: () {

            _videoJsController.isPaused((isPlaying) {

              isPlaying != 'true'

                  ? _videoJsController.pause()

                  : _videoJsController.play();

            });

          },

         child: const Icon(Icons.play_arrow,),

        ),

      ),

    );

  }

}

```

*Note*: This plugin is still under development, and some APIs might not be available yet.

[Feedback welcome](https://github.com/mojtabaghiasi/video_js/issues) and

[Pull Requests](https://github.com/mojtabaghiasi/video_js/pulls) are most welcome!