flutter开发实战-video_player插件播放抖音直播实现（仅限Android端）

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

  # 播放器video_player: ^2.7.0# fijkplayer: ^0.11.0

二、实现VideoPlayer的Widget

2.1 在iOS中的设置

在iOS工程中info.plist添加一下设置，以便支持Https，HTTP的视频地址

<key>NSAppTransportSecurity</key>
<dict><key>NSAllowsArbitraryLoads</key><true/>
</dict>

2.2 在Android中的设置

需要在/android/app/src/main/AndroidManifest.xml文件中添加网络权限

<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)

添加监听

// 添加监听void addListener() {if (_controller != null) {_controller!.addListener(videoListenerCallback);}}

移除监听

// 移除监听void removeListener() {if (_controller != null) {_controller!.removeListener(videoListenerCallback);}}

监听的callback回调

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!();}}}}

播放

Future<void> play() async {
if (_controller != null) {await _controller?.play();}
}

暂停

Future<void> play() async {
if (_controller != null) {await _controller?.pause();}
}

完整代码如下

//  视频播放测试
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;@overrideState<VideoPlayerSkeleton> createState() => _VideoPlayerSkeletonState();
}class _VideoPlayerSkeletonState extends State<VideoPlayerSkeleton> {VideoPlayerController? _controller;@overridevoid 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();}}@overrideWidget 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();}// 播放过程中出现errorWidget 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();}@overridevoid dispose() {// TODO: implement disposeremoveListener();_controller?.dispose();super.dispose();}
}

三、从抖音网站上找到直播地址

由于使用抖音播放地址，这里简单描述一下从抖音网站上找到直播的flv地址。

进入抖音直播间，在网页点击鼠标右键，看到检查。
https://live.douyin.com/567752440034
在这里插入图片描述

找到网络，刷新页面，可以看到stream的一条，
在这里插入图片描述

复制地址即可，使用该地址播放直播
在这里插入图片描述

https://pull-hs-spe-f5.douyincdn.com/fantasy/stream-728687306789918920718_sd.flv?_neptune_token=MIGlBAxGexWdmRAYAAGs67QEgYIZi9nqbdY3bbfeK9dCVFBnlFTJNF1WNGRZ3AVrQ1ixrE_54JzkGsfuBjGER_2RhP5Qy_GzELSQuct4bK5aktJ2P2xnNznJG87KKhybkeCuefBAkOCI9Tx8eA1mz2GcmfcfqFNeR8DFPDcbzFp_sKyyJRnytmILegqrqjcjxgW04GYwBBDMFIKjhmF1jpi96O53wH7v&expire=1696731973&sign=38f51d46dcd5828fdbc212372bbb3522&volcSecret=38f51d46dcd5828fdbc212372bbb3522&volcTime=1696731973

四、查看直播结果

之后，我们将地址复制到VideoPlayerSkeleton中，运行后，可以看到播放的效果

在这里插入图片描述

注意：直接在Container上设置大小后，child是AspectRatio(
aspectRatio: _controller!.value.aspectRatio,
child: VideoPlayer(_controller!),
);
会出现画面变形，可以使用Stack嵌套一下。

五、小结

flutter开发实战-video_player插件播放抖音直播实现（仅限Android端）。描述可能不是特别准确，请见谅。

https://blog.csdn.net/gloryFlow/article/details/133634186

学习记录，每天不停进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/152642.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

workerman的基本用法（示例详解）

workerman的基本用法（示例详解）

workerman是什么&#xff1f; Workerman是一个异步事件驱动的PHP框架&#xff0c;具有高性能&#xff0c;可轻松构建快速&#xff0c;可扩展的网络应用程序。支持HTTP&#xff0c;Websocket&#xff0c;SSL和其他自定义协议。支持libevent&#xff0c;HHVM&#xff0c;ReactPH…
阅读更多...
el-table 设置最大高度且能刚好撑满

el-table 设置最大高度且能刚好撑满

max-height"calc(90vh - 120px)"90vh视口高度的90%自行调整即可
阅读更多...
解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页

解决: 使用html2canvas和print-js打印组件时, 超出高度出现空白页

