HTML5高阶实例之video

最新更新时间：2018年3月27日18:07:55

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容：VIDEO标签

动态创建常规video

let userVideo = document.createElement('video');
document.body.appendChild(userVideo);
//属性width height autoplay id type src，也可以通过userVideo.setAttribute('type','video/mp4');来设置
userVideo.width = 320;
userVideo.height = 240;
userVideo.autoplay = true;
userVideo.id = 'userVideo-2';
userVideo.type = 'video/mp4';
userVideo.src = "http://60.210.16.52/videos/other/1.mp4";//浏览器只支持mp4 hls
//userVideo.load();
//userVideo.play();
userVideo.oncanplaythrough = document.getElementById("userVideo-1").play();

动态创建id不重复的可控video

function createVideo(id,src,autoplay,controls){
    	//判断id是否重名
        if(duplicationId(id)){
        	console.log('id 重名，无法创建!');
	        return null;
        }
        //创建video
	    let customVideo = document.createElement('div');//
	    customVideo.id = id;
	    customVideo.src = src;
	    customVideo.autoplay = autoplay;
	    customVideo.controls = controls;
	    customVideo.type = "video/mp4";
	    return customVideo
    }
    function duplicationId(id){
	    let allEle = document.getElementsByTagName('video');
	    let idArr = [];
	    for(let i=0,len=allEle.length;i<len;i++){
		    idArr.push(allEle[i].getAttribute('id'));
	    }
	    if(idArr.indexOf(id) !== -1){
		    console.log('duplication id')
		    return true
	    }else{
		    console.log('can set id')
		    return false
	    }
    }
    //添加video
    let a = createVideo('customVideo1',"http://60.210.16.52/videos/other/20180228/ee/6e/dd04b4c964066489cd90c04fe79a1339.mp4?dis_k=27b2ad2afe70203668d7ac0c1df14054a&dis_t=1522138750&dis_dz=CNC-QiYi&dis_st=46&src=iqiyi.com&uuid=ca6c0ef0-5ab9fe7e-89&z=zibo5_cnc&pv=0.2",true,true);
    if(a){
	    document.body.appendChild(a);
	    a.addEventListener('play',function(){
		    console.log(a.getAttribute('id') + ' play');
	    });
	    //音频/视频已暂停
	    a.addEventListener('pause',function(){
		    console.log(a.getAttribute('id') + ' pause');
	    });
	    //播放结束
	    a.addEventListener('ended',function(){
		    console.log(a.getAttribute('id') + ' end');
	    });
    }
    let b = createVideo('customVideo2',"http://60.210.16.52/videos/other/20180228/ee/6e/dd04b4c964066489cd90c04fe79a1339.mp4?dis_k=27b2ad2afe70203668d7ac0c1df14054a&dis_t=1522138750&dis_dz=CNC-QiYi&dis_st=46&src=iqiyi.com&uuid=ca6c0ef0-5ab9fe7e-89&z=zibo5_cnc&pv=0.2",true,true);
    if(b){
	    document.body.appendChild(b);
	    //音频/视频已开始或不再暂停
	    b.addEventListener('play',function(){
		    console.log(b.getAttribute('id') + ' play');
	    });
	    //音频/视频已暂停
	    b.addEventListener('pause',function(){
		    console.log(b.getAttribute('id') + ' pause');
	    });
	    //播放结束
	    b.addEventListener('ended',function(){
		    console.log(b.getAttribute('id') + ' end');
	    });
    }

感谢阅读，欢迎评论^-^

打赏我吧^-^