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的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
css animation配合SVG制作能量流动效果
Mar 24 HTML / CSS
css3实现的加载动画效果
Apr 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中看实例学正则表达式
2006/12/25 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
golang与PHP输出excel示例
2016/07/22 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
去除链接虚线全面分析总结
2006/08/15 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
初学Python实用技巧两则
2014/08/29 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
对python调用RPC接口的实例详解
2019/01/03 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python简单的三元一次方程求解实例
2020/04/02 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
中国梦的演讲稿
2014/01/08 职场文书
单位计划生育责任书
2015/05/09 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL