首页 > 其他分享 >html中添加背景音乐自动播放

html中添加背景音乐自动播放

时间:2024-01-25 20:45:58浏览次数:35  
标签:背景音乐 runoob www try html 自动播放 com

参考: https://www.runoob.com/try/try.php?filename=tryhtml5_av_prop_autoplay

https://www.mchweb.net/mcbach/1650918861981130752.html

 

现在的浏览器对于 audio 、video标签的页面加载时都无法自动播放,各大官方给的意见是自动播放会吵人,只有在静音的模式 muted="true" 下才可以自动播放,

有些时候我们需要添加背景音乐自动播放,此时我们可以这么处理



<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<h1>embed 元素</h1>
    <!-- 在 iframe 中放置任何无声音频。 -->
    <iframe src="horse.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay loop>
    <source src="horse.mp3" type="audio/mp3">
</audio>
    <!-- 
    只需在音频元素前添加一个以 .mp3 作为源并允许 =“autoplay” 的不可见 iframe。
    结果,浏览器被诱骗启动任何后续音频文件。或者自动播放未静音的视频。
     -->
</body>
</html>

可以把上面的代码复制到 : https://www.runoob.com/try/try.php?filename=tryhtml5_embed3 运行测试

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<h1>embed 元素</h1>
<video src="horse.mp3" autoplay loop>
</video>
</body>
</html>

把上面这段代码复制进去试验了下也可以自动循环播放

标签:背景音乐,runoob,www,try,html,自动播放,com
From: https://www.cnblogs.com/huaan011/p/17988133

相关文章

  • html 中javascript 如何被调用
    在HTML中,JavaScript可以通过多种方式进行调用。1.内联脚本(InlineScript):直接将JavaScript代码写入到HTML文件的<script>标签中。示例代码如下所示:<!DOCTYPEhtml><html><head><title>使用内联脚本</title></head><body><!--HTML页面内容--><scripttyp......
  • HTML中全局拦截回车键并将其转换为Tab键效果
    要在HTML中全局拦截回车键并将其转换为Tab键,可以使用JavaScript监听键盘事件,并在用户按下回车键时模拟Tab键的行为。以下是一个基本的实现方法:监听键盘事件:可以使用document.addEventListener来监听keydown事件。判断按键:在事件处理函数中,可以使用event.key来判断用户是否按下......
  • Django学习第一天-Flask_Web前端HTML部分
    目录1.day11.快速开发网站2.浏览器能识别的标签2.1编码2.2title2.3标题2.4div和span2.5超链接2.6图片小结2.7列表2.8表格2.9input系列(7个)2.10下拉框2.11多行文本案例:用户注册2.12网络请求目的:开发一个平台(网站)-前端开发:HTML、CSS、JavaScript-Web框架:接收并处理请求......
  • html2canvas使用文档
    安装npminstallhtml2canvasoryarnaddhtml2canvas引入importhtml2canvasfrom'html2canvas'使用<divref="canvasDom"><h4>Helloworld!</h4></div>constcanvasDom=this.$refs.canvasDomthis.$toast.loading(&......
  • js 旧 IE 中的 innerHTML
    在所有现代浏览器中,通过innerHTML插入的<script>标签是不会执行的。而在IE8及之前的版本中,只要这样插入的<script>元素指定了defer属性,且<script>之前是“受控元素”(scopedelement),那就是可以执行的。<script>元素与<style>或注释一样,都是“非受控元素”(NoScopeelement)......
  • html 禁止f12调试代码 debugger
    setInterval(()=>{(function(a){return(function(a){return(Function('Function(arguments[0]+"'+a+'")()'))})(a)})('bugger')('de',0,0,(0,0));},1000);js代码放到HTMLscrip标签块中即可......
  • HTML代码加固:保障网站安全
    引言HTML是网站开发的基础语言,它的安全性直接关系到网站的安全性。为了保障网站的安全性,我们需要加固HTML代码。本文将介绍一些具体方法,帮助你加固HTML代码,提高网站的安全性。摘要本文将介绍以下几种方法来加固HTML代码以保障网站的安全性:移除不必要的注释、过滤输入内容、使用......
  • vue index.html缓存解决
    Vue项目的index.html文件在部署到生产环境时,很容易受到浏览器缓存影响,导致用户无法看到最新的页面。为了解决这个问题,有几种方法:使用版本号:在构建项目时,设置打包后的文件名中包含版本号,比如index.html?v=1.0,每次更新版本号即可避免缓存问题。使用meta标签:在index.htm......
  • 其他-代码折叠-Markdown-HTML
    亲测有效-兼容性强但是需要代码中间没有空格,其他的语法折叠方法兼容性若容易崩。Codeintfound(inta[],intleft,intright,intx){while(left<right){intmid=(right+left)>>1;if(a[mid]<x)left=mid+1;else......
  • Html5本地存储
    Html5本地存储HTML5为我们提供了两种API,分别是localStorage与sessionStorage。二者作为HTML5新增的特性,它们的使用方法类似,都可以用来存储客户端临时信息,并且二者存储的数据格式均为key/value对的数据。区别在与生命周期,localStorage除非手动清除,否则会永久保存在客户......