vIDeo API事件
play() 可以控制视频自动播放
但是在Chrome浏览器中不允许自动播放，只有在设置静音时才能允许自动播放
理由是：视频自动播放在终端非常耗电，因此被禁止
不过Chrome浏览器允许自动播放7s以内的视频，然而很少有人会放7s以内的视频，而是直接用gif
<!DOCTYPE HTML><HTML lang="en"head> Meta charset="UTF-8"Title>vIDeo</bodyvIDeo src="data/imooc.mp4" controls ID="myVIDeo"></vIDeo> script> var myVIDeo=document.getElementByID("myVIDeo); myVIDeo.play(); //在谷歌浏览器中无法自动播放，除非添加了事件 window.onclickfunction(){ myVIDeo.play(); } HTML>
pause() 视频暂停
div ID="playNode">播放div="pauseNode">暂停); 点击控制播放与暂停 ID可以直接使用，不用DOM获取 playNode.onclick(){ myVIDeo.play(); } pauseNode.onclick(){ myVIDeo.pause(); } 5秒后视频自动暂停 setTimeout((){ myVIDeo.pause(); },5000); >
duration 视频总长度
在刚加载时无法显示，结果是NaN
可以使用定时器解决，或者等到时视频播放结束
); console.log(myVIDeo.duration);NaN setTimeout((){ console.log(myVIDeo.duration);206.485333 minparseInt(myVIDeo.duration/60);分 sec%60);秒 console.log(总时长+min:sec);总时长3:26 },1)">200); >
currentTime 设置或返回视频的当前时间
="gogogo">快进每一秒获取当前视频的播放时间 setInterval((){ console.log(myVIDeo.currentTime); },1)">1000); 设置视频的当前位置是30秒处 myVIDeo.currentTime30; 点击快进，视频跳到20秒之后 gogogo.onclick(){ myVIDeo.currentTime+=; } >
src 设置视频的src属性（也可用于替换）
controls ID> myVIDeo.srcdata/imooc.mp4; >
volume 获取和设置视频音量
配合range使用效果很不错哦
input type="range" name="myvolumn" ID min=0 max=100 value="50"; 获取视频默认音量（1代表最高） console.log(myVIDeo.volume);1 设置视频音量，0代表静音 myVIDeo.volume0使用range来控制音量 myvolumn.oninput(){ myVIDeo.volumemyvolumn.value100; } >
controls 设置视频的控件
设置视频控件 myVIDeo.controlstrue; >
muted 设置视频静音，但这个muted不会出现在vIDeo标签上
="myVIDeo" src controls设置视频静音 myVIDeo.muted>
networkState 视频的网络状态
0 未初始化
1 视频已经获取到资源，未使用网络
2 视频正在加载（常见于网络视频），边下载边看
3 未找到视频资源（常见src属性错误，或者刚初始化时，因为vIDeo不会立刻找到资源，存在延迟）
获取视频的网路状态 console.log(myVIDeo.networkState);3(){ console.log(myVIDeo.networkState);1 },1)">); >
vIDeo API 事件2
currentSrc 返回当前音视频的地址
currentSrc和src的区别：
src 可以设置音视频地址
currentSrc 不能设置音视频地址，只能获取（而且必须等到视频资源已经加载完可以使用的时候才能获取到）
console.log(myVIDeo.src);file:///C:/Users/96579/Desktop/vIDeo/data/imooc.mp4 console.log(myVIDeo.currentSrc);空(){ console.log(myVIDeo.src); console.log(myVIDeo.currentSrc);>
ended 返回视频是否已经播放结束
判断视频是否播放结束 console.log(myVIDeo.ended);false 监听视频播放结束事件 myVIDeo.addEventListener(ended,1)">(){ console.log(视频播放结束); 此时可以起到循环播放的作用 myVIDeo.play(); }) >
loop 设置或返回视频的循环播放
="myloop">不循环判断视频是否设置了循环播放 console.log(myVIDeo.loop);设置视频循环播放 myVIDeo.loop控制视频的循环与否 myloop.onclick(){ if(myVIDeo.loop==false){ this.INNERHTML循环; myVIDeo.loop; }else{ 不循环; } } >
playbackRate 设置或获取视频的播放速度
="rate"> span>0.5>1>2查看视频的默认播放速度 console.log(myVIDeo.playbackRate);1 设置视频播放速度 myVIDeo.playbackRate1.5控制视频的播放速度 rate.children[].onclick(){ myVIDeo.playbackRate0.5; } rate.children[12>
readyState 视频的当前就绪状态
0 没有获取到信息
1 有数据，但是快不足以支撑
2 当前数据可用，但是下一帧不可用
3 数据正在缓冲，但当前及下一帧是可用的
4 视频已经准备就绪，数据足以播放
没有获取到信息 console.log(myVIDeo.readyState);0 视频准备就绪(){ console.log(myVIDeo.readyState);4>
timeupdate 视频播放位置在改变
p ="timeNode"p="timeNode2"监听视频播放状态timeupdate视频正在播放中); timeNode.INNERHTMLmyVIDeo.currentTimemyVIDeo.duration; let声明变量，相当于var，是es6语法 let NowparseInt(myVIDeo.currentTime60)+":"+parseInt(myVIDeo.currentTime%60); let all60)+":"+parseInt(myVIDeo.duration%60); timeNode2.INNERHTMLNowall; }) >
这里有个小BUG，就是秒数是个位数时，前面少了0，这个后面再处理
seeked 视频已经跳转到新的时间位置
seeking 视频正在跳转到新的时间位置
监听时需要加on onseeked onseeking
监听视频跳转状态 myVIDeo.onseeked跳转完成); } myVIDeo.onseeking正在跳转); } >
volumechange 音量改变事件
使用时需要加上on
="myvolume">音量改变监听音量改变事件 myVIDeo.onvolumechange音量改变); } 点击随机改变音量 myvolume.onclickMath.random(); } >
vIDeo API 事件3
requestFullscreen 全屏
首先必须是在事件中触发才能使用
其次不同浏览器有不同的写法
Chrome: webkitRequestFullscreen
火狐：mozRequestFullScreen
IE：ms
退出全屏没有设置，默认会使用自带的控件（因为即使没有control控件，在全屏状态下默认也会出现控件）
="fullScreen">全屏设置全屏 fullScreen.onclick(myVIDeo.webkitRequestFullscreen){ myVIDeo.webkitRequestFullscreen(); }else (myVIDeo.mozRequestFullScreen){ myVIDeo.mozRequestFullScreen(); }其他浏览器待补充…… } } >
load 重新加载视频资源
注意只是重新加载视频资源，整个页面并不会刷新
通常用于改变视频的src之后的 *** 作
="load">视频刷新 load.onclick(){ myVIDeo.load(); } >
canplay 视频已经准备好，可以开始播放
myVIDeo.addEventListener(canplay视频已经加载好，可以开始播放了); }) >
总结
以上是内存溢出为你收集整理的Html5新增视频功能——video API 事件全部内容，希望文章能够帮你解决Html5新增视频功能——video API 事件所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）