TcPlayer 腾讯播放器

预计阅读时间: 小于 1 分钟

业务需求：

直播过程中需要不断的拉流进行播放，遇到网络突然中断的情况时，直播推流中断会中断；此时因为播放器拉流失败无法正常播放而导致播放器会播放失败。当直播恢复推流恢复时候，播放器需要自动恢复拉流来自动恢复直播播放。综合了常用的播放器做对比，对比结果如下：

阿里云播放器（aliplayer）推流中断时播放失败，此时其可以设置指定重复拉流次数的恢复拉流尝试，当达到尝试的次数时，播放器会报错，提示信息不是很明显，当再次恢复推流时候，会一直停留在播放失败的页面；
腾讯播放器（TcPlayerLite）推流失败时有指定的错误提示【 根据不同的错误码设置不同的错误提示】，方便用户知晓直播状态；当直播失败时可以在播放界面显示视频封面，相对来说比较美观；
aliplayer 不支持直播暂停，tcplayer 支持直播暂停【因为当时 Android 手机的同层播放时，支持直播暂停，直播中断时，手机上会不断尝试拉流，直至正常播放】，因此为了达到与手机微信端一致的效果，就采取了此方案。
aliplayer 配置直播地址的参数是固定的【 source 】，直播地址没有要求；而 tcplayer 配置直播地址属性的参数是收到直播推流地址影响的【 m3u8、flv 等】，同时可以配置多个推流地址，在 手机端 和 PC 端会自动切换【浏览器支持 flash 的话会自动匹配 flv 格式的直播】。

代码配置：

在 head 标签中引入播放器的 cdn；
在页面创建播放器容器，样式自定义；
初始化视频直播播放器。

初始化页面

1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<meta charset="utf-8" />
5		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
7		<!-- TCPlayerLite 初始化cdn -->
8		<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
9		<!-- or -->
10		<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
11	</head>
12	<body>
13		<div id="app">
14			<!-- 初始化播放器 -->
15			<div id="tc_palyer_lite" style="width:100%; height:auto;"></div>
16		</div>
17	</body>
18</html>

初始化直播播放器

设置直播拉流地址和视频播放器封面；
设置 H5 兼容（微信同层播放设置）；
设置播放器错误码以及对应提示信息；
设置直播失败定时重连。

初始化播放器

1export default {
2	name: "TcPlayer",
3	data() {
4		return {
5			player: null,
6			videoUrl: "https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/hls/xgplayer-demo.m3u8" /* 直播拉流地址 */,
7			poster: "" /* 视频封面 */
8		};
9	},
10	mounted() {
11		this.initPlayer();
12	},
13	methods: {
14		// 初始化播放器
15		initPlayer() {
16			if (this.player) {
17				this.player.destroy();
18				this.player = null;
19			}
20
21			let options = {
22				m3u8: this.videoUrl /* 播放地址 */,
23				// mp4: "" /* 回看地址 */,
24				// poster: this.poster /* 视频封面 */,
25				live: false /* 是否直播 */,
26				autoplay: true,
27				poster: { style: "cover", src: this.poster },
28				pausePosterEnabled: true /* 暂停时显示封面 默认为true */,
29				wording: {
30					1002: "即将直播，请稍等",
31					2032: "请求视频失败，请检查网络",
32					2048: "请求m3u8文件失败，可能是网络错误或者跨域问题"
33				},
34				controls: "system", //default||'' 显示默认控件，none 不显示控件，system 移动端显示系统控件
35				x5_player: true,
36				x5_type: "h5-page",
37				x5_fullscreen: true,
38				listener: function (msg) {
39					// 播放失败，重新连接
40					if (msg.type == "error") {
41						setTimeout(() => {
42							this.player.load(); // 重连
43						}, 4000);
44					}
45				}
46			};
47			// 初始化
48			this.player = new TcPlayer("tc_player_view", options);
49		}
50	}
51};

参数列表：

参数	类型	默认值	参数说明
m3u8	String	无	原画 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。
mp4	String	无	原画 MP4 播放 URL。
mp4_hd	String	无	高清 MP4 播放 URL。
mp4_sd	String	无	标清 MP4 播放 URL。
rtmp	String	无	原画 RTMP 播放 URL。示例：`rtmp://xxxxxxxxxxxxxxx_`
rtmp_hd	String	无	高清 RTMP 播放 URL。示例：`rtmp://xxxxxxxxxxxxxxxx_hd`
rtmp_sd	String	无	标清 RTMP 播放 URL。示例：`rtmp://xxxxxxxxxxxxxxxxx_sd`
width	Number	无	必选，设置播放器宽度，单位为像素。示例：640
height	Number	无	必选，设置播放器高度，单位为像素。示例：480
volume	Number	0.5	设置初始音量，范围：0 到 1 [v2.2.0+]。示例：0.6
live	Boolean	false	必选，设置视频是否为直播类型，将决定是否渲染时间轴等控件，以及区分点直播的处理逻辑。
autoplay	Boolean	false	是否自动播放。（备注：该选项只对大部分 PC 平台生效）
poster	String / Object	无	预览封面，可以传入一个图片地址或者一个包含图片地址 src 和显示样式 style 的对象。

实例方法：

方法	参数	返回值	说明	示例
play()	无	无	开始播放视频。	player.play()
pause()	无	无	暂停播放视频。	player.pause()
togglePlay()	无	无	切换视频播放状态。	player.togglePlay()
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}	获取视频时长。
（备注：只适用于点播，需要在触发 loadedmetadata 事件后才可获取视频时长）	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()
destroy()	无	无	销毁播放器实例[v2.2.1+]。	player.destroy()
switchClarity()	{String}[必选]	无	切换清晰度，传值 "od"、"hd"、"sd" [v2.2.1+]。	player.switchClarity('od')
load(url)	{String}[必选]	无	通过视频地址加载视频。
（备注：该方法只能加载对应播放模式下支持的视频格式，Flash 模式支持切换 RTMP、FLV、HLS 和 MP4 ，H5 模式支持 MP4、HLS 和 FLV（HLS、FLV 取决于浏览器是否支持）[v2.2.2+]）	player.load(`[http://xxx.mp4](http://xxx.mp4)`)

错误码：

Code	提示语	说明
1	网络错误，请检查网络配置或者播放链接是否正确。	H5 提示的错误。
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 提示的错误。

视频播放器详细信息

「参数配置」
「示例方法」
「错误码」
请查阅 - 腾讯官方文档

#TcPlayer 腾讯播放器

#业务需求：

#代码配置：

#参数列表：

#实例方法：

#错误码：

TcPlayer 腾讯播放器

业务需求：

代码配置：

参数列表：

实例方法：

错误码：