|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
就在新标准备受瞩目之际，两大网络监督机构却起冲突。破洛洛文章简介：HTML5Video概述.
1Video先容
援用我翻译文档《在HTML5页面中嵌进音频和视频》中的先容笔墨：“现今，在网页上嵌进视频且一切用户不论利用任何扫瞄器大概操纵体系都能看到的独一牢靠办法是利用Flash。这必要AdobeFlash插件，而且分离<object>和<embed>标签。
年夜多半用户已安装了Flash插件（现实上，也许95%的上彀用户都装有Flash的某个版本），但HTML5的撑持者正在推进一个开放的，不必要任何插件的视频尺度。这就是HTML5的新标签<video>带来的构思，他供应了一个嵌进视频（和与其交互）而不必要相似Flash的公有插件的办法。
不幸的是，视频并不是那末复杂。不单单是扫瞄器必要了解<video>标签，并且必要一个需要的编码译码器来播放视频。分明的办理办法只能是HTML5标准的创作发明者们选择一个视频编码译码器，而且让每个扫瞄器打造商实行。
总之，这就是所保举的盘算。同时，这也是引发凌乱的导火索。关于林林总总编码译码器的争辩就已很烦杂了，但更喜剧的事变是，扫瞄器打造商们还不克不及就此告竣一致。苹果不肯意利用发起的OggTheora编码译码器，但Opera和Mozilla也不肯意付出因为他们的扫瞄器装载H.264编码译码器而酿成的允许用度。Google同时撑持二者，微软面临争辩，远远的置身事外，由于他如今基本没有企图往撑持HTML5的视频元素。
面临扫瞄器打造商的对峙场合排场，HTML5好心的专制者IanHickson甩了甩他的手并说到往他妈的。以是HTML5标准中没有出格指名或划定的视频编码解码器。”好吧，援用到这儿。
现在的情形是，微软终究陷出来了，但很喜剧的是，在IE9中只撑持H.264。同时，Googe终究在I/O年夜会上公布了开源的视频封装格局webM和视频编码格局VP8。Opera、Mozilla、Chrome公布将完整撑持VP8，IE公布部分撑持（必要装一个插件，但假如我没记错的话，HTML5的一个愿景就是离开扫瞄器插件，微软真是让人以为喜剧）。
苹果断定不撑持VP8，乔布斯以为VP8在质量或效力方面不如H.264，不克不及满意其产物的请求。别的最新动静标明VP8另有大概牵涉到专利的成绩（假如真的侵占专利的话，Opera和Firefox估量即刻会忽视VP8的）。
说了这么多，实在说究竟就是，如今假如要在页面中利用<video>标签，必要思索三种情形，撑持OggTheora大概VP8（假如这玩艺儿没失事的话）的（Opera、Mozilla、Chrome），撑持H.264的（Safari、IE9、Chrome），都不撑持的（IE6、7、8）。
好吧，如今让我们从手艺层面来熟悉HTML5的视频，包含<video>标签的利用，视频工具能够用到的前言属性和办法，和前言事务。
2Video标签的利用
Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，和一个外部利用的标签<source>。
Video标签内除能够包括<source>标签外，还能够包括当指定的视频都不克不及播放时，前往的内容。
2.1src属性和poster属性
你能设想src属性是用来干啥的。跟<img>标签的一样，这个属性用于指定视频的地点。
而poster属性用于指定一张图片，在以后视频数据有效时显现（预览图）。视频数据有效多是视频正在加载，多是视频地点毛病等等。
2.2preload属性
这个属性也能经由过程名字懂得用途，此属性用于界说视频是不是预加载。属性有三个可选择的值：none、metadata、auto。假如不利用此属性，默许为auto。
None：不举行预加载。利用此属性值，多是页面制造者以为用户不希冀此视频，大概削减HTTP哀求。
Metadata：部分预加载。利用此属性值，代表页面制造者以为用户不希冀此视频，但为用户供应一些元数据（包含尺寸，第一帧，曲目列表，延续工夫等等）。
Auto：全体预加载。
2.3autoplay属性
又是一个看名字晓得用途的属性。Autoplay属性用于设置视频是不是主动播放，是一个布尔属性。当呈现时，暗示主动播放，往失落是暗示不主动播放。
注重，HTML中布尔属性的值不是true和false。准确的用法是，在标签中利用此属性暗示true，此时属性要末没有值，要末其值恒即是他的名字（此处，主动播放为<videoautoplay/>大概<videoautoplay=”autoplay”/>）；而在标签中不利用此属性暗示false（此处不举行主动播放为<video/>）。
2.4loop属性
一览无余，loop属性用于指定视频是不是轮回播放，一样是一个布尔属性。
2.5controls属性
Controls属性用于向扫瞄器指明页面制造者没有利用剧本天生播放把持器，必要扫瞄器启用自己的播放把持栏。
把持栏须包含播放停息把持，播放进度把持，音量把持等等。
破洛洛文章简介：HTML5Video概述.
每一个扫瞄器默许的播放把持栏在界面上纷歧样。因为我扫瞄器的诡异成绩，Firefox和Safari的Video不一般，以是这两个只能在网上找截图了。
2.6width属性和height属性
属于标签的通用属性了，这个不必多说。
2.7source标签
Source标签用于给媒体（由于audio标签一样能够包括此标签，以是这儿用媒体，而不是视频）指定多个可选择的（扫瞄器终极只能选一个）文件地点，且只能在媒体标签没有利用src属性时利用。
扫瞄器按source标签的按次检测标签指定的视频是不是可以播放（多是视频格局不撑持，视频不存在等等），假如不克不及播放，换下一个。此办法多用于兼容分歧的扫瞄器。Source标签自己不代表任何寄义，不克不及独自呈现。
此标签包括src、type、media三个属性。
src属性：用于指定媒体的地点，和video标签的一样。
Type属性：用于申明src属性指定媒体的范例，匡助扫瞄器在猎取媒体前判别是不是撑持此种别的媒体魄式。详细的属性值，请拜见W3C的文档。
Media属性：用于申明媒体在何种前言中利用，不设置时默许值为all，暗示撑持一切前言。你想到<style>标签的media属性了么？一样一样一样的。
2.8一个完全的例子
这段代码在页面中界说了一个视频，此视频的预览图为poster的属性值，显现扫瞄器的默许媒体把持栏，预加载视频的元数据，轮回播放，宽度为900像素，高度为240像素。
第一选择视频地点为第一个source标签的src属性值，视频种别为Ogg视频，视频编码译码器为Theora，音频编码译码器为Vorbis，播放前言为显现器；第二选择视频地点不再累述。
假如你还要兼容IE的话，能够在最初一个source标签后再加上Flash播放器的标签集，大概利用一点JavaScript代码。详细能够检察这篇文章。
3前言属性
前言属性包含error、currentsrc、networkState、preload、buffered、readyState、seeking、currentTime、startTime、duration、paused、defaultPlaybackRate、playbackRate、played、seekable、ended、autoplay、loop、controls、volume、muted等，能够用于前往或改动前言的形态。
注重：以下利用到的“media”一致代表一个视频元素。以下图所示：
3.1error属性
只读属性。利用media.error前往一个MediaError工具标明以后的毛病形态，假如没有堕落，前往null。
利用media.error.code前往前言的毛病形态，共有4个大概值。
MEDIA_ERR_ABORTED（数字值为1）：媒体资本猎取非常；
MEDIA_ERR_NETWORK（数字值为2）：收集毛病；
MEDIA_ERR_DECODE（数字值为3）：媒体解码毛病；
MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：视频格局被不撑持。
3.2currentSrc属性
只读属性。利用media.currentSrc前往该前言标签的src属性值。
3.3networkState属性
只读属性。利用media.networkState前往前言的收集形态，共有4个大概值。
NETWORK_EMPTY（数字值为0）：还没有初始化；
NETWORK_IDLE（数字值为1）：加载完成，收集余暇；
NETWORK_LOADING（数字值为2）：视频加载中；
NETWORK_NO_SOURCE（数字值为3）：加载失利。
破洛洛文章简介：HTML5Video概述.
3.4preload属性
可读写属性。利用media.preload前往前言标签的preload属性值，大概对其举行赋值，改动前言标签的preload属性值。
3.5buffered属性
只读属性。利用media.buffered前往一个TimeRanges工具，确认扫瞄器已缓存前言文件。
3.6readyState属性
只读属性。利用media.readyState前往前言以后播放地位的停当形态，共有5个大概值。
HAVE_NOTHING（数字值为0）：以后播放地位无无效前言资本；
HAVE_METADATA（数字值为1）：加载中，前言资本确认存在，但以后地位没有可以加载到无效前言数据举行播放；
HAVE_CURRENT_DATA（数字值为2）：已猎取到以后播放数据，但没有充足的数据举行播放；
HAVE_FUTURE_DATA（数字值为3）：已猎取到后续播放数据，能够举行播放；
HAVE_ENOUGH_DATA（数字值为4）：能够举行播放，且扫瞄器确认媒体数据以某一种速率举行加载，能够包管有充足的后续数据举行播放，而不会使扫瞄器的播放进度遇上加载数据的末了。
3.7seeking、seekable属性
均为只读属性。
利用media.seeking前往一个布尔值，标明扫瞄器是不是正在哀求数据，ture暗示扫瞄器正在哀求数据，false暗示扫瞄器已中断哀求。
利用media.seekable发扬一个TimeRanges工具，标明能够对以后前言资本举行哀求。
3.8currentTime、startTime、duration属性
三者的值均为工夫，单元为秒，currentTime为可读写属性，其他两个均为只读属性。
利用media.currentTime前往以后前言的播放地位，大概对其赋值，改动前言的播放地位。
关于利用media.currentTime的时分，假如前往的工夫超越了扫瞄器的哀求才能，将抛出一个INDEX_SIZE_ERR非常；假如没有选中的媒体资本，将抛出一个INVALID_STATE_ERR非常。
利用media.startTime前往前言文件播放的入手下手工夫，一般为0。
利用media.duration前往前言文件总的播放时长。
3.9played、paused、ended属性
三者均为只读属性。
利用media.played前往一个TimeRanges工具，标明扫瞄器已播放的前言资本局限。
利用media.paused前往一个布尔值，标明前言是不是停息播放，ture暗示前言停息播放，false暗示前言正在播放。
利用media.ended前往一个布尔值，标明前言是不是已停止，ture暗示前言已播放终了，false暗示还未播放终了。
3.10defaultPlaybackRate、playbackRate属性
二者均为可读写属性。
利用media.defaultPlaybackRate前往前言默许的播放速度，或对其赋值，改动前言的默许播放速度。
利用media.playbackRate前往以后的前言播放速度，或对其赋值，改动以后的前言播放速度。
3.11autoplay、loop属性
二者均为可读写属性。
利用media.autoplay前往一个布尔值，标明以后前言是不是设置了主动播放，ture暗示以后前言为主动播放，false暗示非主动播放，或对其赋值，设置是不是主动播放。
利用media.loop前往一个布尔值，标明以后前言是不是设置了轮回播放，ture暗示以后前言设置了轮回播放，false暗示没有设置轮回播放，或对其赋值，设置是不是轮回播放。
3.12controls、volume、muted属性
三者均为可读写属性。
利用media.controls前往一个布尔值，标明以后前言是不是利用了扫瞄器默许的播放把持栏，ture暗示加载了，false暗示没有加载，或对其赋值，设置是不是利用扫瞄器默许的播放把持栏。
利用media.volume前往以后前言的音量值，或对其赋值，改动前言的播放音量，局限为0到1，0相称于静音，1为最年夜音量。
利用media.muted前往一个布尔值，标明以后前言播放是不是开启静音，ture暗示没有开启静音，false暗示静音，或对其赋值，设置播放是不是静音。
4前言办法
4.1play()、pause()、load()办法
利用media.play()播放视频，并会将media.paused的值强行设为false。
利用media.pause()停息视频，并会将media.paused的值强行设为ture。
利用media.load()从头载进视频，并会将media.playbackRate的值强行设为media.defaultPlaybackRate的值，且强即将media.error的值设为null。
4.2canPlayType（type）办法
利用canPlayType（type）办法测试扫瞄器是不是撑持特定的前言范例。个中，type参数和1.1.7节中先容的type属性是不异的。
办法前往3个大概值（均为扫瞄器判别的了局）。
空字符串：扫瞄器不撑持此种媒体范例；
maybe：扫瞄器大概撑持此种媒体范例；
probably：扫瞄器断定撑持此种媒体范例。
破洛洛文章简介：HTML5Video概述.
5前言事务
前言事务能够感化于各类前言元素，如视频、音频、图片等，次要包含loadstart、progress、suspend、abort、error、emptied、stalled、play、pause、loadedmetadata、loadeddata、waiting、playing、canplay、canplaythrough、seeking、seeked、timeupdate、ended、ratechange、durationchange、volumechange等事务。
5.1事务处置体例
一样平常有两种体例处置事务。
一种是监听的体例：addEventListener（“事务名”，处置函数，处置体例）。比方，假如必要在扫瞄器对前言举行播放时实行begin_playing函数，那末能够如许，media.addEventListener（“play”，begin_playing，false）。
另外一种是间接赋值的体例：on工夫名=处置函数，这是我们绝对用的较多的办法，也就是“当XXX事务触发时”。比方，要举行和下面不异的处置，能够如许media.onplay=begin_playing。
5.2事务先容
loadstart事务：扫瞄器入手下手哀求前言；
progress事务：扫瞄器正在猎取前言；
suspend事务：扫瞄器非自动猎取前言数据，但没有加载完全个前言资本；
abort事务：扫瞄器在完整加载前中断猎取前言数据；
error事务：猎取前言数据堕落；
emptied事务：前言元素的收集形态俄然变成未初始化；
stalled事务：扫瞄器猎取前言数据非常；
play事务：行将入手下手播放
pause事务：停息播放
loadedmetadata事务：扫瞄器猎取完前言资本的时长和尺寸
loadeddata事务：已加载以后播放地位的前言数据；
waiting事务：播放因为下一帧有效（比方未加载）罢了中断（但扫瞄器确认下一帧会即刻无效）；
playing事务：已入手下手播放
canplay事务：扫瞄器可以入手下手前言播放，但估量以以后速度播放不克不及间接将前言播放完（播放时代必要缓冲）；
canplaythrough事务：扫瞄器估量以以后速度间接播放能够间接播放完全个前言资本（时代不必要缓冲）；
seeking事务：扫瞄器正在哀求数据（seeking属性值为true）；
seeked事务：扫瞄器中断哀求数据（seeking属性值为false）；
timeupdate事务：以后播放地位（currentTime属性）改动；
ended事务：播放因为前言停止而中断；
ratechange事务：默许播放速度（defaultPlaybackRate属性）改动或播放速度（playbackRate属性）改动；
durationchange事务：前言时长（duration属性）改动；
volumechange事务：音量（volume属性）改动或静音（muted属性）。
6Video结束
W3C网站上有一个关于HTML5视频的举例，很好的申明了一切后面先容的标签的利用，属性和办法和事务的使用，十分直不雅。任意还能够经由过程这个页面检察扫瞄器对HTML5视频各个方面的撑持情形。
文档的第一章，关于HTML5视频的相干常识背景和手艺标准就差未几先容完了，整章的内容不是笔墨就是代码，有图也几近是代码截图。后续还会有第二章、第三章……HTML5引进了良多壮大的新内容，我们有良多器材必要往进修。进修的历程相称单调，写文档也是云云，但愿有同砚能按按次看到这儿，感激你的耐烦浏览。等候HTML5能早日提高，给互联网带来奇怪血液。
</p>
历经多年来的停滞不前，如今全球信息网联盟(WorldWideWebConsortium，W3C)重拾HTML标准化。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:15:20
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主