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 相关文章推荐
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
Jul 20 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
HTML5 图片悬停放大的实现代码示例
Dec 04 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 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开发的一些注意点总结
2010/10/12 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
COM中获取JavaScript数组大小的代码
2009/11/22 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python面试题小结附答案实例代码
2019/04/11 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
django2笔记之路由path语法的实现
2019/07/17 Python
python openCV获取人脸部分并存储功能
2019/08/28 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
土地租赁协议书
2015/01/29 职场文书
昆虫记读书笔记
2015/06/26 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
python编写函数注意事项总结
2021/03/29 Python
Pillow图像处理库安装及使用
2022/04/12 Python
如何利用python实现列表嵌套字典取值
2022/06/10 Python