音频和视频标签

叶不休

于 2024-03-20 20:23:45 发布

阅读量506

点赞数 2

分类专栏：前端文章标签：音视频前端 css html5 前端框架 xhtml chrome

本文链接：https://blog.csdn.net/weixin_58694594/article/details/136887140

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

音频用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>