Video Player in Flutter

Rahul Gupta

11 October 2024

The video_player package enables you to play videos effortlessly in your Flutter applications. With video_player, you can support various video formats and manage videos from both local assets and network URLs. Utilizing video player enhances your app’s multimedia capabilities, providing an engaging experience for users across different platforms.

Features

Multiple Sources: Play videos from local assets or network URLs.

Playback Control: Basic controls to play, pause, and stop videos.

Video Initialization: Handles video initialization and buffering states.

Aspect Ratio: Maintains the correct aspect ratio for videos.

Full-Screen Support: You can implement full-screen video playback.

Basic Uses

Initialization: Use VideoPlayerController to create a controller for your video.

UI Rendering: Use the VideoPlayer widget to display the video.

State Management: Manage the video state using the Flutter state management approach (like StatefulWidget).

Implementation

To implement a video_player in Flutter, you can use the video_player package. Here’s a simple guide to get you started:

Step 1: Add Dependency

Add the video_player package to your pubspec.yaml file:

https://pub.dev/packages/video_player

dependencies:
  flutter:
  sdk: flutter
  video_player:  # Check for the latest version on pub.dev

dependencies:

flutter:

sdk: flutter

video_player: # Check for the latest version on pub.dev

Step 2: Import the Package

Import the package in your Dart file:

import 'package:video_player/video_player.dart';

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

Step 3: Create a Video Player Widget

You can create a video player widget that initializes and plays a video:

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

class VideoPlayerScreen extends StatefulWidget {
  final String videoUrl;

  VideoPlayerScreen({required this.videoUrl});

  @override
  _VideoPlayerScreenState createState() =&gt; _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State&lt;VideoPlayerScreen&gt; {
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(widget.videoUrl)
      ..initialize().then((_) {
        setState(() {});
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Video Player')),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

class VideoPlayerScreen extends StatefulWidget {

final String videoUrl;

VideoPlayerScreen({required this.videoUrl});

@override

_VideoPlayerScreenState createState() => _VideoPlayerScreenState();

}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {

late VideoPlayerController _controller;

@override

void initState() {

super.initState();

_controller = VideoPlayerController.network(widget.videoUrl)

..initialize().then((_) {

setState(() {});

});

}

@override

void dispose() {

_controller.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Video Player')),

body: Center(

child: _controller.value.isInitialized

? AspectRatio(

aspectRatio: _controller.value.aspectRatio,

child: VideoPlayer(_controller),

)

: CircularProgressIndicator(),

floatingActionButton: FloatingActionButton(

onPressed: () {

setState(() {

_controller.value.isPlaying

? _controller.pause()

: _controller.play();

});

child: Icon(

_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,

);

}

Step 4: Use the Video Player Widget

void main() {
  runApp(MaterialApp(
    home: VideoPlayerScreen(videoUrl: 'https://www.example.com/video.mp4'),
  ));
}

void main() {

runApp(MaterialApp(

home: VideoPlayerScreen(videoUrl: 'https://www.example.com/video.mp4'),

));

}

video player

Video player Allows to add videos and in this we can use of play and pause .

Additional Features

You can add more features in video_player such as:

Fullscreen toggle
Playback controls
Seek functionality

Conclusion

Video Player library enhances Flutter applications by providing robust video playback capabilities through the video_player package. With customizable features and smooth performance, video_player empowers developers to create engaging, high-quality user experiences effortlessly. Whether for simple projects or complex media solutions, integrating video_player can elevate your app’s multimedia offerings and keep users engaged.

Users can visit the video_player GitHub page for more examples.

Thanks for reading this blog. You can also check other blogs here for more information