HTML5中的video与audio标签及其属性详解,-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_69821704/article/details/128636769

一、视频（video）和音频（audio）标签及属性

1.视频（video）的属性

属性	描述
`src`	要播放的视频的`URL`
`autoplay`	自动播放
`controls`	显示控件,比如播放按钮
`loop`	循环播放
`muted`	输出被静音
`preload`	页面加载的时候,自动预加载资源
`height`	设置播放器高度
`width`	设置播放器宽度
`poster`	视频封面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video src="./movie.mp4" controls>
        不支持此浏览器
    </video>
</body>
</html>

二、音频（audio）的属性

属性	描述
`src`	要播放的音频的`URL`
`autoplay`	自动播放
`controls`	显示控件,比如播放按钮
`loop`	循环播放
`muted`	输出被静音
`preload`	页面加载的时候,自动预加载资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <audio src="./肖开提 - DAVU夜舞（纯正版）.mp3" controls>音频</audio>
</body>
</html>

三、

<source>标签为媒介元素（比如 <video>和 <audio>）定义媒介资源。

<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

<audio controls>
   <source src="horse.ogg" >
   <source src="horse.mp3" >
    Your browser does not support the audio element.
</audio>

HTML5中的视频和音频