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.
To use this package, add web_video_player as a dependency in your pubspec.yaml file.
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>
import 'package:web_video_player/web_video_player.dart';
final playerWidget = WebVideoPlayer( url: url );
import 'package:web_video_player/web_video_player.dart';
final playerWidget = WebVideoPlayer( path: 'assets/videos/example.mp4' );
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 );
You can check out the example
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.
Now in your Dart code, you can use:
import 'package:web_video_player/web_video_player.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