TcPlayer騰訊播放器

業務需求：

直播過程中需要不斷的拉流進行播放，遇到網絡突然中斷的情況時，直播推流中斷會中斷；此時因為播放器拉流失敗無法正常播放而導致播放器會播放失敗。當直播恢復推流恢復時候，播放器需要自動恢復拉流來自動恢復直播播放。綜合了常用的播放器做對比，對比結果如下：

阿里雲播放器（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" style="width:100%; height:auto;"></div>
		</div>
	</body>
</html>

初始化直播播放器

設置直播拉流地址和視頻播放器封面；
設置H5兼容（微信同層播放設置）；
設置播放器錯誤碼以及對應提示信息；
設置直播失敗定時重連。

export default {
	name: "TcPlayer",
	data() {
		return {
			player: null,
			videoUrl: "https://myun-hw-s3.myun.tv/e54ypd59/5z4op6m0/l7b9r8g0/0eyv9aal_1559181924071539192_origin.m3u8" /* 直播拉流地址 */,
			poster: "" /* 視頻封面 */
		};
	},
	mounted() {
		this.initPlayer();
	},
	methods: {
		// 初始化播放器
		initPlayer() {
			if (this.player) {
				this.player.destroy();
				this.player = null;
			}

			let options = {
				m3u8: this.videoUrl /* 播放地址 */,
				// mp4: "" /* 回看地址 */,
				// poster: this.poster /* 視頻封面 */,
				live: false /* 是否直播 */,
				autoplay: true,
				poster: { style: "cover", src: this.poster },
				pausePosterEnabled: true /* 暫停時顯示封面 默認為true */,
				wording: {
					1002: "即將直播，請稍等",
					2032: "請求視頻失敗，請檢查網絡",
					2048: "請求m3u8文件失敗，可能是網絡錯誤或者跨域問題"
				},
				controls: "system", //default||'' 顯示默認控件，none 不顯示控件，system 移動端顯示系統控件
				x5_player: true,
				x5_type: "h5-page",
				x5_fullscreen: true,
				listener: function(msg) {
					// 播放失敗，重新連接
					if (msg.type == "error") {
						setTimeout(() => {
							this.player.load(); // 重連
						}, 4000);
					}
				}
			};
			// 初始化
			this.player = new TcPlayer("tc_player_view", options);
		}
	}
};

參數列表：

參數	類型	默認值	參數說明
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 的對象。- default 居中1：1顯示；- stretch 拉伸鋪滿播放器區域，圖片可能會變形；- cover 優先橫向等比拉伸鋪滿播放器區域，圖片某些部分可能無法顯示在區域內。示例： "`xxxxxxxxx.jpg`" 或者{"style": "cover", "src": `xxxxxxx.jpg`} [v2.3.0+]
controls	String	"default"，"system"	default 顯示默認控件，none 不顯示控件，system 移動端顯示系統控件。（備注：如果需要在移動端使用系統全屏，就需要設置為 system。默認全屏方案是使用 Fullscreen API + 偽全屏的方式，在線示例）
systemFullscreen	Boolean	false	開啟后，在不支持 Fullscreen API 的瀏覽器環境下，嘗試使用瀏覽器提供的 webkitEnterFullScreen 方法進行全屏，如果支持，將進入系統全屏，控件為系統控件。
flash	Boolean	true	是否優先使用 Flash 播放視頻。（備注：該選項只對 PC 平台生效[v2.2.0+]）
flashUrl	String	無	可以設置 flash swf url。（備注：該選項只對 PC 平台生效 [v2.2.1+]）
h5_flv	Boolean	false	是否啟用 flv.js 的播放 flv。啟用時播放器將在支持 MSE 的瀏覽器下，采用 flv.js 播放 flv，然而並不是所有支持 MSE 的瀏覽器都可以使用 flv.js，所以播放器不會默認開啟這個屬性，[v2.2.0+]。
x5_player	Boolean	false	是否啟用 TBS 的播放 flv 或 hls 。啟用時播放器將在 TBS 模式下(例如 Android 的微信、QQ 瀏覽器），將 flv 或 hls 播放地址直接賦給 `<video>` 播放。
x5_type	String	無	通過 video 屬性 “x5-video-player-type” 聲明啟用同層 H5 播放器，支持的值：h5-page (該屬性為 TBS 內核實驗性屬性，非 TBS 內核不支持)；
示例："h5-page"
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: '請求視頻失敗，請檢查網絡'}
clarity	String	'od'	默認播放清晰度[v2.2.1+]。示例: clarity: 'od'
clarityLabel	Object	{od: '超清', hd: '高清', sd: '標清'}	自定義清晰度文案 [v2.2.1+]。示例: clarityLabel: {od: '藍光', hd: '高清', sd: '標清'}。
listener	Function	無	事件監聽回調函數，回調函數將傳入一個 JSON 格式的對象。示例：function(msg){//進行事件處理 }
pausePosterEnabled	Boolean	true	暫停時顯示封面[v2.3.0+]。
preload	String	'auto'	配置 video 標簽的 preload 屬性，只有部分瀏覽器生效[v2.3.0+]。
hlsConfig	Object	無	hls.js 初始化配置項[v2.3.0+]。
flvConfig	Object	無	flv.js 初始化配置項[v2.3.1+]。

實例方法：

方法	參數	返回值	說明	示例
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 提示的錯誤。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 騰訊雲播放器更新——TCplayer Web播放器 TcPlayer——騰訊直播sdk的網頁播放器 vue中引入播放器（百度播放器和騰訊雲播放器） TCPlayerLite騰訊雲流播放器的使用 charles工具過濾騰訊視頻播放器廣告 Android------視頻播放器（包含全屏播放，快退，快進，騰訊新聞的列表播放等）引入騰訊視頻的播放器組件在頁面直接播放視頻 AR播放器音樂播放器 VLC播放器