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"/>

扫描二维码关注公众号，回复： 14873782 查看本文章

如下位置：

如果你的设备是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与chewie

猜你喜欢