flutterfirebase-hostingflutter-video-player

Video Player plugin for Flutter not working correctly when deploy to Firebase hosting


I have built the widget that uses video_player 2.6.0 package from https://pub.dev/packages/video_player.

This is the code:

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

void main() => runApp(const VideoApp());

/// Stateful widget to fetch and then display video content.
class VideoApp extends StatefulWidget {
  const VideoApp({super.key});

  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4')
      ..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.isInitialized
              ? 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();
  }
}

I can play the video when debug on Chrome, but when I deploy to Firebase hosting follow by this instruction https://firebase.google.com/docs/hosting, that video can not play.

Could you please help me on this issue? Thanks.

Do the same code from example section of the video_player 2.6.0 package.


Solution

  • NOTE: For Web, not all video formats are supported

    The Web platform does not suppport dart:io, so avoid using the VideoPlayerController.file constructor for the plugin. Using the constructor attempts to create a VideoPlayerController.file that will throw an UnimplementedError.

    Supported Formats

    On Web, available formats depend on your users' browsers (vendor and version).

    Limitations on the Web platform

    Video playback on the Web platform has some limitations that might surprise developers more familiar with mobile/desktop targets.

    In no particular order:

    dart:io

    The web platform does not suppport dart:io, so attempts to create a VideoPlayerController.file will throw an UnimplementedError.

    Autoplay

    Attempts to start playing videos with an audio track (or not muted) without user interaction with the site ("user activation") will be prohibited by the browser and cause runtime errors in JS.

    Check package:video_player_web for more web-specific information.