如果所示&#xff1a;当我利用html2canvas转换成图片后, 然后使用print-js打印多张图片, 第一张会出现空白页 打印组件可参考这个: Vue-使用html2canvas和print-js打印组件 解决: 因为是使用html2canvas转换成图片后才打印的, 而图片是行内块级元素, 会有间隙, 所以被挤下去了…
阅读更多...
真香！Jenkins 主从模式解决问题So Easy~

真香！Jenkins 主从模式解决问题So Easy~

01.Jenkins 能干什么 Jenkins 是一个开源软件项目&#xff0c;是基于 Java 开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行持续集成。 中文官网&#xff1a;https://jenkins.io/zh/ 0…
阅读更多...
Docker基础（CentOS 7）

Docker基础（CentOS 7）

参考资料 hub.docker.com 查看docker官方仓库&#xff0c;需要梯子 Docker命令大全 黑马程序员docker实操教程 &#xff08;黑马讲的真的不错 容器与虚拟机 安装 yum install -y docker Docker服务命令 启动服务 systemctl start docker停止服务 systemctl stop docker重启…
阅读更多...
Redis AOF重写原原理

Redis AOF重写原原理

重写aof之前 appendonly.aof.1.base.aof appendonly.aof.1.incr.aof appendonly.aof.manifest 重写aof 一次 appendonly.aof.2.base.aof 大小变化 appendonly.aof.2.incr.aof 大小o appendonly.aof.manifest 大小不变 AOF文件重写并不是对原文件进行重新整理&#xff0c;而是直…
阅读更多...
Docker搭建MySQL8.0主从复制(一主一从)

Docker搭建MySQL8.0主从复制(一主一从)

0. 配置说明 宿主机使用的版本为19045的win10专业版&#xff0c;MySQL使用的是8.0&#xff0c;Docker容器使用Linux。 1. 安装Docker Desktop 略 修改Docker默认安装路径 安装包自己就提供了修改安装路径的功能&#xff0c;CMD中运行&#xff1a; “Docker Desktop Installe…
阅读更多...
财务明细一目了然，颜色标记记录轻松掌握个人账目！

财务明细一目了然，颜色标记记录轻松掌握个人账目！

无论您是想更好地理清个人收支&#xff0c;还是希望在财务管理中更加高效&#xff0c;我们为您推荐一款绝佳的财政管理神器&#xff1a;颜色标记记录&#xff01; 第一步&#xff0c;首先&#xff0c;我们要先进入【晨曦记账本】主页面&#xff0c;并点击上方功能栏里的“添加…
阅读更多...
[开源]MIT协议，开源论坛程序，拥有友好的用户界面和操作体验

[开源]MIT协议，开源论坛程序，拥有友好的用户界面和操作体验

一、开源项目简介 尤得一物是一个开源论坛程序&#xff0c;提供丰富的功能&#xff0c;可以作为管理或分享文章的论坛博客&#xff0c;也可以在此基础上进行自定义开发。 二、开源协议 使用MIT开源协议 三、界面展示 四、功能概述 尤得一物是一个开源论坛程序&#xff0c;…
阅读更多...
如何使用Docker轻松构建和管理应用程序（一）

如何使用Docker轻松构建和管理应用程序（一）

