站内搜索

HTML 5 视频(video)

video 元素支持三种视频格式

IEFirefoxOperaChromeSafari
带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件No3.5+10.5+5.0+No
带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件9.0+NoNo5.0+3.0+
带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件No4.0+10.6+6.0+No

1、设置一个ogg格式的文件

执行如下:

当浏览器不支持ogg格式时则显示“您的浏览器不支持 video 标签。”

2、设置多种格式

执行如下:

如上图为视频设置一个默认图片。也可以添加其他属性。

controls/controls="controls" 显示播放按钮
autoplay/autoplay="autoplay" 立即播放
loop/loop="loop" 循环播放
muted/muted="muted" 静音
preload/preload="preload" 加载视频d
poster="路径" 显示默认图片

3、自定义播放暂停及大小(Video + DOM)


将javascript写在html的下方

执行如下:

大多数浏览器支持的视频方法、属性和事件(日后在做理解)

方法属性事件
play()currentSrcplay
pause()currentTimepause
load()videoWidth立即执行--视频元素前执行progress
canPlayType()videoHeight立即执行--视频元素前执行error
durationtimeupdate
endedended
errorabort
pausedempty
mutedemptied
seekingwaiting
volumeloadedmetadata
height
width

下方为html5 视频和音频的方法属性和事件参考

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

  • 上一篇:CSS实现DIV超长截断,并显示...
  • 下一篇:关于css的默认宽度