编辑: JZS133 2019-09-26
腾讯云移动直播 Web端集成 产品文档 Web端集成产品文档 【版权声明】 ?2015-2016 腾讯云版权所有 本文档著作权归腾讯云单独所有,未经腾讯云事先书面许可,任何主体不得以任何形式复制、修改、抄袭、传 播全部或部分本文档内容.

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

注意:直接用本地网页是调试不了的,因为腾讯云Web播放器处理不了这种情况下的跨域问题. Step 2:HTML里放置容器 在需要展示播放器的页面位置加入播放器 容器 ,也就是放一个div,然后给它取个名字,比如: id_test_video .之后视频的画面都会在这个容器里渲染,容器的大小控制您可以使用div的属性进行控制,示例代码如下: 第5页共30页 版权所有:腾讯云计算(北京)有限责任公司 Web端集成产品文档 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浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的 第6页共30页 版权所有:腾讯云计算(北京)有限责任公司 Web端集成产品文档 coverpic : http://www.test.com/myimage.jpg , width : '

480'

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

320'

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

这段代码就可以支持在PC以及手机浏览器上播放HLS(m3u8)协议的直播视频了,不过,前面我们有说过, HLS(m3u8)协议的视频虽然兼容性还不错(部分Android手机依然不支持),但其延迟非常高,大约20秒 以上的延迟. 3.2 PC上实现更低的延迟 那么对于PC浏览器而言,我们是否可以做的更好呢?当然可以,因为PC浏览器支持flash,它可强大多了,现 在我们的代码要这样写: 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浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的 coverpic : http://www.test.com/myimage.jpg , width : '

480'

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

320'

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

跟前一段代码的区别就在于,我们增加了一个flv的播放地址,腾讯云Web播放器如果发现目前的浏览器是PC 浏览器,会主动选择flv链路,因为可以实现更低的延迟. 当然,前提条件是FLV和HLS(m3u8)这两个地址都是可以出流的,如果您使用腾讯云的视频直播服务,这个 问题是不需要犯愁的,因为腾讯云的每一条直播频道都默认支持FLV、RTMP和HLS(m3u8)三种播放协议. 3.3 播放不了怎么办? 第7页共30页 版权所有:腾讯云计算(北京)有限责任公司 Web端集成产品文档 如果您发现视频不能播放,基本上逃不出如下几个原因: (原因一) 视频源有问题 如果是直播URL,那一定要检查一下是不是主播已经停止推流了,状态不处于 直播中 的情况,可以 用浮窗提示一下观众: 主播已经离开 . 如果是点播URL,那要检查您要播放的文件是否还在服务器上,比如要播放的地址是否已经被其它人从 点播系统移除了. (原因二) 本地网页调试 目前腾讯云的 Web 播放器是不支持本地网页去调试的(即通过file://协议来打开视频播放的网页), 主要是浏览器有跨域安全限制.所以您如果是在Windows上随便放一个test.html文件然后测试,是肯 定播放不了的,需要将其上传到一个服务器上进行测试.当然前端工程师可以通过反向代理的方式对线 上的页面进行本地代理以实现本地调试,这是主流可行的本地调试办法. (原因三) 手机兼容问题 FLV 和RTMP 这两种地址,在普通的手机浏览器上都是不支持的(最新版本的QQ浏览器支持flv协议 的播放,但普及度还不高),只能用HLS(m3u8). (原因四) 跨域安全问题 PC浏览器的视频播放 是基于Flash控件实现的,但做过Flash开发 的同学都知道,Flash控件会做跨域访问检查 ,不过只有当您要播放的视频URL不是隶属于腾讯云时,才会碰到这个问题.解决方法就是:在视频服 务器的根域名下的跨域配置文件 crossdomain.xml 中增加 qq.com 域名: Step 4:给播放器设置封面 在前面的代码例子中,您应该注意到 coverpic 这个参数了,在这里将详细介绍这个属性的使用方法. 第8页共30页 版权所有:腾讯云计算(北京)有限责任公司 Web端集成产品文档 备注:封面功能有可能在部分移动端播放环境下失效,由于移动端视频播放环境相对 PC 来说比较复杂,各个浏览器和 APP 的Webview 对H5 video 实现的方式并不统一.如果遇到功能失效的情况 ,欢迎向我们的技术支持反馈(反馈内容包括系统、浏览器或APP的版本等关键信息),我们将尽可能去支持 . 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:多清晰度的支持 第9页共30页 版权所有:腾讯云计算(北京)有限责任公司 Web端集成产品文档 5.1 原理介绍 我们知道优酷、土豆、腾讯上的视频有些是有多清晰度选择的,这个效果如何实现呢? 这里要特别科普一下: 播放器本身是没有能力去改变视频的清晰度的,在视频源产生的地方其实只有一种清晰度,我们称之为原画. 那么多清晰度是怎么实现的呢? 这里就是视频云发挥作用的地方了: 对于直播,来自主播那一端的原始视频会在腾讯云进行实时的转码,分出两路转码后的视频,比如我们 常说的高清-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 // 标清 对于点播,一个视频文件上传到腾讯云以后,您可以操作对该视频文件进行转码,产生另外几种清晰度 的视频,比如我们常说的高清-HD,以及标清-SD. 第10页共30页 版权所有:腾讯云计算(北京)有限责任公司 Web端集成产品文档 http://200002949.vod.myqcloud.com/200002949_b6ffc.f0.m3u8 // 原画 h........

下载(注:源文件不在本站服务器,都将跳转到源网站下载)
备用下载
发帖评论
相关话题
发布一个新话题