使用微信小程序播放视频直播
观众端使用live-player进行直播视频的播放,live-player组件从视频云拉流,并用于实时音视频播放。live-player支持两种模式:Live和RTC,前者用于直播播放,后者用于实时音视频通话。在使用live-player组件实现直播播放前先看看live-player组件的属性以及方法。
属性定义
- Src
用于音视频下行的播放URL,支持RTMP协议(URL 以rtmp://打头)和 FLV 协议(URL 以http://打头且以.flv结尾)。
live-player标签不支持 HLS(m3u8)协议,因为 已经支持 HLS(m3u8)播放协议了。但直播观看不推荐使用 HLS(m3u8)协议,延迟要比RTMP和FLV协议高一个数量级。 - mode
live 模式主要用于直播类场景,例如赛事直播、在线教育、远程培训等等。该模式下,小程序内部的模块会优先保证观看体验的流畅,通过调整 min-cache 和 max-cache 属性,您可以调节观众(播放)端所感受到的时间延迟的大小。
RTC 则主要用于双向视频通话或多人视频通话场景,例如金融开会、在线客服、车险定损、培训会议等等。在此模式下,对 min-cache 和 max-cache 的设置不会起作用,因为小程序内部会自动将延迟控制在一个很低的水平(500ms左右)。 - min-cache 和 max-cache
这两个参数分别用于指定观看端的最小缓冲时间和最大缓冲时间。所谓缓冲时间,是指播放器为了缓解网络波动对观看流畅度的影响而引入的一个“蓄水池”,当来自网络的数据包出现卡顿甚至停滞的时候,“蓄水池”里的紧急用水可以让播放器还能坚持一小段时间,只要在这个短暂的时间内网速恢复正常,播放器就可以源源不断地渲染出流畅而平滑的视频画面。“蓄水池”里的水越多,抗网络波动的能力就越强,但代价就是观众端的延迟就越大,所以要在不同的场景下,使用不同的配置来达到体验上的平衡:
1) 码率比较低(1Mbps左右,画面以人物为主)的直播流,min-cache = 1,max-cache = 3 较合适。
2) 码率比较高(2Mbps - 3Mbps的高清游戏画面为主)的直播流,min-cache = 3,max-cache = 5 较合适。
3) RTC 模式下这两个参数是无效的。 - orientation
画面渲染角度,horizontal 代表是原始画面方向,vertical 代表向右旋转 90度。 - object-fit
画面填充模式,contain 代表把画面显示完成,但如果视频画面的宽高比和live-player标签的宽高比不一致,那么您将看到黑边。fillCrop 代表把屏幕全部撑满,但如果视频画面的宽高比和 标签的宽高比不一致,那么画面中多余的部分会被裁剪掉。 - background-mute
微信切到后台以后是否继续播放声音,用于避免锁屏对于当前小程序正在播放的视频内容的影响。 - sound-mode
设置播放模式,可设值为:ear与speaker,ear代表使用听筒播放,speaker代表使用扬声器,默认为扬声器。
对象操作
- wx.createLivePlayerContext()
通过wx.createLivePlayerContext()可以将live-player标签和javascript 对象关联起来,之后即可操作该对象。 - play
开始播放,如果live-player的autoplay属性设置为false(默认值),那么就可以使用play来手动启动播放。 - stop
停止播放。 - pause
暂停播放,停留在最后画面。 - resume
继续播放,与 pause 成对使用。 - mute
设置静音。 - requestFullScreen
进入全屏幕。 - exitFullScreen
退出全屏幕。
内部事件
通过 live-player 标签的 bindstatechange 属性可以绑定一个事件处理函数,该函数可以监听推流模块的内部事件和异常通知。
- 关键事件
2001 PLAY_EVT_CONNECT_SUCC 已经连接到云端服务器
2002 PLAY_EVT_RTMP_STREAM_BEGIN 服务器开始传输音视频数据
2003 PLAY_EVT_RCV_FIRST_I_FRAME 网络接收到首段音视频数据
2004 PLAY_EVT_PLAY_BEGIN 视频播放开始,可以在收到此事件之前先用默认图片代表等待状态
2006 PLAY_EVT_PLAY_END 视频播放结束
2007 PLAY_EVT_PLAY_LOADING 进入缓冲中状态,此时播放器在等待或积攒来自服务器的数据
-2301 PLAY_ERR_NET_DISCONNECT 网络连接断开,且重新连接亦不能恢复,播放器已停止播放 - 警告事件
内部警告并非不可恢复的错误,小程序内部的音视频 SDK 会启动相应的恢复措施,警告的目的主要用于提示开发者或者最终用户
2101 PLAY_WARNING_VIDEO_DECODE_FAIL 当前视频帧解码失败
2102 PLAY_WARNING_AUDIO_DECODE_FAIL 当前音频帧解码失败
2103 PLAY_WARNING_RECONNECT 网络断连,已启动自动重连恢复(重连超过三次就直接抛送 PLAY_ERR_NET_DISCONNECT 了)
2104 PLAY_WARNING_RECV_DATA_LAG 视频流不太稳定,可能是观看者当前网速不充裕
2105 PLAY_WARNING_VIDEO_PLAY_LAG 当前视频播放出现卡顿
2106 PLAY_WARNING_HW_ACCELERATION_FAIL 硬解启动失败,采用软解
2107 PLAY_WARNING_VIDEO_DISCONTINUITY 当前视频帧不连续,视频源可能有丢帧,可能会导致画面花屏
3001 PLAY_WARNING_DNS_FAIL DNS解析失败(仅播放 RTMP:// 地址时会抛送)
3002 PLAY_WARNING_SEVER_CONN_FAIL 服务器连接失败(仅播放 RTMP:// 地址时会抛送)
3003 PLAY_WARNING_SHAKE_FAIL 服务器握手失败(仅播放 RTMP:// 地址时会抛送)
示例代码
接下来我们实现观众端的直播播放页面,在直播播放页面中我们将live-player的url参数设置为Nginx的拉流地址,并将mode设置为“live”。以下是直播播放页面的相关代码:
live_play.wxml
<view><view><live-player id="player" src="rtmp://......" mode="live" autoplay bindstatechange="statechange" binderror="error" /><view><button bindtap="bindPlay"type="primary">播放</button><button bindtap="bindPause" type="primary">暂停</button><button bindtap="bindStop" type="primary">停止</button><button bindtap="bindResume" type="primary">恢复</button><button bindtap="bindMute" type="primary">静音</button></view></view>
</view>
live_play.js
Page({onReady(res) {this.ctx = wx.createLivePlayerContext('player')},stateChange(e) {console.log('live-player code:', e.detail.code)},error(e) {console.error('live-player error:', e.detail.errMsg)},bindPlay() {this.ctx.play({success: res => {},fail: res => {}})},bindPause() {this.ctx.pause({success: res => {},fail: res => {}})},bindStop() {this.ctx.stop({success: res => {},fail: res => {}})},bindResume() {this.ctx.resume({success: res => {},fail: res => {}})},bindMute() {this.ctx.mute({success: res => {},fail: res => {}})}
})
使用微信小程序播放视频直播相关推荐
- 基于微信小程序做直播的截图(微信小程序发起视频直播)
第1部分:大至描述 用微信小程序来发起直播(推流): 用户即可以通过微信直接观看,也可以通过PC端web浏览器观看或通过手机浏览器观看. 第2部分:提示说明 图1,是小程序界面方面的截图(P1图中:截 ...
- 即构科技冼牛:微信小程序的视频直播实践
2018 年 4 月 10 日,TGO 鲲鹏会深圳分会会员.即构科技资深技术专家 & 架构师冼牛作为 TGO 鲲鹏会线上分享第六季的嘉宾,以直播的形式分享了实时视频通话和直播技术在微信小程序上 ...
- 微信小程序播放视频 禁止快进
用的组件是小程序自带的 video标签 详细查看官方文档 WXML <video id="myVideo" bindtimeupdate="timeUpdate&q ...
- 微信小程序--获取视频链接(Videourl)方法~~~
微信小程序–获取视频连接(videourl)方法~~~ 如何获取音乐MV的URL地址 虾米音乐 试了很多音乐网站发现"虾米音乐"的MV的URL地址是可以获取的,并且在微信小程序播放 ...
- 微信小程序——获取视频的URL地址【已解决】
微信小程序--获取视频的URL地址[已解决] 如何获取音乐MV的URL地址 虾米音乐 试了很多音乐网站发现"虾米音乐"的MV的URL地址是可以获取的,并且在微信小程序播放视频的时候 ...
- C# 利用正则表达式获取文本中的https网址并替换新的对应的值,微信小程序播放腾讯视频
后台用KindEditor传了好几个视频地址,需要在微信小程序播放,复文本框写的内容是保存在数据库的一个字段的,就像下面这样,像这小程序播放,需要解析除真正的视频地址,所有需要获取里面的两个视频地址, ...
- 微信小程序播放bilibili视频
微信小程序播放B站视频 前端代码 wxml文件 <view class="body-view" style="text-align: center;"&g ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebRTC ...
- 腾讯技术分享:微信小程序音视频技术背后的故事
1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...
最新文章
- Visual Studio 2008 到底有多强?漫画告诉你 !
- Angularjs API指令查询
- java监听器模式使用场景_常用监听器及其应用场景
- Eclipse提示The **** cannot be resolved. It is indirectly referenced from required .cl
- UVa 11059 Maximum Product
- jqury关于cooke的操作写入cookie后只显示一次的DIV提示框代码
- Android程序杀死自己的进程和其他程序进程方法
- 计算机专业性特有的道德要求,什么是通信科学技术人员职业道德的双重性?
- kafka 脚本发送_Kafka笔记归纳(第五部分:一致性保证,消息重复消费场景及解决方式)...
- python制作饼状图
- 01-06 Linux常用命令-统计
- LPTSTR、LPCSTR、LPCTSTR、LPSTR的意义
- Scheme报错define-values: assignment disallowed; cannot change constant
- 简单python脚本实例-简单了解python调用其他脚本方法实例
- 【转】requests、BeautifulSoup使用总结
- Java权限管理(授权与认证)
- C语言(二)C语言程序结构及简单的C程序举例
- 计算机用户密码查看器,电脑开机密码查看工具
- Elasticsearch LBS 的简单应用
- BSS,ESS,SSID,BSSID,ESSID,VAP概念详解
热门文章
- LMT NEW PBS软件对作业排队运算的优势
- 应用场景三:西门子PLC通过WIFI实现PLC之间的无线通讯
- javaweb JSP JAVA 仓库库存管理系统(仓库进销存管理系统jsp服装库存管理系统仓库管理系统)
- 欧拉 phi 函数的积性证明
- 接口【四】继承父类并实现多个接口
- 再见 ! 公司的( )系统 ~ 网友:好想给大神当小弟...
- python的名字来源于什么故事_从认识Python开始吧
- 说说诸葛亮的八卦阵。
- position:fixed苹果和安卓的区别
- Windows下安装OMNET++仿真工具