Flutter Web Video Player Alternative

Playing video in a Flutter web application

Constantin Stan
Flutter Community

--

Big Buck Bunny is CC-BY Blender Foundation 2008

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/afterglowplayer@1.x"></script></head>
<body>
<script src="main.dart.js"…

--

--