html 代码。。video后边几个元素,可处理ios 系统的兼容性

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

js 代码

<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 == ){
//处理代码
}
},false); </script>

事件介绍

事件 描述
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属性(静音状态)被改变

【HTML5】HTML5中video元素事件详解(实时监测当前播放时间)的更多相关文章

  1. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  2. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  3. 【转载】C# 中的委托和事件(详解:简单易懂的讲解)

    本文转载自http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html C# 中的委托和事件(详解) C# 中的委托和事件 委托和事件在 ...

  4. C# 中的委托和事件详解

    C# 中的委托和事件 文中代码在VS2005下通过,由于VS2003(.Net Framework 1.1)不支持隐式的委托变量,所以如果在一个接受委托类型的位置直接赋予方法名,在VS2003下会报错 ...

  5. C# 中的委托和事件(详解)

    C# 中的委托和事件 委托和事件在 .NET Framework 中的应用非常广泛,然而,较好地理解委托和事件对很多接触 C# 时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太 ...

  6. 【转载】C# 中的委托和事件(详解)

    <div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...

  7. HTML5视频播放插件Video.js使用详解

    一.Video.js简介 Video.js 是一个开源的 Html5 jquery 视频插件,这个插件可以用来处理 Flash 视频,它还是一个多平台支持的产品. Moreover,YouTube,V ...

  8. 【转】C# 中的委托和事件(详解)

    源地址:http://www.cnblogs.com/SkySoot/archive/2012/04/05/2433639.html

  9. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

随机推荐

  1. ArcGIS Server 缓存服务增加新比例尺缓存

    win10 + Server 10.4 +  ArcMap 10.4  操作简单说明: ①窗口上方Customize栏→Toolbars→ Customize→ 搜索到 manege map serv ...

  2. 从用python自动生成.h的头文件集合和类声明集合到用python读写文件

    最近在用python自动生成c++的类.因为这些类会根据需求不同产生不同的类,所以需要用python自动生成.由于会产生大量的类,而且这些类是变化的.所以如果是在某个.h中要用include来加载这些 ...

  3. 平均时间复杂度为O(nlogn)的排序算法

    本文包括 1.快速排序 2.归并排序 3.堆排序 1.快速排序 快速排序的基本思想是:采取分而治之的思想,把大的拆分为小的,每一趟排序,把比选定值小的数字放在它的左边,比它大的值放在右边:重复以上步骤 ...

  4. 构建一个真实的应用电子商务SportsStore(十一)

    构建一个真实的应用电子商务SportsStore(十一) 我们的项目已经进入了非常好的良性循环,项目中涵盖了多数现在的主流开源框架的使用.就Ninject而言,我们的运用是非常的成功,没有任何一点多余 ...

  5. Eclipse的Java工作集和多工程构建路径

    一.Java工作集: Eclipse有一个小功能,就是创建Java Working Set.它的作用是解决Package Explorer窗格中创建很多工程时出现拥挤的麻烦. 在创建(New对话框)时 ...

  6. PHP支持的协议和封装的协议

    今天主要看了下PHP支持的协议和封装的协议,主要了解了一下PHP中的配置协议方面的东西,弄明白了以前比较模糊的stream_context_create()等上下文方法,还没有完全看完,先将自己的片段 ...

  7. 201521123037 《Java程序设计》第1周学习总结

    #1.本章学习总结 了解java的发展历程 能够区分JVM.JRE.JDK之间的关系 了解文件名.类名要相同,且文件名大小写代表不同的名称 初步了解java编程语句 学会用控制台编译java程序 #2 ...

  8. Zookeeper学习笔记1

    参考:从Paxos到Zookeeper分布式一致性原理与实践 从ACID到CAP/BASE ACID 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库 ...

  9. Java 中断

    https://zhuanlan.zhihu.com/p/45667127 看的似懂非懂

  10. hduoj1073--Online Judge

    做道题,并没有太多的技巧,关键在与对Accepted,presented error 和wa的判断,第一步如果两者完全一样,那么很定是AC了 ,否则如果去掉多余换行,空格,制表后还有不同说明是数据 不 ...