Web播放器TcPlayer——腾讯直播sdk的⽹页播放器
功能介绍
腾讯云Web播放器主要解决在⼿机浏览器和PC浏览器上播放⾳视频流的问题，使您的视频内容可以不依赖⽤户安装App就可以在朋友圈、微博等社交平台进⾏传播。
本⽂档适合有⼀定Javascript语⾔基础的开发⼈员阅读。
基础知识
对接之前先要了解如下的基础知识，⾮常有必要：
直播和点播
直播是指视频源是实时的，⼀旦主播停播了，这个地址就已经失去意义了，⽽且由于是实时直播，所以播放器在播直播视频的时候是没有进度条滴。
点播是指视频源是⼀个服务器上的⽂件，⽂件只要没有被提供⽅删除，就随时可以播放，⽽且由于整个视频都在服务器上，所以播放器在播点播视频的时候是有进度条的哦。
协议的⽀持
Web播放器的视频播放能⼒本⾝不是⽹页代码实现的，⽽是靠浏览器的⽀持，所以其兼容性并不像我们想象的那么好，您必须要接受⼀个事实：不是所有的⼿机浏览器都能有符合预期的表现，有些⼿机浏览器甚⾄根本就不⽀持视频播放。
最常见的⽤于⽹页直播的视频源地址是以m3u8结尾的地址，我们称其为HLS (HTTP Live Streaming)，这是苹果推出的标准。由于苹果的影响⼒，⽬前各⼿机浏览器产品对这种格式的兼容性最好，但它有个天然的问题，就是延迟⽐较⼤，⼀般是20-30秒左右的延迟，没有办法，在⼿机浏览器上我们并没有其它选择。
在PC上情况会好很多，因为PC上的浏览器⽬前还没有抛弃flash控件，⽽flash控件不追求洁癖，⽀持的视频源格式挺多的，⽽且各浏览器上的flash控件都是Adobe它家⾃⼰开发，所以兼容性⾮常好。（悄悄滴告诉你，Chrome最近对flash的态度不太友好）
对接攻略
Step 1：页⾯准备⼯作
在需要播放视频的页⾯（包括PC或H5）中引⼊初始化脚本
<script src="//imgcache.qq/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>;
注意：直接⽤本地⽹页是调试不了的，因为腾讯云Web播放器处理不了这种情况下的跨域问题。
Step 2：HTML⾥放置容器
在需要展⽰播放器的页⾯位置加⼊播放器“容器”，也就是放⼀个div，然后给它取个名字，⽐如: id_test_video 。之后视频的画⾯都会在这个容器⾥渲染，容器的⼤⼩控制您可以使⽤div的属性进⾏控制，⽰例代码如下：
<div id="id_test_video" ></div>
Step 3：对接视频的播放
接下来就要写 javascript 代码了，这些代码的作⽤是去指定的 URL 地址拉取⾳视频流，并将视频画⾯呈现到Step2中添加的容器⾥。
3.1 ⼀次简单的播放
如下是⼀条典型的直播URL地址，它是HLS（m3u8）协议的，如果主播还在直播中的话，那么⽤ VLC 等播放器是可以直接打开该 URL 进⾏观看的：
qcloud/2157_358535a.m3u8      // m3u8播放地址
我们现在要在⼿机浏览器上播放这个 URL 的视频，javascript代码可以这样写：
var player = new TcPlayer('id_test_video', {
"m3u8": "qcloud/2157_358535a.m3u8", //请替换成实际可⽤的播放地址
"autoplay" : true,      //iOS下safari浏览器，以及⼤部分移动端浏览器是不开放视频⾃动播放这个能⼒的
"coverpic" : "st/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": "qcloud/2157_358535a.m3u8",
"flv": "qcloud/live/2157_358535a.flv", //增加了⼀个flv的播放地址，⽤于PC平台的播放请替换成实际可⽤的播放地址
"autoplay" : true,      //iOS下safari浏览器，以及⼤部分移动端浏览器是不开放视频⾃动播放这个能⼒的
"coverpic" : "st/myimage.jpg",
"width" :  '480',//视频的显⽰宽度，请尽量使⽤视频分辨率宽度
"height" : '320'//视频的显⽰⾼度，请尽量使⽤视频分辨率⾼度
});
跟前⼀段代码的区别就在于，我们增加了⼀个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控件会做跨域访问检查，当您要播放的视频所存放的服务器没有部署跨域策略时，才会碰到这个问题。解决⽅法就是：在视频服务器的根域名下的跨域配置⽂件 l 中增加 qq 域名：<cross-domain-
policy>
<allow-access-from domain="*.qq" secure="false"/>
</cross-domain-policy>
Step 4：给播放器设置封⾯
在前⾯的代码例⼦中，您应该注意到 “coverpic” 这个参数了，在这⾥将详细介绍这个属性的使⽤⽅法。
备注：封⾯功能有可能在部分移动端播放环境下失效，由于移动端视频播放环境相对 PC 来说⽐较复杂，各个浏览器和 APP 的 Webview 对 H5 video
实现的⽅式并不统⼀。如果遇到功能失效的情况，欢迎向我们的技术⽀持反馈（反馈内容包括系统、浏览器或APP的版本等关键信息），我们将尽可能去⽀持。
4.1 简单设置封⾯
coverpic可以传⼊⼀个图⽚地址作为播放器的封⾯，将在播放器区域内居中并且以图⽚的实际分辨率进⾏显⽰
"coverpic" : "st/myimage.jpg"
4.2 设置封⾯的展现样式
coverpic 同时⽀持传⼊⼀个对象，对象中可以进⾏设置封⾯的展现样式 style 和图⽚地址 src。
style⽀持的样式有3种：
"default" 居中并且以图⽚的实际分辨率进⾏显⽰。
"stretch" 拉伸铺满播放器区域，图⽚可能会变形。
"cover" 优先横向等⽐拉伸铺满播放器区域，图⽚某些部分可能⽆法显⽰在区域内。
"coverpic" : {"style":"stretch", "src":"st/myimage.jpg"}
4.3 实现⽤例
备注：在某些移动端设置封⾯会⽆效，具体说明请查看常见问题
Step 5：多清晰度的⽀持
5.1 原理介绍
我们知道优酷、⼟⾖、腾讯上的视频有些是有多清晰度选择的，这个效果如何实现呢？
这⾥要特别科普⼀下：播放器本⾝是没有能⼒去改变视频的清晰度的，在视频源产⽣的地⽅其实只有⼀种清晰度，我们称之为原画，⽽原画视频编码格式和封装格式有很多种，在 Web 端⽆法完全⽀持播放所有的视频格式，点播⽀持必须是以 H.264 为视频编码，以 mp4、flv 为封装格式的视频。
那么多清晰度是怎么实现的呢？这⾥就是视频云发挥作⽤的地⽅了：
对于直播，来⾃主播那⼀端的原始视频会在腾讯云进⾏实时的转码，分出多路转码后的视频，⽐如我们常说的⾼清-HD，以及标清-SD，每⼀路视频都有其对应的地址：
qcloud/2157_358535a.m3u8          // 原画
qcloud/2157_358535a_900.m3u8      // ⾼清
qcloud/2157_358535a_550.m3u8      // 标清
对于点播，⼀个视频⽂件上传到腾讯云以后，您可以操作对该视频⽂件进⾏转码，产⽣另外⼏种清晰
度的视频，⽐如我们常说的⾼清-HD，以及标清-SD，需要注意的是，上传后的原始视频是未经过腾讯云转码的，不能直接⽤于播放。
flash控件怎么下载qcloud/200002949_b6ffc.f240.m3u8        // 原画，⽤转码后的超清替换
qcloud/200002949_b6ffc.f230.av.m3u8      // ⾼清
qcloud/200002949_b6ffc.f220.av.m3u8      // 标清
备注：上传后的原始视频是未经过腾讯云转码的，不能直接⽤于播放
5.2 代码实现
如下的代码是让播放器⽀持多种清晰度的⽀持，也就是在播放器的⽤户界⾯上展⽰多种清晰度线路的选择。
var player = new TcPlayer('id_test_video', {
"m3u8"      : "qcloud/200002949_b6ffc.f240.m3u8",//请替换成实际可⽤的播放地址
"m3u8_hd"  : "qcloud/200002949_b6ffc.f230.av.m3u8",
"m3u8_sd"  : "qcloud/200002949_b6ffc.f220.av.m3u8",
"autoplay"  : true,      //iOS下safari浏览器，以及⼤部分移动端浏览器是不开放视频⾃动播放这个能⼒的
"coverpic"  : "st/myimage.jpg",
});
5.3 实现⽤例
正常情况将看到这样的效果：
pc端现已⽀持多种清晰度播放并⽀持切换的功能，移动端尚未⽀持。
Step 6：定制错误提⽰语
我们默认的提⽰语您可能觉得不符合您的需求，⽐如“⽹络错误，请检查⽹络配置或者播放链接是否正确”或者“视频解码错误”等等，我们担⼼这些提⽰语在您看来可能太⼲瘪了，所以腾讯云Web播放器将
⽀持提⽰语定制：
6.1 代码实现
如下是让播放器⽀持⾃定义提⽰语的核⼼代码，设置的提⽰语主要落在wording属性上。
var player = new TcPlayer('id_test_video', {
"m3u8"  : "qcloud/200002949_b6ffc.f0.m3u8",//请替换成实际可⽤的播放地址
"autoplay" : true,      //iOS下safari浏览器是不开放这个能⼒的
"coverpic" : "st/myimage.jpg",
"wording": {
2032: "请求视频失败，请检查⽹络",
2048: "请求m3u8⽂件失败，可能是⽹络错误或者跨域问题"
}
});
6.2 实现⽤例
6.3 错误码对照表
Code提⽰语说明
(H5提⽰的错误)
1⽹络错误，请检查⽹络配置或者播放链接是否
正确
2⽹络错误，请检查⽹络配置或者播放链接是否
视频格式WEB播放器⽆法解码(H5提⽰的错误)
正确
3视频解码错误(H5提⽰的错误)
4当前系统环境不⽀持播放该视频格式(H5提⽰的错误)
5当前系统环境不⽀持播放该视频格式播放器判断当前浏览器环境不⽀持播放传⼊的视频，可能是当前浏览器不⽀持MSE或者Flash插
件未启⽤
10请勿在file协议下使⽤播放器，可能会导致视频
⽆法播放
11使⽤参数有误，请检查播放器调⽤代码
12请填写视频播放地址
13直播已结束，请稍后再来RTMP正常播放过程中触发事件 (NetConnection.Connect.Closed) (Flash提⽰的错误)
1001⽹络错误，请检查⽹络配置或者播放链接是否
⽹络已断开( NetConnection.Connect.Closed) (Flash提⽰的错误)
正确
1002获取视频失败，请检查播放链接是否有效拉取播放⽂件失败( NetStream.Play.StreamNotFound)，可能是服务器错误或者视频⽂件不存在
(Flash提⽰的错误)
2032获取视频失败，请检查播放链接是否有效(Flash提⽰的错误)
2048⽆法加载视频⽂件，跨域访问被拒绝请求m3u8⽂件失败，可能是⽹络错误或者跨域问题 (Flash提⽰的错误)
备注：
Code 1 ~ 4 对应的是 H5 的原⽣事件。
由于Flash的⿊盒特性以及H5视频播放标准的不确定性，错误提⽰语会不定期更新。
源码参考
这⾥有⼀个线上的⽰例代码，在PC浏览器中右键“查看页⾯源码”即可查看页⾯的代码实现：
您也⽤它来测试播放器的效果，在链接后⾯加上需要播放的视频地址，刷新后就会播放这个视频地址：
imgcache.qq/open/qcloud/video/vcplayer/demo/tcplayer.html?autoplay=true&m3u8=qcloud/2527_b3907044441c11e6a46d294f954f93eb.f230.av.m3u8参数列表
下⾯列出了播放器⽀持的所有参数，并进⾏了详细的说明。
参数类型默认值参数说明
m3u8String⽆原画m3u8 播放URL
⽰例:
m3u8_hd String⽆⾼清m3u8 播放URL
⽰例:
m3u8_sd String⽆标清m3u8 播放URL
⽰例:
flv String⽆原画flv 播放URL
⽰例:
flv_hd String⽆⾼清flv 播放URL
⽰例:
flv_sd String⽆标清flv 播放URL
⽰例:
mp4String⽆原画mp4 播放URL
⽰例:
mp4_hd String⽆⾼清mp4 播放URL
⽰例:
mp4_sd String⽆标清mp4 播放URL
⽰例:
rtmp String⽆原画rtmp 播放URL
⽰例: rtmp://qcloud/live/2157_280d88
rtmp_hd String⽆⾼清rtmp 播放URL
⽰例: rtmp://qcloud/live/2157_280d88hd
rtmp_sd String⽆标清rtmp 播放URL
⽰例: rtmp://qcloud/live/2157_280d88sd
width Number⽆必选，设置播放器宽度，单位为像素
⽰例: 640
height Number⽆必选，设置播放器⾼度，单位为像素
⽰例: 480
volume Number0.5设置初始⾳量，范围：0~1 [v2.2.0+]
⽰例: 0.6
live Boolean false必选，设置视频是否为直播类型，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑
⽰例: true
autoplay Boolean false 是否⾃动播放
备注：该选项只对⼤部分PC平台⽣效⽰例: true
coverpic String /
Object⽆
预览封⾯，可以传⼊⼀个图⽚地址或者⼀个包含图⽚地址 src 和显⽰样式 style 的对象。
style可选属性：
default 居中1:1显⽰
stretch 拉伸铺满播放器区域，图⽚可能会变形
cover 优先横向等⽐拉伸铺满播放器区域，图⽚某些部分可能⽆法显⽰在区域内
⽰例: ""
或者
{"style": "cover", "src": "
controls String"default"default 显⽰默认控件，none 不显⽰控件，system 移动端显⽰系统控件备注：如果需要在移动端使⽤系统全屏，就需要设置为system。默认全屏⽅案是使⽤ Fullscreen API + 伪全屏的⽅式
⽰例: "system"
flash Boolean true 是否优先使⽤ flash 播放视频，
备注：该选项只对PC平台⽣效 [v2.2.0+] ⽰例: true
h5_flv Boolean false 是否启⽤ flv.js 的播放 flv。启⽤时播放器将在⽀持 MSE 的浏览器下，采⽤ flv.js 播放 flv，然⽽并不是所有⽀持 MSE 的浏览器都可以使⽤ flv.js ，所以播放器不会默认开启这个属性。[v2.2.0+]
⽰例: true
x5_player Boolean false是否启⽤ TBS 的播放 flv。启⽤时播放器将在 TBS 模式下(例如 Android 的、QQ浏览器）将 flv 播放地址直接赋给<video>播放。 [v2.2.0+]
⽰例: true
x5_type String⽆通过 video 属性 “x5-video-player-type” 声明启⽤同层H5播放器，⽀持的值：h5 (该属性为TBS内核实验性属性，⾮TBS 内核不⽀持)。
⽰例: "h5"
x5_fullscreen String⽆通过 video 属性 “x5-video-player-fullscreen” 声明视频播放时是否进⼊到 TBS 的全屏模式，⽀持的值：true (该属性为TBS 内核实验性属性，⾮ TBS 内核不⽀持) 。
⽰例: "true"
x5_orientation Number⽆通过 video 属性 “x5-video-orientation” 声明 TBS 播放器⽀持的⽅向，可选值：0（landscape 横屏）, 1：（portraint竖屏）, 2：（landscape | portrait跟随⼿机⾃动旋转）。 (该属性为 TBS 内核实验性属性，⾮ TBS 内核不⽀持)
[v2.2.0+]
⽰例: 0
wording Object⽆⾃定义⽂案
⽰例: { 2032: '请求视频失败，请检查⽹络'}
listener Function⽆事件监听回调函数，回调函数将传⼊⼀个JSON格式的对象⽰例: function(msg){
//进⾏事件处理
}
参数类型默认值参数说明
实例⽅法列表
下⾯列出了播放器实例⽀持的⽅法。
⽅法参数返回值说明⽰例play()⽆⽆开始播放视频player.play() pause()⽆⽆暂停播放视频player.pause() togglePlay()⽆⽆切换视频播放状态lePlay()
mute(muted){Boolean} [可选]true,false
{Boolean}切换静⾳状态，不传参则返回当前是否静⾳player.mute(true)
volume(val){int} 范围：0~1
[可选]范围：0~1设置⾳量，不传参则返回当前⾳量player.volume(0.3)
playing()⽆true,false
{Boolean}返回是否在播放中player.playing()
duration()⽆{int}获取视频时长
备注：只适⽤于点播
player.duration()
currentTime(time){int} [可选]{int}设置视频播放时间点，不传参则返回当前播放时间点
备注：只适⽤于点播
player.currentTime()
fullscreen(enter){Boolean} [可选]true,false
{Boolean}
调⽤全屏接⼝(Fullscreen API)，不⽀持全屏接⼝时使⽤伪全屏模式，不传参
则返回值当前是否是全屏
备注：移动端系统全屏没有提供api，也⽆法获取系统全屏状态
player.fullscreen(true)
buffered()⽆0~1获取视频缓冲数据百分⽐
备注：只适⽤于点播
player.buffered()
进阶攻略
这⾥介绍⼀些视频播放器SDK的进阶使⽤⽅法
开启优先H5播放模式
TcPlayer 是采⽤ H5 <video>和 Flash 相结合的⽅式来进⾏视频播放的，在不同的播放环境中，播放器会选择默认最合适的播放⽅案。
虽然⽬前浏览器⼚商已经开始逐步放弃对 Flash 插件的⽀持，但是在国内仍有⼤量的浏览器不⽀持 MSE，在播放 FLV HLS（m3u8）时⽆法切换到
H5 <video>的播放模式，⽽播放 RTMP 必须使⽤ Flash 模式才可以播放，
因此 TcPlayer 仍是默认优先启⽤ Flash 播放模式，如果在检测到 Flash 插件不可⽤的情况下，将采⽤ H5 <video>进⾏播放。
默认 Flash 模式的原因是 Flash ⽀持的视频格式最⼴，⽽H5 <video>默认只⽀持 MP4（h.264）（其他⾮腾讯云提供的视频格式这⾥就不列出了），在特定条件下才能⽀持HLS（m3u8）、FLV。
从2.2.0版本开始，提供了可以设置播放模式优先级的属性，如果想优先采⽤H5 <video>播放模式，需要把 flash 属性设置为 false ，这样在播放时默认将启⽤H5 <video>播放，如果H5 <video>不可⽤将采⽤ Flash 播放，如果没有检测到 Flash 插件将会提⽰“当前系统环境不⽀持播放该视频格式”
监听事件
TcPlayer 是采⽤ H5 <video>和 Flash 相结合的⽅式来进⾏视频播放，由于两种⽅式播放视频时触发的事件不尽相同，所以我们以 H5 <video>的规范为准，对 Flash 的播放事件做了⼀定程度的转换，以实现播放事件命名的统⼀。TcPlayer 对这两种播放⽅式所触发的原⽣事件进⾏了捕获和透传。
统⼀后的事件列表
error

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。