Flutter_学习记载_video_player、chewie 播放视频

1. video_player 视频播放

插件地址：https://pub.dev/packages/video_player

• 添加插件
  
  
  
  
• 导入头文件
  

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

复制代码

• Android设置（iOS不消设置）
  

   修改这个文件：/android/app/src/main/AndroidManifest.xml;
添加下面的设置：

1. <uses-permission android:name="android.permission.INTERNET"/>

复制代码

• 添加焦点代码
  

   初始化播放器：

1. Uri url = Uri.parse("https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4");
2.     _videoPlayerController = VideoPlayerController.networkUrl(url);
3.     _videoPlayerController.initialize().then((_){
4.       print("播放器初始化完成");
5.       // 添加播放器的监听
6.       _videoPlayerController.addListener(_onVideoChange);
7.       // 设置自动播放
8.       _videoPlayerController.play();
9.       _isPlaying = true;
10.       setState(() {
11.         print("111111");
12.       });
13.     });

复制代码

  添加播放器的视图：

1. return VideoPlayer(_videoPlayerController);

复制代码

  退出页面时，必要烧毁播放器：

1. @override
2.   void dispose() {
3.     _videoPlayerController.dispose();
4.     super.dispose();
5.   }

复制代码

• 完整代码
  

1. import 'dart:async';import 'package:flutter/material.dart';import 'package:video_player/video_player.dart';
2. class VideoPlayerDemo extends StatefulWidget {  const VideoPlayerDemo({super.key});  @override  State<VideoPlayerDemo> createState() => _VideoPlayerDemoState();}class _VideoPlayerDemoState extends State<VideoPlayerDemo> {    late VideoPlayerController _videoPlayerController;  bool _isPlaying = false;  double _progress = 0.0;  // 添加播放状态的订阅，避免每次调用setState 重刷页面  late StreamController _isPlayingController;  // 添加播放进度的订阅，避免每次调用setState 重刷页面  late StreamController _progressController;  @override  void initState() {    super.initState();    _isPlayingController = StreamController.broadcast();    _progressController = StreamController.broadcast();    Uri url = Uri.parse("https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4");    _videoPlayerController = VideoPlayerController.networkUrl(url);    _videoPlayerController.initialize().then((_){      print("播放器初始化完成");      // 添加播放器的监听      _videoPlayerController.addListener(_onVideoChange);      // 设置自动播放      _videoPlayerController.play();      _isPlaying = true;      setState(() {      });    });  }  @override  void dispose() {    _videoPlayerController.dispose();    _isPlayingController.close();    _progressController.close();    super.dispose();  }  // 自界说播放器的监听回调的方法  void _onVideoChange() {    print("播放器的监听回调");      if (_videoPlayerController.value.isInitialized) {        final isPlaying = _videoPlayerController.value.isPlaying;        if (isPlaying != _isPlaying) {          _isPlaying = isPlaying;          _isPlayingController.sink.add(_isPlaying);        }        // 更新播放进度        final position = _videoPlayerController.value.position;        final duration = _videoPlayerController.value.duration;        if (duration != null) {            _progress = position.inMilliseconds / duration.inMilliseconds;            print("进度 = $_progress");            _progressController.sink.add(_progress);        }        // 查抄视频是否播放完毕        if (position >= duration) {          print('Video has completed playing.');          _videoPlayerController.seekTo(Duration.zero); // 重置到开始位置          _videoPlayerController.pause(); // 暂停播放          _isPlaying = false;          _isPlayingController.add(_isPlaying);        }      }  }  // 播放器的视图  Widget _palyerViewWidget() {    if (_videoPlayerController.value.isInitialized) {      // 初始化乐成      return AspectRatio(        aspectRatio: _videoPlayerController.value.aspectRatio,        child: Stack(          children: [            // 播放器            VideoPlayer(_videoPlayerController),            // 添加进度条            Align(              alignment: Alignment.bottomCenter,              child: _progressWidget(),            )          ],        )      );    } else {      // loading视图      return CircularProgressIndicator();    }  }  // 进度条  Widget _progressWidget() {    // 进度条变化比较频繁：用 StreamBuilder 减少内存的斲丧    return  StreamBuilder(      stream: _progressController.stream,       builder: (context, snapshot) {        print("更新进度条");        return SizedBox(          height: 35,          child: Slider(            value: _progress,            onChanged: (value) {              print("onChanged");              setState(() {                _videoPlayerController.seekTo(                  Duration(                    milliseconds: (value * _videoPlayerController.value.duration.inMilliseconds).round()                  )                );              });            },          ),        );      });  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Video_Player_demo"),      ),      body: Center(        child: _palyerViewWidget(),      ),      floatingActionButton: FloatingActionButton(        onPressed: (){          if (_isPlaying) {            // 正在播放            _videoPlayerController.pause();            _isPlaying = false;          } else {             _videoPlayerController.play();             _isPlaying = true;          }          _isPlayingController.add(_isPlaying);        },        // 这个按钮变化比较频繁：用 StreamBuilder 减少内存的斲丧        child: StreamBuilder(          stream: _isPlayingController.stream,           builder: (context, snapshot) {            return Icon(              _isPlaying ? Icons.pause : Icons.play_arrow            );          }),      ),    );  }}

复制代码

• 效果图如下：
  
  
  
  

2. chewie 播放视频

   在 Flutter 里官方提供了一个 video_player插件可以播放视频，但video_player有一些范围性:没法控制底部播放进度等。
以是可以用别的一个三方的视频播放库chewie。
chewie是一个非官方的第三方视频播放组件，看起来好像是基于 HTML5 播放的组件。
chewie 相对 video_player 来说，有控制栏和全屏的功能。
Chewie 使用 video_player 引擎并将其包裹在友爱的 Material 或 Cupertino UI中！
  插件地址：https://pub.dev/packages/chewie

• 引入插件
  chewie基于video_player，以是要使用chewie必须设置video_player
  
  
  
  
• 导入头文件
  

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

复制代码

• Android设置（iOS不消设置）
  

   修改这个文件：/android/app/src/main/AndroidManifest.xml;
添加下面的设置：

1. <uses-permission android:name="android.permission.INTERNET"/>

复制代码

• 焦点代码
  

1. import 'package:chewie/chewie.dart';import 'package:video_player/video_player.dart';
2. final videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(    'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4'));await videoPlayerController.initialize();final chewieController = ChewieController(  videoPlayerController: videoPlayerController,  autoPlay: true,  looping: true,);final playerWidget = Chewie(  controller: chewieController,);

