HTML中实现音乐或视频自动播放案例详解
发布时间：2022-05-27 16:41:06 作者：五小悟 
我要评论
我要评论由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果，今天通过本文给大家分享下我基于HTML实现音乐或视频自动播放功能，代码简单易懂，需要的朋友参考下吧
由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果。于是我按照书上的案例写了如下代码
<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中音频自动播放需要缓冲时间，但是在单独使用一个网页时没有缓冲时间，而用跳转网页恰恰弥补了这一缓冲时间。
到此这篇关于HTML中实现音乐或视频自动播放的文章就介绍到这了,更多相关html自动播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 本文给大家分享三种常规的方法创建自动播放的audio对象，就每种方式通过实例代码给大家介绍的非常详细，对html5音频自动播放相关知识感兴趣的朋友一起看看吧2021-06-21
- 这篇文章主要介绍了html5 video全屏播放/自动播放的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了html5中嵌入视频自动播放的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-05-25
- 这篇文章主要介绍了html5自动播放mov格式视频的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-14
- 这篇文章主要介绍了HTML5 解决苹果手机不能自动播放音乐问题的相关资料,需要的朋友可以参考下2017-12-27
- 现在大部分的H5页面都有实现播放背景音乐，播放视频功能。那怎么实现自动播放呢？下面小编给大家带来了HTML5页面音视频在微信和app下自动播放的实现方法2016-10-20
最新评论