首页 > 代码库 > HTML5每日一练之视频标签的应用

HTML5每日一练之视频标签的应用

2024-07-12 16:28:55   221人阅读

与音频一样，在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了。


video标签：

 
IE9
FireFox 5.0
Safari 5.5
Chrome 12
Opera 11.5
Mpeg4
√
×
√
√
×
Ogg
×
√
×
√
√
WebM
×
√
×
√
√


Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件



video标签的属性有：

属性
值(可省略)
描述
src
url
要播放的视频的 URL，路径可为网络路径或相对路径。
controls
controls
向用户显示控件，比如播放按钮。
loop
loop
每当视频结束时重新开始播放。
preload
preload
视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
autoplay
autoplay
则视频在就绪后马上播放。
width
autoplay
则视频的宽度。
height
autoplay
则视频的高度。


注：video的属性与audio的属性基本一致，只不过多出了Width和height属性。



source子标签

此标签是用来指定视频的路径，一般存在此子标签的时候则不能再video中出现src属性，在不同的浏览器下对video标签有不同的视频支持，那么我们为了让其能够在不同的浏览器下播放，可以有多种视频格式，那么我们只需要加入此标签，来指定视频即可，浏览器则会是video播放所支持的视频格式。Source有两个属性，分别是：

属性
描述
src
要播放的视频的 URL，路径可为网络路径或相对路径。
type
视频类型



  1. <h1>请看视频，视频来自搜狗浏览器首页的实验室：</h1>
  2. <video width="600" height="400" controls="controls" autoplay="true">
  3.         <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4" type="video/mp4"/>
  4.         <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv" type="video/ogg"/>
  5. </video>


联系
我们