PDF《移动直播》

Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第1 共86页 移动直播 Web端集成 产品文档 Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第2 共86页 【版权声明】 ?2013-2018 腾讯云版权所有 本文档著作权归腾讯云单独所有,未经腾讯云事先书面许可,任何主体不得以任何形式复制、修改、抄袭、传 播全部或部分 本文档内容.

【商标声明】 及其它腾讯云服务相关的商标均为腾讯云计算(北京)有限责任公司及其关联公司所有.本文档涉及的第三方 主体的商标, 依法由权利人所有. 【服务声明】 本文档意在向客户介绍腾讯云全部或部分产品、服务的当时的整体概况,部分产品、服务的内容可能有所调整 .您所购买的 腾讯云产品、服务的种类、服务标准等应由您与腾讯云之间的商业合同约定,除非双方另有约定 ,否则,腾讯云对本文档内 容不做任何明示或模式的承诺或保证. Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第3 共86页 文档目录 Web端集成 在线播放器(TcPlayer) TcPlayer(PC+手机) 朋友圈分享 常见问题 IE浏览器(ActiveX) 关于 ActiveX 基础功能 pusher 对象 player 对象 实时连麦 直播连麦(LiveRoom) 视频通话(RTCRoom) Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第4 共86页 功能介绍 腾讯云 Web 播放器主要解决在手机浏览器和 PC 浏览器上播放音视频流的问题,使您的视频内容可以不依赖用户安装 App 就可以在朋友圈、微博等社交平台进行传播,本文档适合有一定 Javascript 语言基础的开发人员阅读. 基础知识 对接之前先要了解如下的基础知识,非常有必要: 直播和点播 直播是指视频源是实时的,一旦主播停播了,这个地址就已经失去意义了,而且由于是实时直播,所以播放器在播直播视 频的时候是没有进度条的. 点播是指视频源是一个服务器上的文件,文件只要没有被提供方删除,就随时可以播放, 而且由于整个视频都在服务器 上,所以播放器在播点播视频的时候是有进度条的. 协议的支持 Web 播放器的视频播放能力本身不是网页代码实现的,而是靠浏览器的支持,所以其兼容性并不像我们想象的那么好,您 必须要接受一个事实:不是所有的手机浏览器都能有符合预期的表现,有些手机浏览器甚至根本就不支持视频播放.最常 见的用于网页直播的视频源地址是以 m3u8 结尾的地址,我们称其为 HLS (HTTP Live Streaming),这是苹果推出的标 准,由于苹果的影响力,目前各手机浏览器产品对这种格式的兼容性最好,但它有个天然的问题,就是延迟比较大,一般 是20-30 秒左右的延迟,在手机浏览器上我们并没有其它选择. 在PC 上情况会好很多,因为 PC 上的浏览器目前还没有抛弃 flash 控件,而flash 控件不追求洁癖,支持的视频源格式挺 多的,而且各浏览器上的 flash 控件都是 Adobe 自己开发,所以兼容性非常好. 对接攻略 Step 1:页面准备工作 在需要播放视频的页面(包括 PC 或H5)中引入初始化脚本. Web端集成 在线播放器(TcPlayer) TcPlayer(PC+手机) 最近更新时间:2018-03-15 23:01:21 Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第5 共86页;

注意: 直接用本地网页是调试不了的,因为腾讯云 Web 播放器处理不了这种情况下的跨域问题. Step 2:HTML 里放置容器 在需要展示播放器的页面位置加入播放器容器,也就是放一个 div,然后给它取个名字,比如:id_test_video ,之后视频的 画面都会在这个容器里渲染,容器的大小控制您可以使用 div 的属性进行控制,示例代码如下: Step 3:对接视频的播放 接下来就要写 javascript 代码,这些代码的作用是去指定的 URL 地址拉取音视频流,并将视频画面呈现到 Step2 中添加的容 器里. 3.1 一次简单的播放 如下是一条典型的直播 URL 地址,它是 HLS(m3u8)协议的,如果主播还在直播中的话,那么用 VLC 等播放器是可以直接 打开该 URL 进行观看的: http://2157.liveplay.myqcloud.com/2157_358535a.m3u8 // m3u8播放地址 我们现在要在手机浏览器上播放这个 URL 的视频,javascript 代码如下: var player = new TcPlayer('

id_test_video'

