flutter开发实战-video_player插件播放抖音直播实现(仅限Android端)
在之前的开发过程中,遇到video_player播放视频,通过查看video_player插件描述,可以看到video_player在Android端使用exoplayer,在iOS端使用的是AVPlayer。由于iOS的AVPlayer不支持flv、m3u8格式的直播,这里video_player播放抖音直播仅仅在Android有效,在iOS端,如果需要播放抖音直播,可以使用fijkplayer插件进行播放,由于fijkplayer使用的是ijkplayer,可以播放flv、m3u8格式的直播。
一、引入
在pubspec.yaml中引入video_player
dart
# 播放器
video_player: ^2.7.0
# fijkplayer: ^0.11.0
二、实现VideoPlayer的Widget
2.1 在iOS中的设置
在iOS工程中info.plist添加一下设置,以便支持Https,HTTP的视频地址
dart
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
2.2 在Android中的设置
需要在/android/app/src/main/AndroidManifest.xml文件中添加网络权限
dart
<uses-permission android:name="android.permission.INTERNET"/>
2.3 播放的VideoPlayer
使用video_player插件,需要使用VideoPlayerController来控制播放、暂停、添加监听
初始化后添加监听,来获取VideoPlayerController中的Value值,可以看到一些状态。例如
VideoPlayerValue(duration: 0:00:00.001000, size: Size(1280.0, 720.0), position: 0:32:14.877000, caption: Caption(number: 0, start: 0:00:00.000000, end: 0:00:00.000000, text: ), captionOffset: 0:00:00.000000, buffered: [DurationRange(start: 0:00:00.000000, end: 0:32:17.868000)], isInitialized: true, isPlaying: true, isLooping: false, isBuffering: false, volume: 1.0, playbackSpeed: 1.0, errorDescription: null, isCompleted: false)
添加监听
dart
// 添加监听
void addListener() {
if (_controller != null) {
_controller!.addListener(videoListenerCallback);
}
}
移除监听
dart
// 移除监听
void removeListener() {
if (_controller != null) {
_controller!.removeListener(videoListenerCallback);
}
}
监听的callback回调
dart
void videoListenerCallback() {
// 监听结果
if (_controller != null) {
if (_controller!.value.hasError) {
// 出现错误
setState(() {});
}
if (_controller!.value.isCompleted) {
// 直播完成
setState(() {});
}
if (_controller!.value.isBuffering) {
// 正在buffer
}
if (_controller!.value.hasError || _controller!.value.isCompleted) {
// 是否处于错误状态 或者 播放完成
if (widget.liveController.onOutLinkPlayerCompleted != null) {
widget.liveController.onOutLinkPlayerCompleted!();
}
}
if (_controller!.value.hasError == false) {
// 可播放,隐藏封面
if (widget.liveController.onOutLinkPlayerCanPlay != null) {
widget.liveController.onOutLinkPlayerCanPlay!();
}
}
}
}
播放
dart
Future<void> play() async {
if (_controller != null) {
await _controller?.play();
}
}
暂停
dart
Future<void> play() async {
if (_controller != null) {
await _controller?.pause();
}
}
完整代码如下
dart
// 视频播放测试
class VideoPlayerSkeleton extends StatefulWidget {
const VideoPlayerSkeleton({
Key? key,
required this.videoUrl,
required this.isLooping,
this.autoPlay = true,
required this.width,
required this.height,
}) : super(key: key);
final String videoUrl;
final bool isLooping;
final bool autoPlay;
final double width;
final double height;
@override
State<VideoPlayerSkeleton> createState() => _VideoPlayerSkeletonState();
}
class _VideoPlayerSkeletonState extends State<VideoPlayerSkeleton> {
VideoPlayerController? _controller;
@override
void initState() {
super.initState();
videoPlay();
print("_VideoPlayerSkeletonState videoUrl:${widget.videoUrl}");
}
// 添加监听
void addListener() {
if (_controller != null) {
_controller!.addListener(videoListenerCallback);
}
}
void videoListenerCallback() {
// 监听结果
if (_controller != null) {
if (_controller!.value.hasError) {
// 出现错误
setState(() {});
}
if (_controller!.value.isCompleted) {
// 直播完成
setState(() {});
}
if (_controller!.value.isBuffering) {
// 正在buffer
}
}
}
// 移除监听
void removeListener() {
if (_controller != null) {
_controller!.removeListener(videoListenerCallback);
}
}
// 播放视频
Future<void> videoPlay() async {
_controller?.dispose();
_controller = VideoPlayerController.networkUrl(
Uri.parse(widget.videoUrl),
videoPlayerOptions: VideoPlayerOptions(
mixWithOthers: true,
allowBackgroundPlayback: false,
),
);
addListener();
await _controller?.initialize().then((_) {
// Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
setState(() {});
}).catchError((error) {
// 是否处于错误状态 或者 播放完成
if (widget.liveController.onOutLinkPlayerCompleted != null) {
widget.liveController.onOutLinkPlayerCompleted!();
}
}).whenComplete(() {
// print('checkAnimationTimeout whenComplete');
});
await _controller!.setLooping(widget.isLooping);
if (widget.autoPlay) {
await _controller?.play();
} else {
await _controller?.pause();
}
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
color: Colors.black87,
child: Stack(
alignment: Alignment.center,
children: [
buildVideoPlayer(context),
buildStateIntro(context),
],
),
);
}
// 播放视频
Widget buildVideoPlayer(BuildContext context) {
if (_controller != null && _controller!.value.isInitialized) {
return AspectRatio(
aspectRatio: _controller!.value.aspectRatio,
child: VideoPlayer(_controller!),
);
}
return Container();
}
// 播放过程中出现error
Widget buildStateIntro(BuildContext context) {
if (_controller != null) {
String title = "";
String message = "";
bool showIntro = false;
if (_controller!.value.hasError) {
showIntro = true;
title = "播放出现错误";
message = _controller!.value.errorDescription ?? "";
} else {
if (_controller!.value.isCompleted) {
showIntro = true;
title = "播放结束";
}
}
if (showIntro) {
return Container(
padding: EdgeInsets.symmetric(vertical: 50.r, horizontal: 50.r),
color: Colors.transparent,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(child: Container()),
Text(
title,
textAlign: TextAlign.center,
softWrap: true,
style: TextStyle(
fontSize: 28.r,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
color: Colors.white,
decoration: TextDecoration.none,
),
),
SizedBox(
height: 25.r,
),
Text(
message,
textAlign: TextAlign.center,
softWrap: true,
style: TextStyle(
fontSize: 22.r,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
color: Colors.white,
decoration: TextDecoration.none,
),
),
Expanded(child: Container()),
],
),
);
}
}
return Container();
}
@override
void dispose() {
// TODO: implement dispose
removeListener();
_controller?.dispose();
super.dispose();
}
}
三、从抖音网站上找到直播地址
由于使用抖音播放地址,这里简单描述一下从抖音网站上找到直播的flv地址。
进入抖音直播间,在网页点击鼠标右键,看到检查。
https://live.douyin.com/567752440034
找到网络,刷新页面,可以看到stream的一条,
复制地址即可,使用该地址播放直播
四、查看直播结果
之后,我们将地址复制到VideoPlayerSkeleton中,运行后,可以看到播放的效果
注意
:直接在Container上设置大小后,child是AspectRatio(
aspectRatio: _controller!.value.aspectRatio,
child: VideoPlayer(_controller!),
);
会出现画面变形,可以使用Stack嵌套一下。
五、小结
flutter开发实战-video_player插件播放抖音直播实现(仅限Android端)。描述可能不是特别准确,请见谅。
https://blog.csdn.net/gloryFlow/article/details/133634186
学习记录,每天不停进步。