如何使用HTML5中video标签

小灰灰 2020-06-09 15:36 1086阅读 0赞

# 如何使用HTML5中video标签

**HTML5 video标签的详细用法**

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

**例：**

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

**定义宽高**

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

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

**效果图：**

![img](https://img.php.cn/upload/article/000/000/028/5c74b2a65ccfa889.png)

**自动播放**

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

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

```html
<video width="400" height="300" controls autoplay>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
```

![GIF.gif](https://img.php.cn/upload/image/427/886/171/1551152532369325.gif)

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

```html
<video width="400" height="300" controls autoplay muted>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
```

**效果图：**

![](/images/1591716736003.png)

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

```html
<video width="400" height="300" controls loop>
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
```

**预加载媒体文件**

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

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

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

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

```html
<video width="400" height="300" controls preload="auto">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
```

**设置视频的封面图片**

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

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

（2）把preload属性设置为none

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

```html
<video width="400" height="300" controls preload="none" poster="images/5.jpg">
  <source src="movie01.mp4" type="video/mp4">
  您的浏览器不支持 video 标签。
</video>
```

**效果图：**

![](/images/1591716957786.png)

如何使用HTML5中video标签

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML5 的 video 标签，实现简易播放器

相关 html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例

相关 HTML5 Audio/Video 标签,属性,方法,事件汇总

相关 HTML 5 video 视频标签全属性详解

相关 html5 video视频标签自适应手机样式

相关 html中控制video标签全屏

相关 HTML5中video元素

相关如何使用HTML5新增标签（二）

相关 html5之video

相关如何使用HTML5中video标签