.m3u8视频的播放及弹框实现

			               **共享共成长，希望对大家有所帮助**

.m3u8格式的视频，如果直接使用浏览器播放，则需要借助HLS Native的插件。
在HTML页面中，主流的有 Vedio.js , 我采用了 TcPlayer 。
在使用过程中遇到了一个问题，就是关闭播放视频后，第二次打开，发现有两个播放的实例，如图：

解决办法：初始化实例之前，先销毁实例.

$('#id_test_video').html("");		//id_test_video为播放器div的id

最后效果：
部分代码如下：

//在当前页面先隐藏，等执行function后，使用dialog弹出，外层为背景层，内层为视频播放器使用
<div id="photo" title="视频"  style="display: none;">
	<div id="id_test_video"></div>
</div>


<script>

function vedio(){
	
	$('#id_test_video').html("");	//避免播放器重复初始化，生成多个video
	var player =  new TcPlayer('id_test_video', {
	"m3u8": "m3u8的url",
	//"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv", //增加了一个 flv 的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
	"autoplay" : true,      //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
	//"poster" : ,
	"width" :  '450',//视频的显示宽度，请尽量使用视频分辨率宽度
	"height" : '300',//视频的显示高度，请尽量使用视频分辨率高度
	"left":'50%'
	});		

	
		var diag = new Dialog();
		diag.Width = 550;			//将决定关闭按钮的位置	
		diag.Height = 380;
		diag.ShowMessageRow=false;		
		//diag.Title = "内容页为html代码的窗口";	
		diag.InvokeElementId='photo';	
		//diag.OKEvent = function(){diag.close();};//点击确定后调用的方法
		diag.CancelEvent=function(){
		$('#id_test_video').html("");//点击关闭执行的function
		diag.close();};	//关闭画面及视频音效，否则视频关闭，音效仍在
		diag.show();			
	}
</script>