flutter视频播放videoplayer与chewie

Posted 2023-04-08 大前端Pro

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flutter视频播放videoplayer与chewie相关的知识，希望对你有一定的参考价值。

在Flutter中虽然官方提供了video_player来播放视频

video_player官网链接：video_player | Flutter Package

但是video_player只有单纯的播放功能，进度条全屏这些功能只能自己实现

所以chewi出现了，是基于video_player的视频播放库，拥有视频进度条，全屏，播放速度控制等功能

chewi官网链接：chewie | Flutter Package

下面介绍如何使用这两个库:

如果你的视频是网络视频，那么需要做以下准备工作

如果你的设备是android，则需要配置网络权限

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

如下位置：

如果你的设备是ios

也需要配置权限

<key>NSAppTransportSecurity</key>

先来介绍video_player的用法

1.首先在pubspec.yaml文件里写上

video_player: ^2.4.4

如下所示：

然后点击右上角的Pub get

如下所示

2.新建一个类，如下所示

class VideoPlayWidget extends StatefulWidget 
  const VideoPlayWidget(Key? key) : super(key: key);

  @override
  State<VideoPlayWidget> createState() => _VideoPlayWidgetState();


class _VideoPlayWidgetState extends State<VideoPlayWidget> 
  
  @override
  Widget build(BuildContext context) 
    return Container();

3.定义VideoPlayerController

late VideoPlayerController _controller;

初始化_controller

下面的url就是你想要播放的视频地址

_controller = VideoPlayerController.network(
    url)
  ..initialize().then((_) 
    setState(() 
      _controller.play();
      _controller.setLooping(false);
      if (second != null) 
        Duration duration = Duration(seconds: second!);
        _controller.seekTo(duration);
      
    );
  );

把控制器放入VideoPlayer播放

@override
Widget build(BuildContext context) 
  return _controller.value.isInitialized
      ? VideoPlayer(_controller)
      : Container();

运行项目，可以看到视频出来了，非常简单

但是此时视频比例不合适，这时我们要用到AspectRatio

@override
Widget build(BuildContext context) 
  return _controller.value.isInitialized
      ? AspectRatio(
      aspectRatio: _controller.value.aspectRatio,
      child: VideoPlayer(_controller))
      : Container();

再次运行项目，可以看到视频保持了合适的比例播放

下面我们再介绍chewie的用法，和上面video_player用法差不多

1.首先在pubspec.yaml文件里写上如下内容，因为chewie是基于view_player，所以view_player也要一起写上

chewie: ^1.3.3

video_player: ^2.4.4

这时需要定义两个控制器

一个是VideoPlayer的一个是chewie的

late VideoPlayerController _controller;

ChewieController? chewieController;

然后初始化

_controller = VideoPlayerController.network(url)
  ..initialize().then((_) 
    setState(() 
      chewieController = ChewieController(
        videoPlayerController: _controller,
        autoPlay: false,
        looping: true,
        allowFullScreen: true,
        showOptions:false,
        deviceOrientationsOnEnterFullScreen: [DeviceOrientation.landscapeLeft],
        deviceOrientationsAfterFullScreen:[DeviceOrientation.portraitUp],
      );
    );
  );

然后是使用

@override
Widget build(BuildContext context) 
  return _controller.value.isInitialized ?ClipRRect(
    borderRadius: const BorderRadius.all(Radius.circular(5)),
    child: chewieController == null?Container():Chewie(controller: chewieController!)): Container();

效果如下

关注V X 公众号：大前端Pro 发送关键字视频播放获取示例代码

Flutter videoplayer

视频播放项目地址
 效果图

从pub.dev搜索视频播放库，但都不能满足要求，最后下载flick-video项目代码，做了功能简化和修改。

实现功能：

列表播放时，不支持拖动修改进度亮度声音，避免滑动冲突，全屏和单一视频播放时支持

1、屏幕左侧上下滑动修改屏幕亮度
2、屏幕右侧上下滑动修改视频音量
3、横向滑动切换播放进度
4、长按2倍速播放
5、支持全屏播放，并且全屏时可手动切换全屏播放方向
6、列表滑动自动播放

代码结构

Container(
          width: double.infinity,
          height: 200,
          child: VideoPlayerWidget(
              videoManager: videoManager,
              videoWithControls: VideoPlayerWithControlWidget(
                controls:VideoControlWidget(videoManager: videoManager),
              )),
        ),