HTML中实现音乐或视频自动播放案例详解

由于期末大作业我想插入一个背景音乐 , 实现点开网页就会自动播放音频的效果 。于是我按照书上的案例写了如下代码
<audio src="https://baike.zhangchenghui.com/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="https://baike.zhangchenghui.com/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="https://baike.zhangchenghui.com/517678/music.html">音乐</a></body></html>music的代码
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>music</title></head><body><audio src="https://baike.zhangchenghui.com/medio/花海.mp3" loop="loop" controls="controls" autoplay="autoplay"></audio></body></html>这个就可实现自动播放的效果了
总结一下 , 两个方法在代码上没什么区别 , 第二种方法就是多了一个跳转网页的操作而已 。www.887551.com推测可能是在html中音频自动播放需要缓冲时间 , 但是在单独使用一个网页时没有缓冲时间 , 而用跳转网页恰恰弥补了这一缓冲时间 。
【HTML中实现音乐或视频自动播放案例详解】到此这篇关于html中实现音乐或视频自动播放的文章就介绍到这了,更多相关html自动播放内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章 , 希望大家以后多多支持www.887551.com!
-- 展开阅读全文 --

    推荐阅读