logo头像

aferica

Flutter学习(六):视频播放

本文于1616天之前发表,文中内容可能已经过时。

在使用Flutter视频播放组件时,最开始我使用了官方组件video_player,但是在使用时遇到了报错,查看Github和Google并没有解决,于是我在Flutter组件仓库中查找,最后选择了使用flutter_ijkplayer

选择原因

  • 兼容视频格式多,可自行编译
  • 可以定制自己的UI
  • 该组件是基于bilibili/ijkplayer,本人对B站挺有好感的
  • 使用方便,有中文文档

简介

GitHub地址:https://github.com/CaiJingLong/flutter_ijkplayer

使用

引入

1
2
3
# pubspec.yaml
dependencies:
flutter_ijkplayer: ${lastes_version}

页面使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import 'package:flutter/material.dart';
import 'package:flutter_ijkplayer/flutter_ijkplayer.dart';

class VideoInfoPage extends StatefulWidget {

@override
State<StatefulWidget> createState() => VideoInfoState();
}

class VideoInfoState extends State<VideoInfoPage> {

String selectPlayUrl = '';

// 定义控制器
IjkMediaController controller = IjkMediaController();

@override
void initState() {
super.initState();
getVideoInfo();
}

@override
void dispose() {
// 重要,一定要在销毁页面时销毁播放器,否则会出现后台仍在播放有声音的问题
controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
// TODO: implement build

return Scaffold(
appBar: AppBar(
title: Text('影片信息'),
),
body: Container(
child: Stack(
children: <Widget>[
Positioned(
top: 0,
left: 0.0,
right: 0.0,
height: MediaQuery.of(context).size.width / 16 * 9,
child: Container(
// 自定义播放器高度
height: MediaQuery.of(context).size.width / 16 * 9,
child: IjkPlayer(mediaController: controller),
),
),
// ... 其它信息
]
),
),
);
}

getVideoInfo() async {
String palyUrl = 'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4';
setState(() {
selectPlayUrl = palyUrl;
});

await controller.setNetworkDataSource(
palyUrl,
autoPlay: true //自动播放
);
}
}

切换来源

可以为按钮添加点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// ...
onClick: () async {
String playUrl = 'xxx';
setState(() {
selectPlayUrl = playUrl;
});
// 这个方法调用后,会释放所有原生资源,但重新设置dataSource依然可用
await controller.reset();
// 重新设置播放地址
controller.setNetworkDataSource(
playUrl,
autoPlay: false
);
},
// ...

更多介绍请详见官方文档

效果展示

微信打赏

你的赞赏是对我最大的鼓励