HTML入门：05HTML多媒体

Corone

已于 2024-03-02 20:06:23 修改

阅读量1.7k

点赞数 24

分类专栏： # HTML 文章标签： html 前端

于 2024-03-02 15:34:55 首次发布

本文链接：https://blog.csdn.net/ZYB1300704781/article/details/136416497

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML入门：05HTML多媒体

1 video标签
2 audio标签

在早期版本的HTML语言中，对多媒体内容的实现并不灵活，而在HTML5中直接用video和audid就能实现视频和音频的播放，且相应标签的属性更易理解。

1 video标签

首先来看视频标签video的使用，在编辑器中已经有了HTML5基本代码后，直接输入video标签在页面中添加视频。

示例：在body标签中添加一对video标签，并在video后面添加src属性来指定需要播放的文件路径和名称，保存刷新后可以看到浏览器中多了一个视频文件。

<!doctype html>
<html>
    <head>
        <meta charset='UTF-8'  />
        <title>video示例</title>
    </head>
    <body>
        <video src="video/video1.mp4"></video>
    </body>
</html>

请添加图片描述

然而这个视频文件看起来跟一幅静态图片一样，既不会播放，也看不见任何的控制按钮，这就需要讲到video标签的属性。

对于video标签而言，可以在其后添加多个属性以处理添加的视频，比如刚才添加的video标签只写了一个属性，就是src(这是单词source(源)的缩写)，这里我们只是给出了浏览器需要播放的视频的位置与文件名称，但并没有播放视频，所以显示成一张静态图片的样子，而它其实是这个视频文件的第一帧，也就是视频的第一幅图片，下列表格列出了video标签中的常用属性。

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用“autoplay"，则忽略该属性。
src	url	要播放的视频的URL。
width	pixels	设置视频播放器的宽度。
poster	url	规定在用户点击播放按钮前显示的图像。
muted	muted	规定视频的音频输出应该被静音。

src属性刚才已经介绍过了，下面重点介绍其他属性。

1.1 控制按钮：controls

首先，对于用户而言，视频播放需要有按钮，controls属性就是用来添加播放按钮的。

<video src="video\video1.mp4" controls="controls"></video>

请添加图片描述

可以看到，controls属性添加后可以看到播放键，通过它可以控制视频的播放和暂停。

1.2 宽度和高度：width和heightt

目前我们没有对视频的宽度和高度进行任何的设置。因此，默认播放的尺寸是视频的原始尺寸，如果要调整这个尺寸，可以通过添加width和height这两个属性。

<video src="video\video1.mp4" controls="controls" 
width="640" height="360"></video>

请添加图片描述

1.3 预载：preload

如果需要让视频在播放之前预先载入到本地，可以通过添加preload的属性来实现。

在网络上观看流媒体视频的时候，会看到视频在播放的同时播放器上的进度条会比实际播放的进度稍快，这是因为在播放的同时，视频也在加载后续的帧，使视频看起来更加流畅。

<video src="video\video1.mp4" controls="controls" 
width="640" height="360" preload="auto"></video>

请添加图片描述

由于演示用的视频文件在本地，所以下载速度很快，看不太出来加载的效果，大家可以用远程服务器上的视频来进行测试。

1.4 静音：muted

如果需要视频刚开始播放的时候是静音状态，需要添加muted属性。

<video src="video\video1.mp4" controls="controls" 
width="640" height="360" preload="auto" muted></video>

请添加图片描述

可以看到此时视频已被设置成了静音状态。

1.5 自动播放：autoplay

可以添加autoplay属性实现自动播放，而不需要点击播放按钮。

<video src="video\video_1.mp4" controls="controls" 
width="500" height="500" preload="auto" muted autoplay="autoplay"></video>

1.6 无限循环：loop

还可以加上loop属性让视频无限循环播放。

<video src="video\video_1.mp4" controls="controls" 
width="500" height="500" preload="auto" muted autoplay="autoplay" loop="loop"></video>

1.7 poster

如果没有autoplay属性，只要不点击播放键，视频会一直停留在第一帧。

如果希望用户在视频开始播放之前，看见一张静态图片就知道视频大概会播放什么内容，或者做一张海报放在视频开头，poster属性可以做到。

首先输入poster，在其后添加图片所在路径及名称。

<video src="video\video_1.mp4" controls="controls" 
width="500" height="500" preload="auto" muted autoplay="autoplay" loop="loop" 
poster="img\img1.png"></video>

2 audio标签

audio标签用于播放音频文件，常用属性如下表所示。

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则当音频结束时重新开始播放。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用“autoplay"，则忽略该属性。
src	url	要播放的音频的URL。
muted	muted	规定音频的输出应该被静音。