Flutter Web Video Player Alternative
Playing video in a Flutter web application
In order to play videos on iOS or Android using Flutter, most people will turn to the video_player package.
Unfortunately, this package is not yet fully and out of the box supported on the web platform.
Before the 10th of December 2019, the method provided in this article was one of the only ways of playing videos in a Flutter web app. At Flutter Interact 2019 the web support for a couple of packages, including the video_player_web package. The options presented bellow still work and may serve you better in your use case.
We’ll explore a solution that enables us to play videos in 3 simple steps:
1.We need to edit the default index.html template file that is located in the web folder. With these edits, we load the Afterglow video player and put in place a trigger, the a HTML element, and a video HTML element that will act as a placeholder for the video we want to play.
This is how our index.html will look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Web Video Player</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script></head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
<a id="triggerVideoPlayer" class="afterglow" href="#videoPlayer"></a>
<video id="videoPlayer" width="960" height="540" data-skin="dark">
</video>
</body>
</html>2. We then write a Dart function named playVideo that will interact with the index.html page, using the universal_html package, and pass on the video URL we want to play:
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;void playVideo(String atUrl) {
if(kIsWeb) {
final v = html.window.document.getElementById('videoPlayer');
if(v != null) {
v.setInnerHtml(
'<source type="video/mp4" src="$atUrl">',
validator: html.NodeValidatorBuilder()
..allowElement('source', attributes: ['src', 'type']));
final a = html.window.document.getElementById( 'triggerVideoPlayer' );
if(a != null) {
a.dispatchEvent(html.MouseEvent('click'));
}
}
} else {
// we're not on the web platform
// and should use the video_player package
}
}The code takes a reference of the videoPlayer element and, if it exists, sets its inner HTML to accommodate the video URL we passed using the atUrl parameter. Then we get a reference on the triggerVideoPlayer element and we trigger a mouse click.
3. The video will play as an overlay on top of the entire Flutter app. The player is responsive and offers controls for play, pause, volume, scroll, fullscreen and also shows playback info.
playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');
If you need to play portrait videos (or play videos in portrait mode) you can swap the width with height in step 1, or dynamically do that by modifying the playVideo function.
The Afterglow player can be further customized. It can also play YouTube or Vimeo videos just by sending the video ID as a parameter to a bit modified method on step 2.
import 'package:flutter/foundation.dart';
import 'package:universal_html/html.dart' as html;void playHostedVideo(String withId, [bool isVimeo=false]) {
if(kIsWeb) {
final v = html.window.document.getElementById('videoPlayer');
if(v != null) {
if(isVimeo) {
v.setAttribute("data-vimeo-id", withId);
} else {
v.setAttribute("data-youtube-id", withId);
}
final a = html.window.document.getElementById( 'triggerVideoPlayer' );
if(a != null) {
a.dispatchEvent(html.MouseEvent('click'));
}
}
} else {
// we're not on the web platform
// and should use the video_player package
}
}And step 3 becomes:
// for playing YouTube video
playHostedVideo('aqz-KE-bpKQ');
// or for playing Vimeo video
playHostedVideo('1084537', true);As a bottom note, any HTML/JS video player can be used like this. I chose Afterglow after using it in a recent project and I liked its simplicity and the fact that its lightweight.
If you’re interested in playing only audio you can check this out:
Tha(nk|t’)s all!
