HTML 多媒体元素

最新推荐文章于 2025-05-08 16:05:34 发布

原创最新推荐文章于 2025-05-08 16:05:34 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

html 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了HTML5中的video和audio元素，用于在网页中嵌入视频和音频内容。文章强调了controls、autoplay、muted和loop等布尔属性的使用，并指出这些属性在不写或直接写属性名时即为启用。同时，博客提到了不同浏览器对音频和视频格式的支持可能存在差异，以及如何通过source标签处理兼容性问题。对于不支持这些元素的旧版浏览器，提供了备选文本提示用户升级浏览器。

多媒体元素

video 视频
audio 音频

video

control：控制控件的显示，取值只能为controls

某些属性，只有两种状态：1.不写 2.取值为属性名，这种属性叫做布尔属性

布尔属性：在htmls中，不用书写属性值

autoplay 布尔属性，自动播放

muted：布尔属性，静音播放

loop：布尔属性，循环播放

audio

和视频完全一样

兼容性、

1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音频格式可能不一致

<!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>
    <!--sourece 兼容-->
    <video src="">
        <source src="">
        <source src="">
        <p>
            对不起,你的浏览器不支持video元素,请点击这里下载最新的浏览器
        </p>
    </video>
    <audio src="" cantrols autoplay muted  loop></audio>
</body>
</html>