Play local video on flutter web

Using VideoElement and HTMLElementView …

Photo by Jakob Owens on Unsplash

When it comes to playing a video in flutter we often go for the very renowned package video_player, which is suitable for most of the cases.

But at present, this package comes with certain limitations. Since the flutter web platform does not support dart:io, due to which VideoPlayerController.file cannot be used. So we are only left with options to add our videos as an asset or upload them to a server before playing on the web using VideoPlayerController.asset and VideoPlayerController.network respectively.

Here is the good news! Flutter is a very powerful framework that gives us the flexibility to create and display HTML elements on its web platform.

We are going to create a VideoElement and display it as a widget using HTMLElementView in our app. Now, fasten your belts :-)

Play local video on flutter web

Add some dependencies to your pubspec.yaml file.

universal_html: <latest_version>

Setup your UI.

main.dart file

import 'package:flutter/material.dart';
import…