[ztree结合videojs]动态添加video元素避免触发下载事件

目录

    • 部分需求
    • 部分源码

部分需求

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

部分源码

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();
	})
}

你可能感兴趣的:(Javascript,js插件,jQuery)