HTML5 Video Doc【HTML5教程 - 第四篇】

2019-03-17 18:09|来源: 未知

HTML5 <video> -使用DOM控制video元素

HTML5 video元素也拥有方法,属性和事件。这里有播放,暂停和加载的相关方法,同时也拥有你可以操作的相关duration,volume和seeking属性。同时拥有当你开始播放,暂停和结束时通知你的DOM事件。

下面的在线演示将使用一个简单的方式来解释如何使用video元素来读取和设定属性,调用方法等。


在线演示


HTML5 video - 方法,属性和事件

下表中列出了大多数浏览器支持的video属性,方法和事件:

MethodsPropertiesEvents

durationtimeupdate

endedended

errorabort

pausedempty

mutedemptied

seekingwaiting

volumeloadedmetadata

height

width
canPlayTypevideoHeighterror
load()videoWidthprogress
pause()currentTimepause
play()currentSrcplay


注意:在所有的video属性中,只有videoWidth和videoHeight直接就可以使用,其它属性必须在视频加载完后才可以使用。


本文链接:HTML5教程 - 第四篇:HTML5 Video Doc,转自:http://www.gbin1.com/tutorials/html5-tutorial/html5-video-doc/

相关问答

更多

HTML5视频事件(HTML5 video events)

几个月前我创造了类似的东西: http://codepen.io/jonigiuro/pen/xnwJf 但我没有突出章节,而是在视频上添加文字。 这是通过默认的html5播放器和一些javascript实现的。 代码的重要部分是: this.createCaption = function( current ) { //Highlight the new chapter } this.destroyCaption = function( current ) { //Unhigh ...

检查html5视频是否准备就绪(Checking if a html5 video is ready)

我假设准备好播放意味着readyState属性等于HAVE_ENOUGH_DATA常量(数值为4)。 根据文档 ,当readyState属性变为此值时,应该触发canplay事件。 I assume that ready for playback means that the readyState property is equal to HAVE_ENOUGH_DATA constant (numeric value 4). According to the doc, when the read ...

适用于YouTube的HTML5

ClickToPlugin(又名ClickToFlash)Safari扩展程序能够用<video>替换YouTube嵌入。 也许它的代码可能有用。 它看起来很复杂,因为它处理了许多不同类型的嵌入,但也许你可以找出你的案例的具体结果 - 或者,创建一个嵌入了视频的网页,应用ClickToFlash,并查看它在Web中生成的结果督察。 Youtube's HTML5 embed code seems to work ok natively with iBooks on the iPad, withou ...

将Youtube视频源显示为HTML5视频标签?(Show Youtube video source into HTML5 video tag?)

步骤1:添加&html5=True到你最喜欢的YouTube网址 步骤2:在源代码中查找<video/>标签 步骤3:将controls="controls"添加到视频标签中: <video controls="controls"..../> 例: <video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" ...

如何改变html5视频的预览?(how to change a preview for html5 video?)

添加海报attribut到视频标签... <video controls="controls" poster="url_to_img.jpg"> <source src="1.webm" type="video/webm"> <source src="1.mp4" type="video/mp4"> </video> add poster attribut to video tag... <video controls="controls" poster="url_to_img.jpg"> <s ...

相关文章

更多

最近更新

更多