video标签监听事件

 <video   id="myVideo"    controls="controls"       poster='预览图'   preload="auto"    x5-playsinline="" playsinline="" webkit-playsinline=""  ><source src="" type="video/mp4"></video>

<script>
//获取视频DOM元素var myVideo = document.getElementById("myVideo");myVideo.oncanplay = function(){console.log("准备就绪");    };//监听播放开始myVideo.addEventListener('play',function(){console.log("开始播放");});//监听播放结束myVideo.addEventListener('pause',function(){console.log("播放暂停");}); //监听播放结束myVideo.addEventListener('ended',function(){console.log("播放结束");});//使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态myVideo.addEventListener("timeupdate",function(){var timeDisplay;//用秒数来显示当前播放进度timeDisplay = Math.floor(myVideo.currentTime);console.log(Math.floor(myVideo.currentTime))//当视频播放到 4s的时候做处理if(timeDisplay == 4){//处理代码}},false);   </script>

video标签“事件”介绍
事件描述
loadstart 浏览器开始在网上寻找媒体数据
progress 浏览器正在获取媒体数据
suspend 浏览器暂停获取媒体数据，但是下载过程并滑正常结束
abort 浏览器在下载完全部媒体数据之前中止获取媒体数据，但是并不是由错误引起的
error 获取媒体数据过程中出错
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

2.在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体

stalled 浏览器尝试获取媒体数据失败
play 即将开始播放，当执行了play方法时触发，或数据下载后元素被设为autoplay属性
pause 播放暂停，当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧
canplay 浏览器能够播放媒体，但估计以当前的播放速率不能直接播放完毕，播放期间需要缓冲
canplaythrough 浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲
seeking seeking属性变为true，浏览器正在请求数据
seeked seeking属性变为false，浏览器停止请求数据
timeupdate 由于播放位置被改变，可能是播放过程中的自然改变，也可能是被人为的改变，或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变
druationchange 播放时长被改变
volumechange volume属性（音量）被改变或muted属性（静音状态）被改变

video标签监听事件相关推荐

html5 video/audio 监听事件属性及方法
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>au ...
video标签监听播放暂停，隐藏下载按钮
/* 隐藏视频默认的下载按钮*/ video::-webkit-media-controls-enclosure {overflow:hidden;} video::-webkit-media-con ...
HTML5 video/audio监听事件属性及方法
js实现button标签转为click监听事件
公司通过海思板子做了一个纯html页面,登录用户数据通过sqlite3存储,所以登录按钮通过button标签实现的,现在要通过键盘回车登录操作,所以需要将button按钮转click事件操作 1,登录 ...
常用的监听事件(android)
刚发布过Toast,为了是自己记得牢固一些在这里写几个监听事件分别写出不同位置的Toast 监听常用的有四种第一种:内部类作为事件监听器类 xml中代码 <RelativeLayout xm ...
监听js变量的变化_JS监听事件型爬虫
点击上方"Python数据科学",选择"星标公众号" 关键时刻,第一时间送达! 作者:zuobangbang 来源:zuobangbang 最近开始研究网页参数 ...
java/05/（Swing包）窗体，组件，布局管理器，面板，监听事件
java/05/Swing包(窗体) Swing特点: 原来的AWT组件来自java.awt包,当含有AWT组件的java应用程序在不同的平台上执行时,每个平台的GUI组件的显示会有所不同,但是在不同 ...
js常用对象：点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等；通过循环给多个元素添加事件、通过addEventListener() 方法监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
Vue-1-实例、渲染、监听事件
一.概念渐进的意思是我们可以用vue只写一个页面,慢慢的把整个项目用vue替换掉结合了React和Angular,也有自己的优点二.Vue实例页面的值都是从data里来的,随data值的改变而 ...

video标签监听事件

video标签监听事件相关推荐

最新文章

热门文章