video标签_html/css_WEB-ITnose-html教程-PHP中文网

video标签_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:47:45

原创

1399人浏览过

video

通过video标签，我们可以抛弃最近不怎么讨好的flash，直接在页面中播放视频文件。视频文件自然是最符合语义化的文件格式，但该元素标签同样支持音频与图片。

过去(及目前)，我们通常要使用类似下面这样繁冗丑陋的代码来将视频放置在页面中，但这种方式要求浏览器安装有Flash插件，并支持JavaScript：

<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></object>

登录后复制

HTML5的方式：

<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer><p>Try this page in Safari  4! Or you can<a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>instead.</p></video>

登录后复制

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></object></video>

登录后复制

HTML5学习笔记简明版（4）：新元素之video,audio,meter,datalist,keygen,output

HTML video 标签

HO8001: 各浏览器下使用 OBJECT 元素和 EMBED 元素嵌入 Flash 存在差异