Flutter video_player播放视频

发布时间 2023-12-20 15:33:24作者: 桃李子

1、pubspec.yaml文件引入插件

dependencies:
  ...
  video_player: ^2.8.1

2、页面使用(这里我是宽度百分百,高度自适应了)

late VideoPlayerController _controller;

Container(
    width: MediaQuery.of(context).size.width,
    child: AspectRatio(
       aspectRatio: _controller.value.aspectRatio,
       child: FittedBox(
          fit: BoxFit.cover,
          child: SizedBox(
             width: _controller.value.size.width,
             height: _controller.value.size.height,
             child: VideoPlayer(_controller),
          ),
     ),
))

// 播放视频
 void playVideo(String url) {
    _controller = VideoPlayerController.networkUrl(Uri.parse(url))
      ..initialize().then((value) { // 控件初始化后才能进行以下操作
        setState(() {
        });
        _controller.addListener(() {
          setState(() {});
        });
        _controller.setLooping(true); // 循环播放
        _controller.play(); // 播放
      });
 }

3、一些其他的操作及注意事项

  3.1 判断当前的视频控件是否已经初始化

if (_controller.value.isInitialized) {...} // 不能用这种方法来判断,因为控件没初始化这样写会报控件未初始化的错

// 解决方法,可以在initialize成功时setState赋值给一个变量,后续根据这个变量的值去判断是否已经初始化

  3.2 切换视频链接,直接调playVideo方法传新的链接(该插件现在没有直接能切换视频链接的方法?)

_controller.pause(); // 先暂停当前的视频再去调
playVideo(newUrl);

  3.3 跳转路由时视频还继续播放的问题,我想要的效果是:离开页面暂停播放,回到页面重新播放

  我的解决方法是用路由监听的方式去处理(暂时不清楚有没有别的方法可以实现),详情请见Flutter 利用路由监听页面的展示与否

// 例子 
// isVideoInit是用来判断控件是否初始化,在初次初始化时赋值为true
...
@override
  void didPush() {
    print('跳转该页面而显示');

    if (isVideo && !isVideoInit) {
      // 视频播放
      playVideo(url);
    }

    if (isVideo && isVideoInit) {
      // 视频播放
      _controller.play();
    }
  }

  @override
  void didPushNext() {
    print('跳转下一个页而隐藏');
    if (isVideo) {
      _controller.pause();
    }
  }

  @override
  void didPop() {
    print('当前页面被pop而隐藏');
    if (isVideo) {
      _controller.pause();
    }
  }

  @override
  void didPopNext() {
    print('上一个页面关闭而显示');

    if (isVideo && !isVideoInit) {
      // 视频播放
      playVideo(url);
    }

    if (isVideo && isVideoInit) {
      // 视频播放
      _controller.play();
    }
  }
...

  3.4 控件的部分操作

// 播放
_controller.play()

// 暂停
_controller.pause()

// 设置视频的音量
_controller.setVolume(0.5); // 值0~1.0

// 是否初始化、播放;音量值等
_controller.value.xxx