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 相关文章推荐
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
html原生table实现合并单元格以及合并表头的示例代码
May 07 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
基于jQuery的弹出消息插件 DivAlert之旅(一)
2010/04/01 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
2016/06/14 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
layui select获取自定义属性方法
2018/08/15 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
详解详解Python中writelines()方法的使用
2015/05/25 Python
谈谈如何手动释放Python的内存
2016/12/17 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
中学生自我评价范文
2014/02/08 职场文书
职代会闭幕词
2015/01/28 职场文书
后勤个人工作总结
2015/02/28 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP
Python制作春联的示例代码
2022/01/22 Python