embed的自动播放 embed音频不自动播放

转载

架构思维大师 2024-03-27 14:41:01

文章标签 embed的自动播放 html 搜索引擎前端 ide 文章分类 机器学习人工智能

音视频标签（audio、video、embed）

音频

audio标签

属性

controls
autoplay
loop

使用方式

提示用户升级浏览器
浏览器不支持MP3格式
兼容低版本浏览器（embed标签）

视频

vidio标签
兼容后的写法

其他事项说明

音频

audio标签

我们通常用audio标签来向页面中引入一个外部的音频文件。
音视频文件引入时，默认情况下不允许用户自己控制播放停止。

属性

controls

controls指定是否允许用户控制播放。
这个属性不是通过值来判断的，而是通过有没有，有这个属性就是允许，没有就是不允许。

autoplay

autoplay指定音频文件是否自动播放。
如果设置了autoplay，则音乐在打开页面时会自动播放。但是目前来讲，大部分浏览器都不会自动对音乐进行播放。

loop

loop指定音乐是否循环播放。
如果设置了loop，则音乐会循环播放。

使用方式

<audio src="./source/audio.mp3" controls autoplay loop></audio>

IE8及以下版本不支持audio标签，展示效果为控制台报错，界面看不出来有audio标签。

提示用户升级浏览器

除了通过src属性来指定外部文件的路径以外，还可以通过source来指定文件。所以还可以写成：

<audio controls>
    <source src="./source/audio.mp3">
</audio>

但是此时，用户看到的效果和直接使用

<audio src="./source/audio.mp3" controls></audio>

是一样的，那么我们需要提示用户，这里是有音频播放的，因为浏览器版本问题，导致音频播放功能无法使用。可以写成：

<audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
    <source src="./source/audio.mp3">
</audio>

如果浏览器支持audio标签，则会自动去找audio标签中的source，如果浏览器不支持audio标签，即浏览器识别不出audio标签和source标签，此时界面会现时“对不起xxx”这段文字。

浏览器不支持MP3格式

有些浏览器不支持mp3格式，而是支持ogg格式，所以以前为了解决兼容性问题，可以写成：

<audio controls>
    对不起，您的浏览器不支持播放音频！请升级浏览器！
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
</audio>

这样，浏览器会先识别第一个source，识别不了mp3格式时，会去识别第二个sourse，如果可以识别ogg格式文件，就会播放对应的音频文件，如果仍然识别不了，才会显示“对不起xxx”这段文字。

兼容低版本浏览器（embed标签）

在老版本浏览器中其实是可以引入音频文件的（如IE8），只是体验不好，所以现在用到的不多：

<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">

如果想兼容一些较低版本的浏览器，但是较高版本浏览器又希望用audio标签，那么可以通过以下方式实现：

<audio controls>
    <source src="./source/audio.mp3">
    <source src="./source/audio.ogg">
    <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>

视频

vidio标签

我们通常用video标签来向网页中引入一个视频。
使用方式和audio基本上是一样的。

兼容后的写法

<video controls>
    <source src="./source/video.webm">
    <source src="./source/video.mp4">
    <embed src="./source/video.mp3" type="audio/mp4">
</video>