騰訊TCPlayerLite播放m3u8格式視頻

TCPlayerLite

騰訊雲 Web 超級播放器 TCPlayerLite 是為了解決在手機瀏覽器和 PC 瀏覽器上播放音視頻流的問題，它使您的視頻內容可以不依賴用戶安裝 App，就能在朋友圈和微博等社交平台進行傳播。

直播和點播
        直播視頻源是實時的，一旦主播停播，直播地址就失去意義，而且由於是實時直播，所以播放器在播直播視頻的時候是沒有進度條的。
       點播視頻源是某個服務器上的文件，只要文件沒有被提供方刪除，就可以隨時播放， 而且由於整個視頻都在服務器上，所以播放器在播點播視頻的時候是有進度條的。
協議支持
TCPlayerLite 的視頻播放能力本身不是網頁代碼實現的，而是靠瀏覽器支持，所以其兼容性不像我們想象的那么好，因此，不是所有的手機瀏覽器都能有符合預期的表現。一般用於網頁直播的視頻源地址是以 M3U8 結尾的地址，我們稱其為 HLS (HTTP Live Streaming)，這是蘋果推出的標准，目前各種

html代碼：

<!-- 引入播放器 js 文件 -->
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js"></script>
<div class="video-container" id="video-container"></div>

javascript代碼：

function playVideo(){
	tencentPlay = new TcPlayer('video-container', {
		"m3u8": 'm3u8地址', //請替換成實際可用的播放地址
		"autoplay" : true,      //iOS 下 safari 瀏覽器，以及大部分移動端瀏覽器是不開放視頻自動播放這個能力的
		"preload": true,
		"poster": { style: "cover", src: '封面圖地址'},
		"live": false,
		"width": "100%",
		"height": "100%",
		"x5_type": 'h5',
		listener: function (msg) {
			//console.log(msg.type);
			if(msg.type == 'load') { //加載完事件
				//解決微信瀏覽器脫離文檔流播放的問題；
				//TCPlayerLite文檔設置"x5_type": "h5"在安卓微信瀏覽器不生效，以下代碼可解決：
				document.querySelector('video').setAttribute('x5-video-player-type', 'h5-page');
				document.querySelector('video').setAttribute('x5-video-player-fullscreen', 'false');
				document.querySelector('video').setAttribute('x5-video-orientation', 'portrait');
			}									
			if(msg.type == 'ended')
			{//播放完成事件
			}
		}
	});
}