部分需求

通过点击左边的树去动态的获取直播流

部分源码

var src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
var tree_setting= {
    
    
		callback: {
    
    
			onClick: initVideoInstance
		}
	};
var tree_data =[....]
	function nodeClick(event, treeId, treeNode, clickFlag) {
    
    
		console.log(treeNode)
	}

var videoMonitorTree = $.fn.zTree.init($("#tree-id"), tree_setting, tree_data);
	videoMonitorTree.expandAll(true);
			
function initVideoInstance(src){
    
    
	// 重要，不然在点击树叶子的时候会触发下载事件
	event.preventDefault()
	
	++video_num;
	var layoutN = $("#videoLay .video-grid [class*='layout']").attr("class").split(" ")[1];
	var len =$("."+layoutN).length
	
	// 生成视频
	for(var i=0;i<len;++i){
    
    
		if(!$($("."+layoutN).get(i)).hasClass("init")){
    
    
			$($("."+layoutN).get(i)).addClass("init").html(videoHtml(video_num));
			break;
		}
	}

	// $("."+layoutN).addClass("init").html(videoHtml(video_num));
	// $(".init source").last().attr("src",src);
	videojs("liveVideo"+video_num,{
    
    
		language: 'zh-CN',
		sources: [{
    
    
			src: src,
			type: 'application/x-mpegURL'
		}]
	},function onPlayerReady(){
    
    
		var w = $("."+layoutN).width();
		var h = $("."+layoutN).height();
		$("#liveVideo"+video_num).css({
    
    "width":w,"height":h});
		this.poster('../plugin/videojs/init.gif')
		this.play();
	})
}