HTML5高阶实例之video

「爱情、让人受尽委屈。」 2022-05-28 01:54 241阅读 0赞

###### *最新更新时间：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');
    	    });
        }

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

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 Video和Audio

1.视频 video提供了播放，暂停和音量空间来控制视频。标签之间插入的内容是提供给不支持video元素的浏览器显示的。 video元素支持多个source元素，

Dear 丶/ 2022年08月23日 10:00/ 0 赞/ 225 阅读

相关 HTML5 API 之video/audio 视频/音频

video的使用方法： <video autoplay="autoplay" controls="controls" width="800" muted="muted" lo

港控/mmm°/ 2022年06月01日 00:28/ 0 赞/ 328 阅读

相关 HTML5高阶实例之Drag&Drop

最新更新时间：2018年3月27日21:53:27 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] 1、原生拖放-概述 > 对于拖放事件而

Myth丶恋晨/ 2022年05月29日 05:17/ 0 赞/ 195 阅读

相关 HTML5高阶实例之Canvas实现一个画板(手写板)

最新更新时间：2018年3月17日14:24:36 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] 1、用canvas元素实现一个画板 >

妖狐艹你老母/ 2022年05月29日 04:57/ 0 赞/ 281 阅读

相关 HTML高阶实例之自定义元素

最新更新时间：2018年3月27日18:07:55 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：自定义元素 > 创建自定义元

我就是我/ 2022年05月28日 02:39/ 0 赞/ 186 阅读

相关 HTML5高阶实例之video

最新更新时间：2018年3月27日18:07:55 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：VIDEO标签动态创建常

「爱情、让人受尽委屈。」/ 2022年05月28日 01:54/ 0 赞/ 242 阅读

相关 HTML5_video_and_audio

video 和 audio标签简介资源共享手机界面： 3G门户： http://mobile.3g.cn/mobile3g.aspx?cin=518&wap

水深无声/ 2022年04月06日 07:45/ 0 赞/ 283 阅读

相关 HTML5中video元素

HTML5中video元素 video元素：也是我们做网页经常用到的元素，它可以在页面中播放视频 1.属性： src：视频的地址 Height：视频页面的高度

旧城等待，/ 2022年02月14日 03:31/ 0 赞/ 317 阅读

相关 HTML5高阶实例之canvas绘制圆弧

最新更新时间：2019年07月14日14:18:12 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：canvas 绘制圆弧

亦凉/ 2021年12月09日 17:39/ 0 赞/ 480 阅读

相关 html5之video

<video id="myVideo" controls poster="video.jpg" width="600" height="400" > <

Bertha 。/ 2021年06月24日 14:34/ 0 赞/ 531 阅读