HTML中如何设置音频和视频.

Happy Moment!

已于 2023-12-21 16:59:17 修改

阅读量442

点赞数 8

文章标签： html 音视频前端

于 2023-12-11 10:36:47 首次发布

本文链接：https://blog.csdn.net/2301_78753262/article/details/134920952

版权

前言

主要是视频的标签的属性和使用方法。

html中插入音频和视频的方法基本相同，这里以音频为例进行演示

音频格式：mp3、ogg、wav

视频格式：mp4、ogv、webm
编解码器
音频和视频编码/解码是一组算法，用来对一段特定音频或视频进行解码和编码，以便音频和视频能够播放。原始的媒体文件体积非常巨大，如果不对其进行编码，那么数据量是非常惊人的，在互联网上传播则要耗费无法忍受的时间；如果不对其进行解码，就无法将编码后的数据重组为原始的媒体数据。主流的音频编解码器：AAC、MPEG-3、Ogg Voribs，

视频编解码器：H.264、VP8、Ogg Theora。

1.video 视频元素

以往的视频播放，需要借助Flash插件才可以实现。但Flash插件不稳定，经常导致浏览器崩溃，因此许多浏览器开始抛弃它，目前谷歌浏览器已经抛弃了Flash插件支持，取而代之的是HTML5的video元素。

属性名称	说明
src	视频资源的 URL
width	视频宽度
height	视频高度
autoplay	设置后，表示立刻开始播放视频
preload	设置后，表示预先载入视频
controls	设置后，表示显示播放控件
loo	设置后，表示反复播放视频
muted	设置后，表示视频处于静音状态
poster	指定视频数据载入时显示的图片

2.音频 audio

(1).音频：

音频也是支持三种格式：mp4,Wav,Ogg.

(2).浏览器支持：

当然也有支持：

浏览器	MP3	Wav	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

所以一般的时候音频文件都使用mp3.

(三).格式:

格式：

<audio src="文件地址" controls="controls"></audio>

运行结果如下：
在这里插入图片描述

当然为了兼容低版本可以如下写：

<audio width='200' height='120' controls>
<source src="文件地址" type="type/mp3">
    <source src="文件地址" type="type/ogg">
</audio>

运行效果如下：
在这里插入图片描述

2、视频 video

(1).音频：

HTML5在不适用插件的情况，也可以原生的支持视频格式文件的播放，当然支持格是有限的。

(2).浏览器支持：

在网页中如果看原网页的话，可以发现很多时候引入的视频文件有好几个格式，因为兼容问题，不同的浏览器支持不同的格式而已，目前只支持三个格式，MP4，WebM，Ogg。浏览器支持的格式：

浏览器	MP3	Wav	Ogg
IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

(三).格式:

具体格式：

<video src="video/美景2.webm" controls="controls"></video>

但是为了兼容有些浏览器不兼容，不支持video标签如下写：

<video width='310' height='200' controls>
<source src="文件地址" type="type/mp4">
    <source src="文件地址" type="type/ogg">
</video>

video的属性值：


autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。但是谷歌浏览器需要添加muted来解决自动播放问题。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	auto	预先加载视频
none	不应加载视频	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL
width	pixels	设置视频播放器的宽度

如果只是单独的引入资源，虽然引入但是没有播放效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在HTML中如何设置音频和视频</title>
</head>
<body>
<video src="video/美景2.webm">美景</video>
</body>
</html>

运行效果如下：
在这里插入图片描述就是空的。

所以在引入数据的时候，就应该带有其它的属性。
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在HTML中如何设置音频和视频</title>
</head>
<body>
<video src="video/美景2.webm" controls="controls" autoplay="autoplay" muted="muted">美景</video>
</body>
</html>