13. 音视频播放

最新推荐文章于 2024-07-09 11:03:54 发布

广东码农

最新推荐文章于 2024-07-09 11:03:54 发布

阅读量201

点赞数

分类专栏： html+css 文章标签：前端

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/115705080

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML5中的Audio和Video标签的使用，包括如何添加音视频文件、设置控制属性、自动播放与循环播放，以及如何处理浏览器的兼容性问题。通过source标签和embed标签的结合使用，确保不同浏览器能正确播放MP3和OGG格式的音频文件。同时，文章还提及了B站和其他视频网站的类似功能。

摘要由CSDN通过智能技术生成

忽然发现网易有这个功能在这里插入图片描述
------------------------------------------------------------------------------------------------------------
B站和大部分视频网站也有这个功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        audio标签用来向页面引入一个音频文件
        音视频文件引入时，默认情况下不允许用户自己控制播放停止
        属性：
            src内部文件、外部文件都可以
            controls是否允许用户控制播放音视频。（默认情况下是不允许的）
            autoplay音视频文件是否自动播放
                - 如果设置了autoplay则音乐在打开页面时会自动播放
                - 但是目前来讲大部分浏览器都不会自动对音乐进行播放
                为的是提升用户体验，就像早些年我们打开某些网页，它会自动播放一些音乐，但是相信大多数人都觉得这很吵吧（我就是这么觉得的）
                所以现在大多数浏览器都不会自动播放了，也就是相当于autoplay这个属性有点废了
            loop循环播放
            详细请看文档
     -->
     <audio src="audio/All Falls Down.mp3" controls autoplay></audio>
     <!-- <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=470547653&auto=1&height=66"></iframe> -->

    <!-- 
        除了通过src来指定外部文件的路径以外，还可以通过source来指定文件路径
        
        这样写的好处就是如果浏览器支持audio标签，它会自动加载source，不显示文字
        但是如果浏览器不支持audio，它就会显示文字
        这样效果就比较好，浏览器有问题的用户就可以知道问题所在！

        好处二。audio下面可以有多个source标签，也就是说我们可以指定多个音频文件
        这样的好处就是比如说苹果的浏览器，它不支持MP3，但支持ogg，这样它加载不出MP3，就会去加载ogg
        如果两者都加载不出来，就加载文字咯
        这样兼容性就比较好。
     -->
    <audio controls>
        <!-- 对不起，你的浏览器版本过低，请用较新版浏览器访问！ -->
        <source src="./audio/All Falls Down.mp3"> 
        <!-- <source src="./audio/All Falls Down.ogg"> -->
        <embed src="./audio/All Falls Down.mp3" type="audio/mp3" width="300" height="300">
        <!-- 放在这里，如果浏览器支持，它就不加载上面的source，不加载embed了。如果不支持，就加载embed -->
    </audio>

    <!-- 
        当然如果想要兼容ie8，也可以用embed标签，不过这个标签比较老了
        而且在ie8中必须加width，height才能显示出来控制
     -->

    <!-- 
        使用vidio来向网页中引入一个视频
        - 使用方式基本上和audio一样
     -->
    <video controls>
        <source src="">
        <source src="">
        <embed src="" type="">
    </video>

    <iframe src="//player.bilibili.com/player.html?aid=332592722&bvid=BV1EA411L7su&cid=323716451&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

</body>
</html>