最新在html中实现音乐或视频自动播放

五小悟

已于 2022-11-21 19:27:46 修改

阅读量6.1w

点赞数 39

分类专栏： web前端 html 文章标签： html 音视频前端

于 2021-12-13 19:53:36 首次发布

本文链接：https://blog.csdn.net/leihaifei/article/details/121912433

版权

HTML 音频播放自动播放浏览器限制路径

关键词由CSDN通过智能技术生成

web前端同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码

<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>

但是效果并不理想，打开了网页并不会自动播放，于是乎，我百度了各种各样的方法，但始终没有实现想要的效果。于是在整理大作业的偶然间，我居然发现了真相！

首先看原本的代码打开路径,就是一个单纯的网页

myself.html

再看能成功实现自动播放的网页路径

html/myself.html

发现问题所在没？问题就出现在跳转上，也就是说想实现自动播放背景音乐的效果，不能直接应用在首页路径上，而是要放在后面的路径。

举个栗子

看这是一个网页的时候

这是代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

然而这实现不了自动播放的效果

下面重头戏来了

此时我创建了两个文件夹

index的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
<a href="music.html">音乐</a>
</body>
</html>

music的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>music</title>
</head>
<body>
<audio src="../medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio>
</body>
</html>

这个就可实现自动播放的效果了

总结一下，两个方法在代码上没什么区别，第二种方法就是多了一个跳转网页的操作而已。小编推测可能是在html中音频自动播放需要缓冲时间，但是在单独使用一个网页时没有缓冲时间，而用跳转网页恰恰弥补了这一缓冲时间。

感觉评论区一位大佬给的解释感觉很到位，这就呈上

一般不能自动播放都是因为浏览器的各种限制策略会忽略掉autoplay这个属性，以谷歌举例，如果用户与页面有过交互或者用户曾在这里播放过其他非静音资源则允许自动播放，如果是静音的视频资源则允许自动播放，所以这边跳转一下就能自动播放了应该是符合第一个条件，用户和页面产生交互了，该页面自动播放不再进行限制，就生效了。

好了，大家试试吧。如果有问题的话，可以留言我哦。