9.音视频播放

最新推荐文章于 2021-10-24 15:22:49 发布

Keeling1720

最新推荐文章于 2021-10-24 15:22:49 发布

阅读量147

点赞数

分类专栏： HTML5+CSS

本文链接：https://blog.csdn.net/weixin_44741023/article/details/113784870

版权

HTML5+CSS 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

这里的mp3和mp4都是我自己下载的，有路过看到的兄弟记得自己下载然后修改代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视频播放</title>
</head>
<body>
    <!--
        audio 标签用来向页面中引入一个外部的音视频文件
            音乐文件引入时，默认情况下不允许用户自己控制播放暂停

        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
                - 如果设置了 autoplay 则音乐在打开的时候自动播放
                    但是大部分浏览器都不会对音乐进行自动播放
            loop 音乐是否循环播放

    -->
    <audio src="source/愚爱.mp3" controls></audio>
    <!--
        除了以上方法外，还可以通过source来指定音频文件
            以下方法，若浏览器不支持播放音频，那么会给出提示
    -->
    <audio controls>
        对不起，您的浏览器b不支持播放音频，请升级浏览器!!!
        <source src="source/愚爱.mp3">
    </audio>

    <!--
        使用video标签向网页中引入一个视频
            -使用方式和audio基本相同
    -->
    <video src="source/Lil%20Ghost小鬼%20-%20偏爱%20Special%20Live%20Show.mp4" controls autoplay></video>
    <!--或者用第二种方法显示-->
    <video controls>
        对不起，您的浏览器不支持播放音频，可以尝试使用其他浏览器!!!
        <source src="source/Lil%20Ghost小鬼%20-%20偏爱%20Special%20Live%20Show.mp4">
    </video>
</body>
</html>