音频和视频标签

news2024/12/23 20:50:33

音频用audio标签

controls表示控制栏

loop循环播放音频

autoplay自动播放（浏览器基于隐私一般不支持）

<!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>音频</title>
</head>
<body>
    <h1>音频用audio标签,controls表示控制栏,loop循环播放音频,
    autoplay自动播放，muted静音播放</h1>
    <audio src="/jiejie.wav" controls loop autoplay muted></audio>
</body>
</html>

视频用video标签

controls表示控制栏

loop循环播放音频

autoplay自动播放

muted静音播放,poster设置视频封面。

支持宽高属性最好和视频分辨率大小一致（也可在css设置）

<!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>视频</title>
    <style>
        /* video{
            width:300px;
            height:300px;
        } */
    </style>

</head>
<body>
    <h1>视频用video标签,controls表示控制栏,loop循环播放音频,
        autoplay自动播放，muted静音播放,poster设置视频封面。
        支持宽高属性最好和视频分辨率大小一致（也可在css中设置）</h1>
    <video src="/movie.mp4" controls loop autoplay muted poster="/poster.jpg"
    width="300px" height="300px"></video>
    
</body>
</html>