HTML5学习笔记之video标签

最新推荐文章于 2021-03-12 20:59:21 发布

zhxiong1994

最新推荐文章于 2021-03-12 20:59:21 发布

阅读量549

点赞数

文章标签： html5 video 标签

本文链接：https://blog.csdn.net/zhxiong1994/article/details/48661935

版权

HTML5学习笔记之video标签

在HTML5的新特性中增加了对原生视频文件的支持，可以在播放视频时无需Flash插件。

在页面中嵌入视频可以通过如下的简单代码实现：

<video src="foo.mp4"  width="300" height="200" controls>
    Your browser does not support the <video> element.   
</video>

不过对于有些浏览器来说，不支持有些格式的视频文件，我们可以通过如下的方式定义多种视频格式，浏览器在播放时会选择第一个支认可的格式进行播放。

<!DOCTYPE HTML>
<html>
    <body>
       <video  width="300" height="200" controls autoplay>
           <source src="/html5/foo.ogg" type="video/ogg" />
           <source src="/html5/foo.mp4" type="video/mp4" />
           Your browser does not support the <video> element.
       </video>
    </body>
</html>

在HTMl5的规范中，video标签可以通过一些属性控制外观和感觉以及各种控制功能：

height     这个属性以CSS像素的形式指定视频显示区域的高度。
width      这个属性以CSS像素的形式指定视频显示区域的宽度。
src        需要嵌入的视频的URL。可选参数，可以在video块中定义<source>元素定义需要嵌入的视频路径。
controls   指定是否显示播放控件，包括暂停、音量控制、快进和恢复播放。
loop       布尔值属性，true表示视频允许播放结束后自动回放。
preload    视频在载入页面时加载并准备就绪。如果指定自动播放就会自动忽略。
autoplay   布尔值属性，true表示只要没有停止加载数据，视频就会立刻开始自动播放。
autobuffer 布尔值属性，true表示即使没有设置自动播放，视频也会自动开始缓冲。
poster     这是一个图像 URL，显示到用户播放或快进。