腾讯旗下H5超级播放器 - Tcplayer

腾讯Tcplayer简介

腾讯云Web超级播放器Tcplayer是为了解决在手机浏览器和 PC 浏览器上播放音视频流的问题，它使您的视频内容可以不依赖用户安装 App，就能在朋友圈和微博等社交平台进行传播。支持大部分终端浏览器与视频协议的点播和直播，如：MP4 FLV HLS 等等。对接Tcplayer前需要了解如下基础知识：

直播和点播

直播视频源是实时的，一旦主播停播，直播地址就失去意义，而且由于是实时直播，所以播放器在播直播视频的时候是没有进度条的。 点播视频源是某个服务器上的文件，只要文件没有被提供方删除，就可以随时播放， 而且由于整个视频都在服务器上，所以播放器在播点播视频的时候是有进度条的。

协议支持

TCPlayerLite 的视频播放能力本身不是网页代码实现的，而是靠浏览器支持，所以其兼容性不像我们想象的那么好，因此，不是所有的手机浏览器都能有符合预期的表现。一般用于网页直播的视频源地址是以 M3U8 结尾的地址，我们称其为 HLS (HTTP Live Streaming)，这是苹果推出的标准，目前各种手机浏览器产品对这种格式的兼容性也最好，但它有个问题：延迟比较大，一般是20s - 30s左右的延迟。

Tcplayer Demo

Demo HTML

<!--腾讯Tcplayer官方播放器文件CDN-->
<script type="text/JavaScript" src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>
<div id="player"></div>

Demo JS

var player = new TcPlayer('player', {
    "M3U8": 'https://xxx.com/2023/index.m3u8',//视频地址-标清
    "m3u8_hd": 'https://xxx.com/2023/index.m3u8',//视频地址-高清
    "m3u8_sd": 'https://xxx.com/2023/index.m3u8',//视频地址-原画
    "autoplay" : false,//iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    "volume": 1, //默认音量
    "preload": 'auto',//预加载
    "poster" : {"style":"cover", "src":""},//视频封面
    "width" :  '100%',//视频的显示宽度，请尽量使用视频分辨率宽度
    "height" : '100%',//视频的显示高度，请尽量使用视频分辨率高度
    "systemFullscreen" : true,//全屏
});

Tcplayer 参数

webrtc//原画 WebRTC 播放 URL。
webrtc_hd//高清 WebRTC 播放 URL。
webrtc_sd//标清 WebRTC 播放 URL。
m3u8//原画 M3U8 播放 URL。
m3u8_hd//高清 M3U8 播放 URL。
m3u8_sd//标清 M3U8 播放 URL。
flv//高清 FLV 播放 URL。
flv_hd//高清 FLV 播放 URL。
flv_sd//标清 FLV 播放 URL。
mp4//原画 MP4 播放 URL。
mp4_hd//高清 MP4 播放 URL。
mp4_sd//标清 MP4 播放 URL。
width//必选，设置播放器宽度，单位为像素。示例：640
height//必选，设置播放器高度，单位为像素。示例：480
volume//设置初始音量，范围：0到1 [v2.2.0+]。示例：0.6
live//必选，设置视频是否为直播类型，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑。示例：true
autoplay//是否自动播放。（备注：该选项只对大部分 PC 平台生效）示例：true
poster//预览封面，可以传入一个图片地址或者一个包含图片地址 src 和显示样式 style 的对象。style 可选属性：default 居中1：1显示。 stretch 拉伸铺满播放器区域，图片可能会变形。cover 优先横向等比拉伸铺满播放器区域，图片某些部分可能无法显示在区域内。示例： "http://www.test.com/myimage.jpg" 或者{"style": "cover", "src": }  [v2.3.0+]
controls//default 显示默认控件，none 不显示控件，system 移动端显示系统控件。 （备注：如果需要在移动端使用系统全屏，就需要设置为 system。默认全屏方案是使用 Fullscreen API + 伪全屏的方式，示例："system"
systemFullscreen//开启后，在不支持 Fullscreen API 的浏览器环境下，尝试使用浏览器提供的 webkitEnterFullScreen 方法进行全屏，如果支持，将进入系统全屏，控件为系统控件。   示例：true
h5_flv//是否启用 flv.js 的播放 flv。启用时播放器将在支持 MSE 的浏览器下，采用 flv.js 播放 flv，然而并不是所有支持 MSE 的浏览器都可以使用 flv.js，所以播放器不会默认开启这个属性，[v2.2.0+]。    示例：true
x5_player//是否启用 TBS 的播放 flv 或 hls 。启用时播放器将在 TBS 模式下(例如 Android 的微信、QQ 浏览器），将 flv 或 hls 播放地址直接赋给 <video> 播放。[v2.2.0+]。    示例： true
x5_type//通过 video 属性 “x5-video-player-type” 声明启用同层 H5 播放器，支持的值：h5-page (该属性为 TBS 内核实验性属性，非 TBS 内核不支持)，示例："h5-page"
x5_fullscreen//通过 video 属性 “x5-video-player-fullscreen” 声明视频播放时是否进入到 TBS 的全屏模式，支持的值：true (该属性为 TBS 内核实验性属性，非 TBS 内核不支持) 。    示例："true"
x5_orientation//通过 video 属性 “x5-video-orientation” 声明 TBS 播放器支持的方向，可选值：0：landscape 横屏1：portraint 竖屏2：landscape &verbar; portrait 跟随手机自动旋转。 (备注：该属性为 TBS 内核实验性属性，非 TBS 内核不支持) [v2.2.0+]。   示例：0
wording//自定义文案。    示例：{ 2032: '请求视频失败，请检查网络'}
clarity//默认播放清晰度 [v2.2.1+]。示例：clarity: 'od'
clarityLabel//自定义清晰度文案 [v2.2.1+]。示例：clarityLabel: {od: '蓝光', hd: '高清', sd: '标清'}。
listener//事件监听回调函数，回调函数将传入一个 JSON 格式的对象。   示例： function(msg){//进行事件处理 }
pausePosterEnabled//暂停时显示封面 [v2.3.0+]。
preload//配置 video 标签的 preload 属性，只有部分浏览器生效[v2.3.0+]。
hlsConfig//hls.js 初始化配置项 [v2.3.0+]。
flvConfig//flv.js 初始化配置项 [v2.3.1+]。
webrtcConfig//webrtc 初始化配置项 [v2.4.1+]。支持通过 streamType 指定拉流类型，默认拉取音视频，可选单独拉取视频或单独拉取音频，streamType 可选属性：auto：拉取视频流和音频流 video：仅拉取视频流 audio：仅拉取音频流 示例：webrtcConfig: { streamType: 'video' }

