织梦模板建站、织梦仿站，推荐选跟版网(专业织梦模板定制下载站)，您可以把织梦模板网：
亲，跟版网是专业的DEDECMS模板下载和定制开发服务商！您可以选择或者
HTML5 Video标签的属性、方法和事件汇总介绍
& &以下内容您可能感兴趣： &
前段时间写了一个基于html5 video的视频播放器，从起初的对其不了解，然后到能够写一个基本完善的自定义播放器。在这个过程中，对video标签的属性，方法，事件有了个全面的认识。下面分类列出来一下。
&video&标签的属性代码如下:src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度
html 代码代码如下: &video id="media" src="http://www.genban.org/test.mp4" controls width="400px" heigt="400px"&&/video&
//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象
获取video对象代码如下:Media = document.getElementById("media"); Media方法和属性：
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
代码如下:Media. //null:正常Media.error. //1.用户终止 2.网络错误 3.解码错误 4.URL无效&strong&//网络状态&/strong& - Media.currentS //返回当前资源的URL- Media.src = //返回或设置当前资源的URL- Media.canPlayType(type); //是否能播放某种格式的资源- Media.networkS //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源- Media.load(); //重新加载src指定的资源- Media. //返回已缓冲区域，TimeRanges- Media. //none:不预载 metadata:预载资源信息 auto:&/p&
&p&&strong&//准备状态&/strong& - Media.readyS//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA- Media. //是否正在seeking&/p&
&p&&strong&//回放状态&/strong&&/p&
&p&Media.currentTime = //当前播放的位置，赋值可改变位置Media.startT //一般为0，如果为流媒体或者不从0开始的资源，则不为0Media. //当前资源长度 流返回无限Media. //是否暂停Media.defaultPlaybackRate =//默认的回放速度，可以设置Media.playbackRate =//当前播放速度，设置后马上改变Media. //返回已经播放的区域，TimeRanges，关于此对象见下文Media. //返回可以seek的区域 TimeRangesMedia. //是否结束Media.autoP //是否自动播放Media. //是否循环播放Media.play(); //播放Media.pause(); //暂停&strong&//视频控制&/strong&&/p&
&p&Media.//是否有默认控制条Media.volume = //音量Media.muted = //静音TimeRanges(区域)对象TimeRanges. //区域段数TimeRanges.start(index) //第index段区域的开始位置TimeRanges.end(index) //第index段区域的结束位置&strong&//相关事件&/strong&&/p&
var eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e)
},false); }eventTester("loadstart"); //客户端开始请求数据eventTester("progress"); //客户端正在请求数据eventTester("suspend"); //延迟下载eventTester("abort"); //客户端主动终止下载（不是因为错误引起）eventTester("loadstart"); //客户端开始请求数据eventTester("progress"); //客户端正在请求数据eventTester("suspend"); //延迟下载eventTester("abort"); //客户端主动终止下载（不是因为错误引起），eventTester("error"); //请求数据时遇到错误eventTester("stalled"); //网速失速eventTester("play"); //play()和autoplay开始播放时触发eventTester("pause"); //pause()触发eventTester("loadedmetadata"); //成功获取资源长度eventTester("loadeddata"); //eventTester("waiting"); //等待数据，并非错误eventTester("playing"); //开始回放eventTester("canplay"); //可以播放，但中途可能因为加载而暂停eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕eventTester("seeking"); //寻找中eventTester("seeked"); //寻找完毕eventTester("timeupdate"); //播放时间改变eventTester("ended"); //播放结束eventTester("ratechange"); //播放速率改变eventTester("durationchange"); //资源长度改变eventTester("volumechange"); //音量改变
跟版网-专业织梦模板下载平台，转载请注明出处：
& &精心为您推荐： &
& &邀您关注： &
扫描左侧二维码即可在手机端访问此页面
扫描左侧二维码即可关注跟版网官方微信公众号，获取金币模板，还可以免费仿站哦！
扫描左侧二维码即可加入跟版网官方群，免费获取金币资源并可以与其他织梦高手共同交流学习
跟版网率先实现织梦的三网合一网站，从即日起（）日，跟版网会陆续免费分享一批金币资源给需要的朋友，关注本站认证官方微信公众账号并回复相应的提取码，系统会自动将下载地址发送给您，同时这些金币资源也会分享在官方的QQ群中，欢迎各位朋友踊跃加入。另外本站后期会每周选择大家比较喜欢的网站仿制，并免费分享给大家，还有免费送金币活动哦！
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
- dede源码分享
售价:0金币
- dede源码分享
售价:20金币
- dede源码分享
售价:0金币
- dede源码分享
售价:40金币
- dede源码分享
售价:20金币
& & & 跟版网竭力打造中国最大的织梦源码和织梦模板商城，我们有一批经验丰富的设计师和程序员，发展五年，跟版网拥有丰富的织梦模板，欢迎您的咨询，我们将竭诚为您提供最优质的服务。
& & & 跟版网织梦源码商城坚持“创意+品质+服务”的高端理念，运用创意设计的理念为您塑造高品质的网络品牌形象。凭借五年的探索和实践，跟版网织梦源码商城拥有一支经验丰富、技术精湛、尽职尽责的网络服务团队。精品网站建设，从跟版网织梦源码商城建站开始。
& & & 跟版网织梦源码和模板可分为两种形式获得，一种是官方源码，另外一种是会员共享源码。两种源码都分为免费和收费两种形式。
& & & 跟版网官方收费源码可通过支付费用获得，具体操作流程可查看网址：。会员共享源码可通过共享模板获取金币下载。如觉得麻烦，可以联系客服QQ：进行金币充值，充值后可随意下载。HTML 5 &video& 标签现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。
Video标签的使用
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性， 以及一个内部使用的标签&source&。Video标签内除了可以包含&source&标签外，还可以包含当指定的视频都不能 播放时，返回的内容。
(1) src属性和poster属性
你能想象src属性是用来干啥的。跟&img&标签的一样，这个属性用于指定视频的地址。而poster属性用于指定一张图片，在当前视频数据无效时显示（预览图）。视频数据无效可能是视频正在加载，可能是视频地址错误等等。
&video width="658" height="444" src="/images/first.mp4" poster="/images/first.png" autoplay="autoplay"&&/video&
(2) preload属性
这个属性也能通过名字了解用处，此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。
&video width="658" height="444" src="/images/first.mp4" poster="/images/first.png" autoplay="autoplay" preload="none"&&/video&
None：不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求。
Metadata：部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等）。
Auto：全部预加载。
(3) autoplay属性
又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放，是一个布尔属性。当出现时，表示自动播放，去掉是表示不自动播放。
&video width="658" height="444" src="/images/first.mp4" poster="/images/first.png" autoplay="autoplay" preload="none"&&/video&
注意，HTML中布尔属性的值不是true和false。正确的用法是，在标签中使用此属性表示true，此时属性要么没有值，要么其值恒等于他的名字 （此处，自动播放为&video autoplay /&或者&video autoplay=&autoplay& /&）；而在标签中不使用此属性表示false（此处不进行自动播放为&video /&）。
&(4) loop属性
&video width="658" height="444" src="/images/first.mp4" poster="/images/first.png" autoplay="autoplay" loop="loop"&&/video&
一目了然，loop属性用于指定视频是否循环播放，同样是一个布尔属性。
(5) controls属性
&video width="658" height="444" src="/images/first.mp4" poster="/images/first.png" autoplay="autoplay" preload="none" controls="controls"&&/video&
Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器，需要浏览器启用本身的播放控制栏。
控制栏须包括播放暂停控制，播放进度控制，音量控制等等。
每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题，Firefox和Safari的Video标签不正常，所以这两个只能在网上找截图了。
(6) width属性和height属性
属于标签的通用属性了，这个不用多说。
(7) source标签
&video width="658" height="444" poster="/images/first.png" autoplay="autoplay" preload="none" controls="controls"&&source src="/images/first.ogv" /&&source src="/images/first.ogg" /&&/video&
Source标签用于给媒体（因为audio标签同样可以包含此标签，所以这儿用媒体，而不是视频）指定多个可选择的（浏览器最终只能选一个）文件地址，且只能在媒体标签没有使用src属性时使用。
浏览器按source标签的顺序检测标签指定的视频是否能够播放（可能是视频格式不支持，视频不存在等等），如果不能播放，换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义，不能单独出现。
此标签包含src、type、media三个属性。
src属性：用于指定媒体的地址，和video标签的一样。
Type属性：用于说明src属性指定媒体的类型，帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
Media属性：用于说明媒体在何种媒介中使用，不设置时默认值为all，表示支持所有媒介。你想到&style&标签的media属性了么？一样一样一样的。
(8) 一个完整的例子
&video width="658" height="444" poster="/images/first.png" autoplay="autoplay" preload="none" controls="controls"&&source src="/images/first.ogv" /&&source src="/images/first.ogg" /&&/video&
这段代码在页面中定义了一个视频，此视频的预览图为poster的属性值，显示浏览器的默认媒体控制栏，预加载视频的元数据，循环播放，宽度为900像素，高度为240像素。
第一选择视频地址为第一个source标签的src属性值，视频类别为Ogg视频，视频编码译码器为Theora，音频编码译码器为Vorbis，播放媒 介为显示器；第二选择视频地址不再累述。如果你还要兼容IE的话，可以在最后一个source标签后再加上Flash播放器的标签集，或者使用一点 JavaScript代码。
阅读(...) 评论()> HTML5的Video标签详细说明手册
HTML5的Video标签详细说明手册
1 Video介绍
引用我翻译文档《在HTML5页面中嵌入音频和视频》中的介绍文字：&当今，在网页上嵌入视频且所有用户不管使用任何浏览器或者操作系统都能看到的唯一可靠方法是使用Flash。这需要Adobe Flash插件，并且结合&object&和&embed&标签。
大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签&video&带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。
不幸的是，视频并非那么简单。不仅仅是浏览器需要理解&video&标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。
总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。
面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML 5规范中没有特别指名或规定的视频编码解码器。&好吧，引用到这儿。
如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。
苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。
说了这么多，其实说到底就是，现在如果要在页面中使用&video&标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。
好吧，现在让我们从技术层面来认识HTML 5的视频，包括&video&标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。