初入WEB前端日记（4）HTML5 引入音频、视频

最新推荐文章于 2023-12-31 20:03:08 发布

宋辰轩

最新推荐文章于 2023-12-31 20:03:08 发布

阅读量1.2k

点赞数 2

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/weixin_44004068/article/details/107018941

版权

HTML5 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何使用HTML的audio和video标签来引入音频和视频，包括控制播放、自动播放、循环播放等功能，以及如何通过source标签指定多个音频源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入音频

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- audio标签用于引入外部音频
    属性：
        controls 是否允许用户控制音乐
        autoplay 是否自动播放（这个不太好使）
        loop     是否循环播放
         -->
        
    <audio src="./audio/周杰伦、低调组合 - 告白气球(Live).flac" controls loop></audio>
</body>
</html>

在这里插入图片描述

<!--除了在audio 中直接src，还可以先写audio后使用source标签指定音频 
        好处是可以指定多个source，第一个不行会自动检索第二个-->
    <audio controls>
        <source src="./audio/周杰伦、低调组合 - 告白气球(Live).flac" >
    </audio>

2.引入视频（可以嫖别人的视频）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过video标签向网页中插入一个视频,适用方法和audio一样的 -->
    <video controls width="600" height="400">
        <source src="./video/典尚视频素材网-顶级豪宅视频a私人庄园2洛杉矶城堡Sunset-sp.720ku.net.mp4" >
    </video>

    <!-- 这个是复制的腾讯代码块，是一个内联框架 -->
    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=r0034pdujr9" width="500" height="300" allowFullScreen="true"></iframe>
</body>
</html>

效果图：在这里插入图片描述
框架代码在下面：复制通用代码就可以