Tcplayer API

play()//播放 player.play()
pause()//暂停 player.pause()
togglePlay()//播放和暂停切换 player.togglePlay()
mute(muted)//静音 player.mute(true)
volume(val)//音量 范围：0到1 player.volume(0.3)
playing()//返回是否在播放中 player.playing()
duration()//获取视频时长 player.duration()  只适用于点播，需要在触发 loadedmetadata 事件后才可获取视频时长
currentTime(time)//设置视频播放时间点，不传参则返回当前播放时间点 player.currentTime()
fullscreen(enter)//调用全屏接口(Fullscreen API)，不支持全屏接口时使用伪全屏模式，不传参则返回值当前是否是全屏 player.fullscreen(true)
buffered()//获取视频缓冲数据百分比 player.buffered()
destroy()//销毁播放器实例[v2.2.1+]。 player.destroy()
switchClarity()//切换清晰度，传值 "od"、"hd"、"sd" [v2.2.1+]。player.switchClarity('od')
load(url)//通过视频地址加载视频,该方法只能加载对应播放模式下支持的视频格式，H5 模式支持 MP4、HLS 和 FLV（HLS、FLV 取决于浏览器是否支持 player.load(http://xxx.mp4)

注意：以上方法必须是TcPlayer的实例化对象，且需要初始化完毕才可以调用（即 load 事件触发后）。

Tcplayer 监听

error//错误
timeupdate//播放时间变化
load//加载
loadedmetadata
loadeddata//预加载
progress
fullscreen//全屏
play//播放
playing//正在播放
pause//暂停
ended//播放结束
seeking//正在跳转播放时间
seeked//已经完成跳转播放时间
resize
volumechange//音量变化
webrtcstatupdate
webrtcwaitstart
webrtcwaitend
webrtcstop

注意：TCPlayerLite以H5<video>的规范，对播放事件做了一定程度的转换，以实现播放事件命名的统一，TcPlayer对原生事件进行了捕获和透传。

Tcplayer 错误码

错误编号//错误说明
1//网络错误，请检查网络配置或者播放链接是否正确。
2//网络错误，请检查网络配置或者播放链接是否正确。
3//视频解码错误。
4//当前系统环境不支持播放该视频格式。
5//当前系统环境不支持播放该视频格式。
10//请勿在 file 协议下使用播放器，可能会导致视频无法播放。
11//使用参数有误，请检查播放器调用代码。
12//请填写视频播放地址。
2001//调用 WebRTC 接口失败
2002//调用拉流接口失败
2003//连接服务器失败，并且连接重试次数已超过设定值