您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter 视频播放-1

2020-05-01【Flutter】3699人已围观

简介## 一、准备工作、注意事项 1. 把自己的 `android stuido` 升级为最新版本，`Xcode` 升级成最新版本。否则安装配置插件的时候可能会出现问题 2. 安装完成调用原生的 `api` 库后，需要重新运行 `flutter run` 3. 如果运行 `flutter run` 失败，请打开 `android studio` 后重新运行，如果 `android studio` 下载包失败的话请用电脑连接手机热点重试。 4. 如果依赖安装完成后引入库提示错误，请重启 `

## 一、 准备工作、注意事项

1. 把自己的 `android stuido` 升级为最新版本，`Xcode` 升级成最新版本。否则安装配置插件的
时候可能会出现问题
2. 安装完成调用原生的 `api` 库后，需要重新运行 `flutter run`
3. 如果运行 `flutter run` 失败，请打开 `android studio` 后重新运行，如果 `android studio` 下载
包失败的话请用电脑连接手机热点重试。
4. 如果依赖安装完成后引入库提示错误，请重启 `Vscode`

## 二、Flutter  视频播放

在 `Flutter` 里官方提供了一个 `video_player` 插件可以播放视频。但是 `video_player` 有一些局
限性。没法控制底部播放进度等。

`chewie` 是一个非官方的第三方视频播放组件，看起来好像是基于 `HTML5` 播放的组
件。`chewie` 相对 `video_player` 来说，有控制栏和全屏的功能。`Chewie` 使用 `video_player` 引
擎并将其包裹在友好的 `Material` 或 `Cupertino UI` 中！

文档： [https://pub.dev/packages/video_playe](https://pub.dev/packages/video_playe)

文档： [https://pub.dev/packages/chewie](https://pub.dev/packages/video_playe)

## 有些Android播放视频报错

> nhandled Exception: PlatformException(VideoError, Video player had error com.google.android.exoplayer2.ExoPlaybackException: com.google.android.exoplayer2.upstream.HttpDataSource$HttpDataSourceException: Unable to connect to http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4, null)

**问题原因**

安卓上从9.0(API level28)开始，明文通信支持默认是被禁用的，官方说法是不安全。因为我们播放的视频源是http协议，所以无法播放。

**解决方法**

修改 `AndroidManifest.xml`

```
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>
```

> video.dart

```
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import 'package:chewie/chewie.dart';

class VideoPage extends StatefulWidget {
  VideoPage({Key key}) : super(key: key);

_VideoPageState createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {

VideoPlayerController videoPlayerController;
  ChewieController chewieController;

@override
  void initState() {
    // TODO: implement initState
    super.initState();

videoPlayerController = VideoPlayerController.network('http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4');

chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2,
      autoPlay: true,
      looping: true,
    );

}
  /*销毁*/
  @override
  void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('在线视频播放'),
      ),
      body: Center(
          child: Chewie(
            controller: chewieController,
          )
      ),
    );
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：安卓常用权限 AndroidMenifest.xml 说明

下一篇：flutter播放m3u8视频