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


Posted in HTML / CSS onMay 30, 2022

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

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

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

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

myself.html

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

html/myself.html

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

举个栗子

看这是一个网页的时候

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>

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

下面重头戏来了

此时我创建了两个文件夹

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中实现音乐或视频自动播放的文章就介绍到这了!

 

Tags in this post...

HTML / CSS 相关文章推荐
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
CSS中几个与换行有关的属性简明总结
Apr 15 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
css3实现冲击波效果的示例代码
Jan 11 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
HTML5页面打开微信小程序功能实现
Sep 23 HTML / CSS
CSS中理解层叠性及权重如何分配
Dec 24 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 #HTML / CSS
HTML页面中使两个div并排显示的实现
May 15 #HTML / CSS
html中相对位置与绝对位置的具体使用
CSS 左边固定宽右边自适应的6种方法
May 15 #HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 #HTML / CSS
css3 选择器
May 11 #HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
You might like
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
PHP使用flock实现文件加锁的方法
2015/07/01 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
详解python单例模式与metaclass
2016/01/15 Python
python实现八大排序算法(2)
2017/09/14 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python3.5模块的定义、导入、优化操作图文详解
2019/04/27 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
pytorch梯度剪裁方式
2020/02/04 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python3如何使用多线程升程序运行速度
2020/08/11 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
东方通信股份有限公司VC面试题
2014/08/27 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
信息总监管理职责范本
2014/03/08 职场文书
腾讯广告词
2014/03/19 职场文书
村级环境卫生整治方案
2014/05/04 职场文书
学习型班组申报材料
2014/05/31 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书