0 purchases
Description:
video js
Flutter Video.js player #
Flutter plugin for use Video.js in flutter web
Installation #
Add it to your package's pubspec.yaml file
dependencies:
video_js: ^0.1.2
copied to clipboard
Web #
To implement you need to include Video.js library in the index.html of web section
<link id="videojscss" rel="stylesheet" href="https://unpkg.com/video.js/dist/video-js.css">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
copied to clipboard
To support HLS formats you need to add this script too
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
copied to clipboard
Example:
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="example">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>example</title>
<link rel="manifest" href="manifest.json">
<link id="videojscss" rel="stylesheet" href="https://unpkg.com/video.js/dist/video-js.css"> <!-- Add this line-->
<script src="https://unpkg.com/video.js/dist/video.js"></script> <!-- Add this line-->
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> <!-- Add this line-->
</head>
copied to clipboard
Note
See usage example in video_js plugin
Then do this in main method :
void main() {
// this line need for javascript's call backs
VideoJsResults().init();
runApp(MyApp());
}
copied to clipboard
Example #
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<VideoApp> {
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,),
),
),
);
}
}
copied to clipboard
Note: This plugin is still under development, and some APIs might not be available yet.
Feedback welcome and
Pull Requests are most welcome!
License
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
Files:
Customer Reviews
There are no reviews.
