CODEWITHSUNDEEP
flutterdart-htmlflutter-web
Ziyad
Ziyad

Reputation: 552

How can I implement video playback in flutter web?

I'm trying to play videos hosted on firebase on my flutter web app. I can't figure out how this will be possible.

With flutter native, the video-player plugin is used but that only works for ios and android.

Can someone tell me if it is possible to integrate video in a flutter web app?

I have tried using the dart:html package to achieve this. The videoElement class in the package looks relevant. But I'm unable to render the element as a widget.


    prefix1.VideoElement element = prefix1.VideoElement();
        element.height = 200;
        element.width = 200;
    )

I want to add a video playback option to my flutter web page.

Upvotes: 2

Views: 4589

Answers (3)

tmr
tmr

Reputation: 1530

the code below worked for me:

Open [image_picker_for_web / video_player_web] Can't preview PickedFile videos on the web #58527 

    void initializeVideo() {
    if (_pickedFile != null) {
      if (kIsWeb) {
        _controller = VideoPlayerController.network(_pickedFile!.path);
      } else {
        _controller = VideoPlayerController.file(File(_pickedFile!.path));
      }
      _controller.initialize().then((value) => setState(() {}));
    } else {
      _controller = VideoPlayerController.file(File(''));
    }
  }

based on code example above, i updated my code to:

 @override
  void initState() {
    super.initState();
    setState(() {
      if (kIsWeb) {
        controller = VideoPlayerController.network(widget.videoFile.path);
        ;
      } else {
        controller = VideoPlayerController.file(widget.videoFile);
      }
    });
    controller.initialize();
    controller.play();
    controller.setVolume(1);
    controller.setLooping(true);
  }

Upvotes: 0

Suragch
Suragch

Reputation: 511558

The Flutter video_player plugin now supports web using the video_player_web plugin through federation.

Here is a quote from the Pub page:

To use this plugin in your Flutter Web app, simply add it as a dependency in your pubspec using a git dependency. This is only temporary: in the future we hope to make this package an "endorsed" implementation of video_player, so that it is automatically included in your Flutter Web app when you depend on package:video_player.

dependencies:
  video_player: ^0.10.4
  video_player_web:
    git:
      url: git://github.com/flutter/plugins.git
      path: packages/video_player/video_player_web

Once you have the video_player_web dependency in your pubspec, you should be able to use package:video_player as normal.

Upvotes: 0

Constantin
Constantin

Reputation: 611

I've detailed here a solution that uses the Afterglow video player.

You can replace this with any HTML/JS video player of your choice, the approach would be the same.

Basically, you need to alter the index.html template file and interact with the DOM using either dart:html or universal_html packages to get your desired video file playing.

  1. 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>
  1. You'll need a playVideo method like the following:
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
  }
}
  1. And you'll play the video like this:
playVideo('http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4');

Before the 10th of December 2019, this method 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 option presented above still work and may serve you better in your use case.

Upvotes: 3

Related Questions