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.1
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>
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>
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>
note
see usage example in video_js plugin
example
import 'package:flutter/material.dart';
import 'package:videojs/videojs.dart';
void main() => 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
? videojscontroller.pause()
: videojscontroller.play();
});
},
child: icon(icons.play_arrow,),
),
),
);
}
}
note: this plugin is still under development, and some apis might not be available yet.
feedback welcome and
pull requests are most welcome!
