TcPlayer腾讯播放器

最新推荐文章于 2024-07-17 19:17:35 发布

原创

最新推荐文章于 2024-07-17 19:17:35 发布 · 置顶 · 5.8k 阅读

13 ·

CC 4.0 BY-SA版权

TcPlayerLite在直播中断时提供错误提示并自动恢复拉流，展示视频封面，相比阿里云播放器具有更好的用户体验。它支持直播暂停，配置灵活，能根据浏览器支持自动选择流格式，并允许设置多个推流地址。

TcPlayerLite

业务需求：

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

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

代码配置：

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<!-- TCPlayerLite 初始化cdn -->
		<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
		<!-- or -->
		<script src="https://cloudcache.tencent-cloud.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 初始化播放器 -->
			<div id="tc_palyer_lite"

最低0.47元/天解锁文章