Flutter Web video player not showing the video

Question

I'm using video_player: ^2.10.0 to display a video as a background in my web app, but it is simply not loading. There is this Video init error:

UnimplementedError: init() has not been implemented.

I have tried to mute the video, but still it does not show up.

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

class WorksSection extends StatefulWidget {
  const WorksSection({required this.workKey, super.key});
  final GlobalKey workKey;

  @override
  State<WorksSection> createState() => _WorksSectionState();
}

class _WorksSectionState extends State<WorksSection> {
  late VideoPlayerController _controller;
  bool _isInitialized = false;
  String? _errorMessage;
  @override
  void initState() {
    super.initState();
    _initializeVideo();
  }

  Future<void> _initializeVideo() async {
    _controller = VideoPlayerController.asset(
      'assets/videos/background_video.mp4',
    );
    try {
      await _controller.initialize();
      _controller.setLooping(true);
      _controller.setVolume(0);
      _controller.play();
      setState(() {
        _isInitialized = true;
        _errorMessage = null;
      });
    } catch (error) {
      setState(() {
        _isInitialized = false;
        _errorMessage = 'Failed to load video: ${error.toString()}';
      });
      print('Video init error: $error');
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      key: widget.workKey,
      child: Stack(
        alignment: Alignment.center,
        children: [
          if (_isInitialized)
            AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: FittedBox(
                fit: BoxFit.cover,
                child: SizedBox(
                  width: _controller.value.size.width,
                  height: _controller.value.size.height,
                  child: VideoPlayer(_controller),
                ),
              ),
            )
          else if (_errorMessage != null)
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Icon(Icons.error, size: 64, color: Colors.red),
                const SizedBox(height: 16),
                Text(
                  _errorMessage!,
                  style: const TextStyle(color: Colors.red, fontSize: 16),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: _initializeVideo,
                  child: const Text('Retry'),
                ),
              ],
            )
          else
            const Center(child: CircularProgressIndicator()),
        ],
      ),
    );
  }
}

Here I have initialized the video in a function. I added a fall back error message where if there is any error, the fallback will show the video error on the screen. The path of the video is correct, but it still isn't showing up

Ali · Accepted Answer · 2025-10-11 10:04:46Z

The error UnimplementedError: init() has not been implemented occurs because on Flutter Web, the VideoPlayerController.asset() method is not supported. While it works fine on Android and iOS, Flutter Web handles media files differently — it doesn’t load assets the same way as mobile platforms.

To fix this, you should treat your video as a network resource rather than a bundled asset. Move your video file into the web/assets/videos/ directory and reference it using a relative URL instead of VideoPlayerController.asset(). For example, replace your controller initialization with:

_controller = VideoPlayerController.networkUrl(
  Uri.parse('assets/videos/background_video.mp4'),
);

Make sure your pubspec.yaml still includes the video under the assets section so that Flutter knows to serve it when building the web app. Then, clean and rebuild your project using flutter clean, flutter pub get, and flutter run -d chrome.

This approach works because when your Flutter Web app is deployed, everything inside the web/ directory is served as static content, so the video becomes directly accessible through its URL. In short, the problem is not with your initialization logic — it’s simply that VideoPlayerController.asset() isn’t implemented on web. Switching to a network-style URL for your video file resolves the issue completely. Also you can use video_player_web package.

Collectives™ on Stack Overflow

Flutter Web video player not showing the video

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related