A Flutter Web Video Player

A simple, intuitive, and efficient video player package designed specifically for Flutter Web applications. This package enables seamless video playback directly in your web application using the video_player package, and the universal_html plugin to manage the browser.

Features

• Supports MP4, and WAV video formats.
• Supports video playback from local assets, and remote URLs.
• Supports video playback in full screen mode.
• Play, Pause, Mute, Unmute, Seek to, and Fullscreen controls.

Getting started

To use this package, add web_video_player as a dependency in your pubspec.yaml file.

Installation

In your pubspec.yaml file within your Flutter Project add web_video_player and video_player under dependencies:

dependencies:
  web_video_player: <latest_version>
  video_player: <latest_version>

Using it

• You can initialize the player by passing in a URL to the video file

import 'package:web_video_player/web_video_player.dart';

final playerWidget = WebVideoPlayer( url: url );

• Or you can also initialize it by passing in a local asset path to the video file

import 'package:web_video_player/web_video_player.dart';

final playerWidget = WebVideoPlayer( path: 'assets/videos/example.mp4' );

• Another way to initialize the player is by passing in a VideoPlayerController object so you can have more control over the video playback.

import 'package:web_video_player/web_video_player.dart';
import 'package:video_player/video_player.dart';

final controller = VideoPlayerController.network( url );
final playerWidget = WebVideoPlayer( controller: controller );

Additional information

You can check out the example

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add web_video_player

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  web_video_player: ^0.0.1-dev.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:web_video_player/web_video_player.dart'; 

example/main.dart

import 'package:flutter/material.dart';
import 'package:web_video_player/player.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Web Video Player',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHome(),
    );
  }
}

class MyHome extends StatelessWidget {
  const MyHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Media Collection Previewer'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            WebVideoPlayer(
              url:
                  'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
              autoPlay: true,
            ),
          ],
        ),
      ),
    );
  }
} 

Download details:

Author: saedkhaled

Source: https://github.com/saedkhaled/web_video_player

#video #flutter