如今Docker的使用已经非常普遍&#xff0c;特别在一线互联网公司。使用Docker技术可以帮助企业快速水平扩展服务&#xff0c;从而到达弹性部署业务的能力。在云服务概念兴起之后&#xff0c;Docker的使用场景和范围进一步发展&#xff0c;如今在微服务架构越来越流行的情况下&a…
阅读更多...
discuz封面设置失败的解决办法(centos系统+windows系统）

discuz封面设置失败的解决办法(centos系统+windows系统）

discuz封面设置失败的解决办法(centos系统windows系统&#xff09; centos系统&#xff1a;1、开启/var/www/html 这个目录的读写权限chmod -R 777 /var/www/html然后重启httpd&#xff1a;service httpd restart如果discuz论坛发布帖子&#xff0c;还是显示封面设置失败的话…
阅读更多...
云计算安全和云原生安全的关系

云计算安全和云原生安全的关系

云计算安全(Cloud Computing Security)指的是在云环境中保护数据、应用程序和基础设施的安全性。它包括保护云服务提供商的基础设施和平台&#xff0c;以及云服务用户的数据和应用程序。 云原生安全(Cloud-Native Security)则是指在云原生环境中保护应用程序和服务的安全性。云…
阅读更多...
基于maven的项目搭建（已跑通）

基于maven的项目搭建（已跑通）

1、直接选择archetype-webapp即可 &#xff08;这里很多人会觉得很慢–解决方案&#xff1a;https://blog.csdn.net/qq_45591895/article/details/133705674?spm1001.2014.3001.5501&#xff09; 2、手动添加一个java目录即可。 3、添加Tomcat 3、这就跑通了&#xff0c;可以…
阅读更多...
二叉搜索树的基础操作

二叉搜索树的基础操作

如果对于二叉搜索树不是太清楚&#xff0c;为什么要使用二叉搜索树&#xff1f;作者推荐&#xff1a;二叉搜索树的初步认识_加瓦不加班的博客-CSDN博客 定义节点 static class BSTNode {int key; // 若希望任意类型作为 key, 则后续可以将其设计为 Comparable 接口Object val…
阅读更多...
Unity 之 EditorGUILayout.BeginHorizontal/EndHorizontal异常报错问题

Unity 之 EditorGUILayout.BeginHorizontal/EndHorizontal异常报错问题

报错内容&#xff1a; 缘由&#xff1a;由于在EditorGUILayout.EndHorizontal()之前执行了类似打开窗口的逻辑 解决办法&#xff1a; 在EditorGUILayout.EndHorizontal()之前执行GUIUtility.ExitGUI();
阅读更多...
【广州华锐互动】动物解剖学AR互动学习平台

【广州华锐互动】动物解剖学AR互动学习平台

增强现实&#xff08;AR&#xff09;是一种将虚拟信息叠加到现实世界中的技术。通过智能手机、平板电脑或AR眼镜等设备&#xff0c;AR技术可以创建出逼真的虚拟物体&#xff0c;这些物体可以与现实世界的环境相互交互。 AR技术在教育领域的应用非常广泛&#xff0c;包括历史、科…
阅读更多...
Python接口自动化测试实战详解，你想要的全都有

Python接口自动化测试实战详解，你想要的全都有

前言 接口自动化测试是当前软件开发中最重要的环节之一&#xff0c;可以提高代码质量、加速开发周期、减少手工测试成本等优点。Python语言在接口自动化测试方面应用广泛&#xff0c;因为它具有简单易学、开发效率高、库丰富等特点。 一、接口自动化测试概述 接口自动化测试…
阅读更多...
基于docker+Keepalived+Haproxy高可用前后的分离技术

基于docker+Keepalived+Haproxy高可用前后的分离技术

基于dockerKeepalivedHaproxy高可用前后端分离技术 架构图 服务名docker-ip地址docker-keepalived-vip-iphaproxy-01docker-ip自动分配 未指定ip192.168.31.252haproxy-02docker-ip自动分配 未指定ip192.168.31.253 安装haproxy 宿主机ip 192.168.31.254 宿主机keepalived虚…
阅读更多...
macOS Sonoma 正式版系统已发布，macos14值得更新吗

macOS Sonoma 正式版系统已发布，macos14值得更新吗

北京时间9月27日macOS Sonoma 正式版系统发布&#xff0c;为 Mac 带来一系列丰富新功能&#xff1a;优化小组件、升级视频会议、沉浸式游戏体验等&#xff0c;最新macos14值得更新吗&#xff1f;这里根据我一个月的试用beta版本体验来分享一下。 我使用的是M1芯片的MacBook air…
阅读更多...
TimeWise-Jira工时管理插件6.0.0发布！对比测评某知名工时插件，谁的数据处理性能更胜一筹？

TimeWise-Jira工时管理插件6.0.0发布！对比测评某知名工时插件，谁的数据处理性能更胜一筹？

近期&#xff0c;龙智自研插件TimeWise for Jira&#xff08;Jira工时管理插件&#xff09;发布了重要更新——6.0.0版本。这次升级主要针对报表性能做出了优化与提升。 对于企业级应用而言&#xff0c;具高效处理大规模数据的能力是最为关键。龙智深谙国内用户需求&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023