, { m3u8 : http://2157.liveplay.myqcloud.com/2157_358535a.m3u8 , //请替换成实际可用的播放地址 autoplay : true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的 coverpic : http://www.test.com/myimage.jpg , width : '

480'

,//视频的显示宽度,请尽量使用视频分辨率宽度 height : '

320'

//视频的显示高度,请尽量使用视频分辨率高度 });

这段代码就可以支持在 PC 以及手机浏览器上播放 HLS(m3u8)协议的直播视频,不过 HLS(m3u8)协议的视频虽然兼容 性还不错(部分 Android 手机依然不支持),但其延迟非常高,大约

20 秒以上的延迟. 3.2 PC 上实现更低的延迟 PC 浏览器支持 flash,javascript 代码如下: var player = new TcPlayer('

id_test_video'

, { m3u8 : http://2157.liveplay.myqcloud.com/2157_358535a.m3u8 , flv : http://2157.liveplay.myqcloud.com/live/2157_358535a.flv , //增加了一个flv的播放地址,用于PC平台的播放 请替 autoplay : true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的 Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第6 共86页 跟前一段代码的区别就在于我们增加了一个 FLV 的播放地址,腾讯云 Web 播放器如果发现目前的浏览器是 PC 浏览器,会主 动选择 FLV 链路,可以实现更低的延迟.前提条件是 FLV 和HLS(m3u8)这两个地址都是可以出流的,如果您使用腾讯云 的视频直播服务,这个问题是不需要犯愁,因为腾讯云的每一条直播频道都默认支持 FLV、RTMP 和HLS(m3u8)三种播放 协议. 3.3 播放不了怎么办? 如果您发现视频不能播放,有以下几个原因: 原因一:视频源有问题 如果是直播 URL,那一定要检查一下是不是主播已经停止推流,状态不处于【直播中】的情况,可以用浮窗提示一下观 众:【主播已经离开】. 如果是点播 URL,那要检查您要播放的文件是否还在服务器上,比如要播放的地址是否已经被其它人从点播系统移除. 原因二:本地网页调试 目前腾讯云的 Web 播放器是不支持本地网页去调试的(即通过 file:// 协议来打开视频播放的网页),主要是浏览器有跨 域安全限制,所以您如果是在 Windows 上随便放一个 test.html 文件然后测试是肯定播放不了的,需要将其上传到一个 服务器上进行测试.前端工程师可以通过反向代理的方式对线上的页面进行本地代理以实现本地调试,这是主流可行的本 地调试办法. 原因三:手机兼容问题 FLV 和RTMP 这两种地址,在普通的手机浏览器上都是不支持的(最新版本的 QQ 浏览器支持 FLV 协议的播放,但普及度 还不高),只能用 HLS(m3u8). 原因四:跨域安全问题 PC 浏览器的视频播放是基于 Flash 控件实现的,但做过 Flash 开发的同学都知道 Flash 控件会做跨域访问检查,当您要播 放的视频所存放的服务器没有部署跨域策略时才会碰到这个问题,解决方法就是:在视频服务器的根域名下的跨域配置文 件crossdomain.xml 中增加 qq.com 域名: Step 4:给播放器设置封面 在前面的代码例子中,您应该注意到 coverpic 这个参数了,在这里将详细介绍这个属性的使用方法. 备注:封面功能有可能在部分移动端播放环境下失效,由于移动端视频播放环境相对 PC 来说比较复杂,各个浏览器和 App 的Webview 对H5 video 实现的方式并不统一,如果遇到功能失效的情况,欢迎向我们的技术支持反馈(反馈内容包括系 统、浏览器或 App 的版本等关键信息),我们将尽可能去支持. coverpic : http://www.test.com/myimage.jpg , width : '

480'

,//视频的显示宽度,请尽量使用视频分辨率宽度 height : '

320'

//视频的显示高度,请尽量使用视频分辨率高度 });

Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第7 共86页4.1 简单设置封面 coverpic 可以传入一个图片地址作为播放器的封面,将在播放器区域内居中并且以图片的实际分辨率进行显示. coverpic : http://www.test.com/myimage.jpg 4.2 设置封面的展现样式 coverpic 同时支持传入一个对象,对象中可以进行设置封面的展现样式 style 和图片地址 src. style 支持的样式有

3 种: default:居中并且以图片的实际分辨率进行显示;

stretch:拉伸铺满播放器区域,图片可能会变形;

cover:优先横向等比拉伸铺满播放器区域,图片某些部分可能无法显示在区域内. coverpic : { style : stretch , src : http://www.test.com/myimage.jpg } 4.3 实现用例 这里有一个线上的示例代码,里面使用了 cover 方式显示封面,在PC 浏览器中右键【查看页面源码】即可查看页面的代码 实现: http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer-cover.html 注意: 在某些移动端设置封面会无效,具体说明请查看常见问题. Step 5:多清晰度的支持 5.1 原理介绍 我们知道优酷、土豆、腾讯上的视频有些是有多清晰度选择的,这个效果如何实现呢? 播放器本身是没有能力去改变视频的清晰度的,在视频源产生的地方其实只有一种清晰度,我们称之为原画,而原画视频编 码格式和封装格式有很多种,在Web 端无法完全支持播放所有的视频格式,点播支持必须是以 H.264 为视频编码,以mp

4、FLV 为封装格式的视频. 那么多清晰度是怎么实现的呢? 这里就是视频云发挥作用的地方了: 对于直播,来自主播那一端的原始视频会在腾讯云进行实时的转码,分出多路转码后的视频,比如我们常说的高清-HD 以 及标清-SD,每一路视频都有其对应的地址: http://2157.liveplay.myqcloud.com/2157_358535a.m3u8 // 原画 http://2157.liveplay.myqcloud.com/2157_358535a_900.m3u8 // 高清 http://2157.liveplay.myqcloud.com/2157_358535a_550.m3u8 // 标清 Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第8 共86页 对于点播,一个视频文件上传到腾讯云以后,您可以操作对该视频文件进行转码,产生另外几种清晰度的视频,比如我们 常说的高清-HD 以及标清-SD,需要注意的是上传后的原始视频是未经过腾讯云转码的,不能直接用于播放. http://200002949.vod.myqcloud.com/200002949_b6ffc.f240.m3u8 // 原画,用转码后的超清替换 http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8 // 高清 http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8 // 标清 注意: 上传后的原始视频是未经过腾讯云转码的,不能直接用于播放. 5.2 代码实现 如下的代码是让播放器支持多种清晰度的支持,也就是在播放器的用户界面上展示多种清晰度线路的选择. var player = new TcPlayer('

id_test_video'

, { m3u8 : http://200002949.vod.myqcloud.com/200002949_b6ffc.f240.m3u8 ,//请替换成实际可用的播放地址 m3u8_hd : http://200002949.vod.myqcloud.com/200002949_b6ffc.f230.av.m3u8 , m3u8_sd : http://200002949.vod.myqcloud.com/200002949_b6ffc.f220.av.m3u8 , autoplay : true, //iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的 coverpic : http://www.test.com/myimage.jpg , });

5.3 实现用例 这里有一个线上的示例代码,里面使用了多种分辨率的设置以及切换功能,在PC 浏览器中右键【查看页面源码】即可查看页 面的代码实现: http://imgcache.qq.com/open/qcloud/video/vcplayer/demo/tcplayer-clarity.html?autoplay=true 正常情况将看到这样的效果: PC 端现已支持多种清晰度播放并支持切换的功能,移动端尚未支持. Step 6:定制错误提示语 我们默认的提示语您可能觉得不符合您的需求,比如 网络错误,请检查网络配置或者播放链接是否正确 或者 视频解码错 误 等等,我们担心这些提示语在您看来可能太干瘪了,所以腾讯云Web播放器将支持提示语定制: 6.1 代码实现 如下是让播放器支持自定义提示语的核心代码,设置的提示语主要落在 wording 属性上. var player = new TcPlayer('

id_test_video'

, { m3u8 : http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8 ,//请替换成实际可用的播放地址 autoplay : true, //iOS下safari浏览器是不开放这个能力的 Web端集成 产品文档 版权所有:腾讯云计算(北京)有限责任公司 第9 共86页 coverpic : http://www.test.com/myimage.jpg , wording : { 2032: 请求视频失败,请检查网络 , 2048: 请求m3u8文件失败,可能是网络错误或者跨域问题 } });

6.2 实现用例 这里有一个线上的示例代码,该示例将播放失败,同时使用了自定义提示文案的功能,在PC 浏览器中右键【查看页面源码】 即可查看页面的代码实现: 6.3 错误码对照表 Code 提示语 说明

1 网络错误,请检查网络配置或者 播放链接是否正确 (H5 提示的错误)

2 网络错误,请检查网络配置或者 播放链接是否正确 视频格式 Web 播放器无法解码(H5 提示的错误)

3 视频解码错误 (H5 提示的错误) 4................