腾讯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')
			{//播放完成事件
			}
		}
	});
}