HTML5 VIDEO标签播放事件流水

HTML5 的 <video>标签有许多默认的事件，如果我们通过这个播放器加载一段视频文件，从开始加载到播放结束，都经历了哪些事件呢？这些事件的触发顺序如何？

[1]HTML5:onplay
[2]HTML5:onwaiting
[3]HTML5:ondurationchange
[4]HTML5:onloadedmetadata
[5]HTML5:onloadeddata
[6]HTML5:oncanplay
[7]HTML5:onplaying
[8]HTML5:oncanplaythrough
[9]HTML5:onended

事件详细说明：

onplay:

播放器不在保持“暂停”状态，即“play()”方法被调用或者autoplay属性设置为true期望播放器自动开始播放。

onwaiting:

播放由于下一帧数据未获取到导致播放停止，但是播放器没有主动预期其停止，仍然在努力的获取数据，简单的说就是在等待下一帧视频数据，暂时还无法播放。

ondurationchange：

duration(视频播放总时长)属性被更新。

onloadedmetadata：

获取视频meta信息完毕，这个时候播放器已经获取到了视频时长和视频资源的文件大小。

onloadeddata：

视频播放器第一次完成了当前播放位置的视频渲染。

oncanplay：

视频播放器已经可以开始播放视频了，但是只是预期可以正常播放，不保证之后的播放不会出现缓冲等待。

onplaying：

真正处于播放的状态，这个时候我们才是真正的在观看视频。

oncanplaythrough：

播放器认为从现在开始播放，直到播放结束，不再会因为等待后面的数据而出现缓冲等待。（注意，这个只是播放器根据网速和播放进度的预期估计，不代表后面的数据全部都预先缓冲完毕了，如果你手动推动控制栏的进度条，可能仍然会出现缓冲的，或者你后面网络断开了，一样没办法继续播放，除非是真的缓冲完了）

onended：

播放完毕。

更多事件说明请参阅：

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#mediaevents

转：http://popotang.com/blog/html5-video-events-list.html

转载于:https://www.cnblogs.com/shuaixf/archive/2013/02/05/2892932.html

HTML5 VIDEO标签播放事件流水相关推荐

[HTML5] Video 标签播放及控制视频
Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4 .webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识 ...
html video标签播放直播视频,HTML5 Video 标签播放及控制视频
Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4.webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识不 ...
HTML5 audio 标签播放事件流程
此代码包括了html5 audio 标签整个播放流程. 你可以暂停,调整音量,拖动进度条观察一下 var audio = new Audio(); document.body.appendChi ...
html5 video标签播放视频流解决方案
项目要求从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = &q ...
使用html5 video标签不自动播放视频问题（静音播放）
谷歌浏览器使用html5 video标签播放视频,已经加上属性 autoplay="autoplay" 却不自动播放,需要加上muted 静音才可以自动播放.但是问题是没有声音. ...
HTML5 video标签的播放控制
转自http://www.php.cn/html5-tutorial-402832.html 这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播 ...
html5 video 定位播放,HTML5 video标签的播放控制
这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长.播放.暂停.获取影片的播放时间和设置播放点.音量的获取和设置等内容,需要的朋友可以参考下上一篇介绍了html5标签v ...
html5视频播放器脚本怎么用,HTML5 video标签（播放器）学习笔记（一）:使用入门...
近有在学习html5中video标签(播放器)的使用,这里做一些学习笔记,方便自己查阅和记录,本文是第一篇,将介绍的是使用该标签初始化该做的哪些工作. 网上的教程其实也不少了 w3cschool里面的 ...
mp4 格式无法使用html5的video标签播放
只有视频编码为h264的视频才能在html5中使用video标签播放我的解决方法为:下载魔影工厂,按照如下图所示步骤操作: width:600px; 转载于:https://www.cnblogs ...

HTML5 VIDEO标签播放事件流水

HTML5 VIDEO标签播放事件流水相关推荐

最新文章

热门文章