Flutter 视频播放

一、准备工作、注意事项   1、把自己的 android stuido 升级为最新版本,Xcode 升级成最新版本。否则安装配置插件的时候可能会出现问题   2、安装完成调用原生的 api 库后,需要重新运行 flutter run   3、如果运行 flutter run 失败,请打开 android studio 后重新运行,如果 android studio 下载包失败的话请用电脑连接手机热点重试。   4、如果依赖安装完成后引入库提示错误,请重启 Vscode 二、Flutter 视频播放    在 Flutter 里官方提供了一个 video_player 插件可以播放视频。但是 video_player 有一些局限性。没法控制底部播放进度等。 所以我们主要给大家讲解一个第三方的视频播放库chewie。chewie 是一个非官方的第三方视频播放组件,看起来好像是基于 HTML5 播放的组件。chewie 相对 video_player 来说,有控制栏和全屏的功能。Chewie 使用 video_player 引擎并将其包裹在友好的 Material 或 Cupertino UI 中!   // 两个都要安装 https://pub.dev/packages/video_playe https://pub.dev/packages/chewie   案例代码
import 'package:flutter/material.dart';

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

class CameraPage extends StatefulWidget{
CameraPage({Key key});
_CameraPage createState() => _CameraPage();
}

class _CameraPage extends State {

var videoPlayerController;
var chewieController;
var play = true;
initState() {
super.initState();
}
dispose() {
super.dispose();
videoPlayerController.dispose();
chewieController.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('设备硬件')
),
body: ListView(
children: <Widget>[
RaisedButton(child: Text('播放视频'), onPressed: () {
playAudio();
setState(() {
play = true;
});

}),
play ? Container(child: Chewie(controller: chewieController),) : SizedBox(height: 0,)
]
)
);
}
// 播放视频
playAudio() {
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,
);
}
}

相关文章

这篇文章主要讲解了“FlutterComponent动画的显和隐怎么实现...
这篇文章主要讲解了“flutter微信聊天输入框功能如何实现”,...
本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有...
这篇文章主要介绍“Flutter怎么使用Android原生播放器”,在...
Flutter开发的android端如何修改APP名称,logo,版本号,具体...
Flutter路由管理初识路由概念一.路由管理1.1.Route1.2.Mater...