例

播放录像：

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

您的浏览器不支持 video 标签。

</video>

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。

注释：IE 8 或更早版本的 IE 浏览器不支持 <video> 标签。

标签定义及使用说明

<video> 标签定义视频，比如电影片段或其他视频流。

目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg。

• MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器

• WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器

• Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

音频格式的 MIME 类型

HTML 4.01 与 HTML5之间的差异

<video> 标签是 HTML5 的新标签。

提示和注释

提示：可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

可选属性

New：HTML5 中的新属性。

全局属性

<video> 标签支持 HTML 的全局属性。

事件属性

<video> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

TML5中的video标签用于播放视频文件的，在video标签中我们可以设置窗口的宽高，视频的自动播放，循环播放以及视频的封面图片等等

HTML5是下一代HTML，新增了许多新的标签，这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。接下来在文章中将为大家具体介绍如何使用video标签，具有一定的参考作用，希望对大家有所帮助

【推荐课程：HTML5教程】

HTML5 video标签的详细用法

用于播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样做的好处是一些低版本的浏览器就可以显示出不支持该标签的信息

例：

<video src="movie01.mp4" controls></video>

定义宽高

我们可以给这个视频自定义宽高来改变它的窗口大小

<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>

效果图：

自动播放

我们可以通过设置属性来让视频是否开启自动播放

（1）使用autoplay属性可以让浏览器加载完后视频文件后立即播放

<video width="400" height="300" controls autoplay>

<source src="movie01.mp4" type="video/mp4">

您的浏览器不支持 video 标签。

</video>

我们还可以在自动播放时设置muted状态，这样做的目的是当视频自动播放时会静音，而且我们还可以通过点击播放器的扬声器来开启声音

<video width="400" height="300" controls autoplay muted>

<source src="movie01.mp4" type="video/mp4">

您的浏览器不支持 video 标签。

</video>

效果图：

循环播放

我们可以使用loop属性让视频播放结束时，再从头开始循环播放。代码如下所示

<video width="400" height="300" controls loop>

<source src="movie01.mp4" type="video/mp4">

您的浏览器不支持 video 标签。

</video>

预加载媒体文件

设置preload属性中的不同属性值，来告诉浏览器应该怎样加载一个媒体文件：

auto：表示让浏览器自动下载整个文件

none：表示让浏览器不必预先下载文件

metadata：表示让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）

<video width="400" height="300" controls preload="auto">

<source src="movie01.mp4" type="video/mp4">

您的浏览器不支持 video 标签。

</video>

设置视频的封面图片

通过poster属性可以设置视频的封面图片，浏览器在下面三种情况下会使用这个图片：

（1）视频第一帧未加载完毕

（2）把preload属性设置为none

（3）没有找到指定的视频文件

<video width="400" height="300" controls preload="none" poster="images/5.jpg">

<source src="movie01.mp4" type="video/mp4">

您的浏览器不支持 video 标签。

</video>

效果图：

总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以帮助大家学会去使用video标签。

以上就是HTML5中video标签如何使用的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

1. mbed是针对非IE的浏览器的媒体播放器
2. object标签一般是在IE中用的。非IE很少支持object。
3. 所以object与embed同时出现，为的就是兼容不同的浏览器。
4. video是html5出的一种新标准，但并不是所有的浏览器都支持。
5. video虽然号称可以支持三种媒体类型，但常用的只有mp4。

embed和object有一个特点，就是无法动态渲染，所以无法通过jQuery去操作dom实现数据加载，要改变数据，可以重新筛一遍达到效果