2023年7月14日发(作者：)
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）中引⼊初始化脚本;注意：直接⽤本地⽹页是调试不了的，因为腾讯云Web播放器处理不了这种情况下的跨域问题。Step 2：HTML⾥放置容器在需要展⽰播放器的页⾯位置加⼊播放器“容器”，也就是放⼀个div，然后给它取个名字，⽐如: id_test_video 。之后视频的画⾯都会在这个容器⾥渲染，容器的⼤⼩控制您可以使⽤div的属性进⾏控制，⽰例代码如下：
Step 3：对接视频的播放接下来就要写 javascript 代码了，这些代码的作⽤是去指定的 URL 地址拉取⾳视频流，并将视频画⾯呈现到Step2中添加的容器⾥。3.1 ⼀次简单的播放如下是⼀条典型的直播URL地址，它是HLS（m3u8）协议的，如果主播还在直播中的话，那么⽤ VLC 等播放器是可以直接打开该 URL 进⾏观看的：/2157_358535a.m3u8 // m3u8播放地址我们现在要在⼿机浏览器上播放这个 URL 的视频，javascript代码可以这样写：var player = new TcPlayer('id_test_video', {"m3u8": "/2157_358535a.m3u8", //请替换成实际可⽤的播放地址"autoplay" : true, //iOS下safari浏览器，以及⼤部分移动端浏览器是不开放视频⾃动播放这个能⼒的"coverpic" : "/","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": "/2157_358535a.m3u8","flv": "/live/2157_", //增加了⼀个flv的播放地址，⽤于PC平台的播放 请替换成实际可⽤的播放地址"autoplay" : true, //iOS下safari浏览器，以及⼤部分移动端浏览器是不开放视频⾃动播放这个能⼒的"coverpic" : "/","width" : '480',//视频的显⽰宽度，请尽量使⽤视频分辨率宽度"height" : '320'//视频的显⽰⾼度，请尽量使⽤视频分辨率⾼度});跟前⼀段代码的区别就在于，我们增加了⼀个flv的播放地址，腾讯云Web播放器如果发现⽬前的浏览器是PC浏览器，会主动选择flv链路，因为可以实现更低的延迟。当然，前提条件是FLV和HLS（m3u8）这两个地址都是可以出流的，如果您使⽤腾讯云的视频直播服务，这个问题是不需要犯愁的，因为腾讯云的每⼀条直播频道都默认⽀持FLV、RTMP和HLS（m3u8）三种播放协议。3.3 播放不了怎么办？如果您发现视频不能播放，基本上逃不出如下⼏个原因：（原因⼀） 视频源有问题如果是直播URL，那⼀定要检查⼀下是不是主播已经停⽌推流了，状态不处于“直播中”的情况，可以⽤浮窗提⽰⼀下观众：“主播已经离开”。如果是点播URL，那要检查您要播放的⽂件是否还在服务器上，⽐如要播放的地址是否已经被其它⼈从点播系统移除了。（原因⼆） 本地⽹页调试⽬前腾讯云的 Web 播放器是不⽀持本地⽹页去调试的（即通过file://协议来打开视频播放的⽹页），主要是浏览器有跨域安全限制。所以您如果是在Windows上随便放⼀个⽂件然后测试，是肯定播放不了的，需要将其上传到⼀个服务器上进⾏测试。当然前端⼯程师可以通过反向代理的⽅式对线上的页⾯进⾏本地代理以实现本地调试，这是主流可⾏的本地调试办法。（原因三） ⼿机兼容问题FLV 和 RTMP 这两种地址，在普通的⼿机浏览器上都是不⽀持的（最新版本的QQ浏览器⽀持flv协议的播放，但普及度还不⾼），只能⽤HLS（m3u8)。（原因四） 跨域安全问题PC浏览器的视频播放是基于Flash控件实现的，但做过Flash开发的同学都知道，Flash控件会做跨域访问检查，当您要播放的视频所存放的服务器没有部署跨域策略时，才会碰到这个问题。解决⽅法就是：在视频服务器的根域名下的跨域配置⽂件 中增加 域名：⽆法播放使⽤参数有误，请检查播放器调⽤代码请填写视频播放地址直播已结束,请稍后再来
RTMP正常播放过程中触发事件 () (Flash提⽰的错误)⽹络错误，请检查⽹络配置或者播放链接是否⽹络已断开( ) (Flash提⽰的错误)正确拉取播放⽂件失败( NotFound)，可能是服务器错误或者视频⽂件不存在(Flash提⽰的错误)(Flash提⽰的错误)请求m3u8⽂件失败，可能是⽹络错误或者跨域问题 (Flash提⽰的错误)1002获取视频失败，请检查播放链接是否有效2032获取视频失败，请检查播放链接是否有效2048⽆法加载视频⽂件，跨域访问被拒绝备注：Code 1 ~ 4 对应的是 H5 的原⽣事件。由于Flash的⿊盒特性以及H5视频播放标准的不确定性，错误提⽰语会不定期更新。源码参考这⾥有⼀个线上的⽰例代码，在PC浏览器中右键“查看页⾯源码”即可查看页⾯的代码实现：您也⽤它来测试播放器的效果，在链接后⾯加上需要播放的视频地址，刷新后就会播放这个视频地址：/open/qcloud/video/vcplayer/demo/?autoplay=true&m3u8=/2527_.m3u8参数列表下⾯列出了播放器⽀持的所有参数，并进⾏了详细的说明。参数m3u8m3u8_hdm3u8_sdflvflv_hdflv_sdmp4mp4_hdmp4_sdrtmprtmp_hdrtmp_sdwidthheightvolumeliveautoplay类型StringStringStringStringStringStringStringStringStringStringStringString默认值⽆⽆⽆⽆⽆⽆⽆⽆⽆⽆⽆⽆原画m3u8 播放URL
⽰例:
⾼清m3u8 播放URL
⽰例:
标清m3u8 播放URL
⽰例:
原画flv 播放URL
⽰例:
⾼清flv 播放URL
⽰例:
标清flv 播放URL
⽰例:
原画mp4 播放URL
⽰例:
⾼清mp4 播放URL
⽰例:
标清mp4 播放URL
⽰例:
原画rtmp 播放URL
⽰例: rtmp:///live/2157_280d88⾼清rtmp 播放URL
⽰例: rtmp:///live/2157_280d88hd标清rtmp 播放URL
⽰例: rtmp:///live/2157_280d88sd必选，设置播放器宽度，单位为像素
⽰例: 640必选，设置播放器⾼度，单位为像素
⽰例: 480设置初始⾳量，范围：0~1 [v2.2.0+]
⽰例: 0.6必选，设置视频是否为直播类型，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑
⽰例: true是否⾃动播放备注：该选项只对⼤部分PC平台⽣效
⽰例: true预览封⾯，可以传⼊⼀个图⽚地址或者⼀个包含图⽚地址 src 和显⽰样式 style 的对象。style可选属性：default 居中1:1显⽰
stretch 拉伸铺满播放器区域，图⽚可能会变形
cover 优先横向等⽐拉伸铺满播放器区域，图⽚某些部分可能⽆法显⽰在区域内
⽰例: ""
或者{"style": "cover", "src": "参数说明Number⽆Number⽆Number0.5BooleanfalseBooleanfalsecoverpicString /⽆ObjectcontrolsStringdefault 显⽰默认控件，none 不显⽰控件，system 移动端显⽰系统控件 备注：如果需要在移动端使⽤系统全屏，就需"default"要设置为system。默认全屏⽅案是使⽤ Fullscreen API + 伪全屏的⽅式
⽰例: "system"是否优先使⽤ flash 播放视频，备注：该选项只对PC平台⽣效 [v2.2.0+]
⽰例: true是否启⽤ 的播放 flv。启⽤时播放器将在⽀持 MSE 的浏览器下，采⽤ 播放 flv，然⽽并不是所有⽀持 MSE的浏览器都可以使⽤ ,所以播放器不会默认开启这个属性。[v2.2.0+]
⽰例: trueflashBooleantrueh5_flvBooleanfalse参数x5_playerx5_type(例如 Android 的微信、QQ浏览器）将 flv 播放地址直接赋类型默认值是否启⽤ TBS 的播放 flv。启⽤时播放器将在 TBS 模式下参数说明Booleanfalse给
⽰例: true通过 video 属性 “x5-video-player-type” 声明启⽤同层H5播放器，⽀持的值：h5 (该属性为TBS内核实验性属性，⾮String⽆TBS 内核不⽀持)。
⽰例: "h5"⽆通过 video 属性 “x5-video-player-fullscreen” 声明视频播放时是否进⼊到 TBS 的全屏模式，⽀持的值：true (该属性为TBS 内核实验性属性，⾮ TBS 内核不⽀持) 。
⽰例: "true"通过 video 属性 “x5-video-orientation” 声明 TBS 播放器⽀持的⽅向，可选值：0（landscape 横屏）, 1：（portraint竖屏）, 2：（landscape | portrait跟随⼿机⾃动旋转）。 (该属性为 TBS 内核实验性属性，⾮ TBS 内核不⽀持)[v2.2.0+]
⽰例: 0⾃定义⽂案
⽰例: { 2032: '请求视频失败，请检查⽹络'}事件监听回调函数，回调函数将传⼊⼀个JSON格式的对象
⽰例: function(msg){//进⾏事件处理
}x5_fullscreenStringx5_orientationNumber⽆wordingObject⽆listenerFunction⽆实例⽅法列表下⾯列出了播放器实例⽀持的⽅法。⽅法play()pause()togglePlay()mute(muted)volume(val)playing()duration()⽆⽆⽆{Boolean} [可选]参数⽆⽆⽆true,false{Boolean}返回值开始播放视频暂停播放视频切换视频播放状态切换静⾳状态，不传参则返回当前是否静⾳设置⾳量，不传参则返回当前⾳量返回是否在播放中获取视频时长
备注：只适⽤于点播设置视频播放时间点，不传参则返回当前播放时间点
备注：只适⽤于点播说明⽰例()()Play()(true)(0.3)g()on()tTime(){int} 范围：0~1范围：0~1[可选]⽆⽆true,false{Boolean}{int}{int}currentTime(time){int} [可选]true,falsefullscreen(enter){Boolean} [可选]{Boolean}buffered()⽆0~1调⽤全屏接⼝(Fullscreen API)，不⽀持全屏接⼝时使⽤伪全屏模式，不传参则返回值当前是否是全屏
reen(true)备注：移动端系统全屏没有提供api，也⽆法获取系统全屏状态获取视频缓冲数据百分⽐
备注：只适⽤于点播ed()进阶攻略这⾥介绍⼀些视频播放器SDK的进阶使⽤⽅法开启优先H5播放模式TcPlayer 是采⽤ H5
4.⽀持x5-video-orientation属性，2017.6.302.2.05.增加播放环境判断逻辑，可通过参数调整H5与Flash的优先级，以及是否启⽤TBS播放。6.启⽤版本号发布⽅式，避免影响旧版本的使⽤者。7.优化事件触发的时间戳，统⼀为标准时间。修复常见问题TcPlayer⽀持哪些浏览器？TcPlayer 经过测试并⽀持的浏览器有，桌⾯端：IE10+、Edge、Chrome、Firefox、QQ浏览器，MAC Safari，移动端：Android4.4+，iOS8.0+，微信、⼿机QQ、QQ浏览器、Chrome、Safari。如需⽀持IE8、IE9浏览器需要在引⼊播放器脚本前，引⼊Polyfill脚本。如下所⽰：;为什么在移动端 TcPlayer 全屏后⽆法使视频全屏，仍然会显⽰浏览器的界⾯？⾸先要了解⼀些背景知识，TcPlayer 提供的全屏⽅案是 Fullscreen API + 伪全屏的⽅式，如果浏览器⽀持 Fullscreen API 那么进⼊全屏时，视频容器将会铺满屏幕，控制栏是 TcPlayer 提供的控制栏，如图所⽰（Android Chrome）如果浏览器不⽀持Fullscreen API 则会进⼊伪全屏模式，如图所⽰：（左：Android 微信，右：iOS 微信）这两种全屏模式显⽰的控制栏都是 TcPlayer 提供的控制栏，进⼊⽅式都是通过点击控制栏的全屏按钮，或者 TcPlayer 提供的全屏⽅法实现的。然⽽在移动端不⼀定可以显⽰ TcPlayer 提供的控制栏，⼤部分情况下移动端webview会劫持视频播放，并使⽤ webview 提供的控制栏，这样就⽆法显⽰ TcPlayer 的控制栏，也⽆法使⽤ TcPlayer 提供的全屏⽅案。如图所⽰：（左：Android 微信，TBS劫持视频播放，右：iOS QQ浏览器劫持视频播放）进⼊全屏后：（左：Android 微信，右：iOS QQ浏览器）可以看到控制栏与 TcPlayer 是不同的，⽽这种全屏⽅式是没有接⼝提供给 JS 调⽤的，所以 TcPlayer ⽆法实现这样的全屏⽅式。（我们通常会把视频区域铺满屏幕的全屏模式称为系统全屏，⽽视频区域铺满浏览器的页⾯可视区域称为伪全屏）综上所诉如果全屏后看到浏览器的界⾯则是进⼊了伪全屏，如果想在移动端全屏时必须进⼊系统全屏，只能使⽤系统提供的控制栏，选择控制栏类型可以通过 TcPlayer 的 controls 属性进⾏设置。为什么H5播放视频拉伸变形了？H5并不具备拉伸视频的能⼒，请检查播放器的容器宽⾼是否设置正确。为什么我⾃⼰的 div ⽆法在盖在视频上？不同浏览器对于
发布者：admin，转转请注明出处：http://www.yc00.com/web/1689299201a228063.html
评论列表（0条）