Supports hls on chrome and other browsers.
...
dependencies:
...
video_player_web_hls: ^0.1.1
video_player: ^0.10.10
...Add
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest" type="application/javascript"></script>in index.html above
<script src="main.dart.js" type="application/javascript"></script>The Web platform does not suppport dart:io, so attempts to create a VideoPlayerController.file will throw an UnimplementedError.
Playing videos without prior interaction with the site might be prohibited by the browser and lead to runtime errors. See also: https://goo.gl/xX8pDD.
Different web browsers support different sets of video codecs.
Check MDN's Web video codec guide to learn more about the pros and cons of each video codec.
Visit caniuse.com: 'video format' for a breakdown of which browsers support what codecs. You can customize charts there for the users of your particular website(s).
Here's an abridged version of the data from caniuse, for a Global audience:
import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';
void main() => runApp(VideoApp());
class VideoApp extends StatefulWidget {
@override
_VideoAppState createState() => _VideoAppState();
}
class _VideoAppState extends State<VideoApp> {
VideoPlayerController _controller;
@override
void initState() {
super.initState();
_controller = VideoPlayerController.network(
'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
..initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Video Demo',
home: Scaffold(
body: Center(
child: _controller.value.initialized
? AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
)
: Container(),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_controller.value.isPlaying
? _controller.pause()
: _controller.play();
});
},
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
),
),
),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent