HTML5 教程学习 - video元素标签
<video>元素由HTML5全新呈献，通过<video>标签，我们可以直接在页面中放置视频文件；该元素标签同样支持音频与图片。
目前支持<video>的浏览器还很有限，只有Safari 3.1+, Firefox 3.5+,Opera 10和Chrome等。
道上的兄弟们说IE9也将支持HTML5及其<video>标签；一切有待明年的MIX 10。
过去的方式
过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中：
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" />
<param name="allowfullscreen" value="true" />
<embed type="application/x-shockwave-flash" width="425" height="344"
src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true">
</embed>
</object>
这种方式要求浏览器安装有Flash插件，并支持JavaScript。
HTML5的方式
漂亮、简洁、最小化的代码！
<video>标签有如下几个常用属性：
- Autoplay: 用来设定视频是否在页面加载后自动播放。
- Src: 为视频指定文件链接或下载路径，当浏览器不支持<video>标签或发生某种播放错误时，可以提供给用户进行下载。
- Autobuffer: 用来设定视频是否自动缓冲；如果设定，那么页面加载之后，视频会自动下载缓冲，当用户点击播放按钮后，至少已经有一部分视频可以直接观看而无需等待了。
- Poster: 用来为视频设置一个“相框默认图片”性质的背景图片；当视频无法正常加载播放时可以向用户呈现。
- Controls: 用来设置是否为视频添加控制条，例如“播放”、“暂停”等；控制条的外观可以自定义。
- Loop: 用来设置视频是否循环播放。
- Width , Height: 用来控制视频的宽度与高度。
虽然<video>元素备受关注且大有潜力，不过距离被主流浏览器全面支持仍有待时日；目前，如果一定有必要使用<video>标签，我们可以使用类似如下的代码组合方式：
<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png">
<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param value="http://www.youtube.com/demo/google_main.mp4">
<param value="true">
<param value="false">
<embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360"
autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/">
</embed>
</object>
</video>
| < Prev | Next > |
|---|
