[flutter, video] How to play network and assets video using video_player

How to play network and assets video using video_player 

井民全, mqjing@gmail.com

GitHub

This example was copied from the video_player packages example code. However, if you directly copy the original code from the site, it will fail because the new null-safety feature was supported from Dart 2.12. So, I added the keyword 'late' to resolve the issue.

Table of contents

1. Install package 1

2. Code 1

2.1. Play video from network 2

2.2. Play video from assets 3

3. Run 6

4. Result 6

4.1. Web 6

4.2. iOS Simulator 6

5. Reference 7

6. Further Reading 8

1. Install package

flutter pub add video_player

2. Code

2.1. Play video from network

Step 1: Create the video play controller from an asset

_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(() {});    });

The complete code.

File: lib/main.dart

import 'package:video_player/video_player.dart'; import 'package:flutter/material.dart'; void main() => runApp(VideoApp()); class VideoApp extends StatefulWidget {   @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();   } }

2.2. Play video from assets

Setup Assets for video

Step 1: Prepare the bee.mp3

cd $PROJECT-ROOT mkdir assets cd assets mkdir videos cd videos cp $SOME-WHERE/bee.mp3  .

Step 2: Specify assets

Identify the bee.mp4 that 

File: ./pubspec.yaml

flutter:   assets: - assets/videos/bee.mp4

Step 3: Create the video play controller from an asset

_controller = VideoPlayerController.asset("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(() {});    });

Here is the complete code.

File: lib/main.dart

import 'package:video_player/video_player.dart'; import 'package:flutter/material.dart'; void main() => runApp(VideoApp()); class VideoApp extends StatefulWidget {   @override   _VideoAppState createState() => _VideoAppState(); } class _VideoAppState extends State<VideoApp> {   late VideoPlayerController _controller;   @override   void initState() { super.initState(); // (b) play assets video     _controller = VideoPlayerController.asset("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();   } }

3. Run

flutter run

4. Result

4.1. Web

4.2. iOS Simulator

​​

5. Reference

1. https://pub.dev/packages/video_player

2. https://flutter.dev/docs/development/ui/assets-and-images

3. https://www.youtube.com/watch?v=7IG5kRFIMZw&ab_channel=TensorProgramming

4. Sample videos, https://sample-videos.com/index.php#sample-mp4-video

5. https://stackoverflow.com/questions/66725613/how-do-i-initialize-non-nullable-members-in-a-constructor-body

6. https://dart.dev/null-safety#enable-null-safety

6. Further Reading

1. https://pub.dev/packages/chewie