复制代码

退出页面时，必要烧毁播放器：

1. @override
2.   void dispose() {
3.     _videoPlayerController.dispose();
4.     _chewieController.dispose();
5.     super.dispose();
6.   }

复制代码

• 完整代码
  

1. import 'package:flutter/material.dart';import 'package:video_player/video_player.dart';
2. import 'package:chewie/chewie.dart';class ChewieDemo extends StatefulWidget {  const ChewieDemo({super.key});  @override  State<ChewieDemo> createState() => _ChewieDemoState();}class _ChewieDemoState extends State<ChewieDemo> {  late VideoPlayerController _videoPlayerController;  late ChewieController _chewieController;  @override  void initState() {    super.initState();    // 初始化播放器    _initVideo();  }  @override
3.   void dispose() {
4.     _videoPlayerController.dispose();
5.     _chewieController.dispose();
6.     super.dispose();
7.   }
8.   // 初始化播放器  void _initVideo() async {    Uri url = Uri.parse(      "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"    );    _videoPlayerController = VideoPlayerController.networkUrl(url);    await _videoPlayerController.initialize();    _chewieController = ChewieController(      videoPlayerController: _videoPlayerController,      aspectRatio: _videoPlayerController.value.aspectRatio,      autoPlay: true,      looping: false    );        setState(() {});  }  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Chewie demo-在线播放视频"),      ),      body: Center(        child: _videoPlayerController.value.isInitialized ? AspectRatio(          aspectRatio: _videoPlayerController.value.aspectRatio,          child: Chewie(controller: _chewieController),        ) : CircularProgressIndicator(),      ),    );  }}

复制代码

• 效果图：
  
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。