audio或video标签的autoplay属性的说明

<audio> 标签用于将声音内容嵌入文档中，例如音乐或其他音频流。

HTML audio 标签

<audio> - HTML（超文本标记语言） | MDN

<video> 标签用于将视频内容嵌入文档中，。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

HTML video 标签

<video>: 视频嵌入元素 - HTML（超文本标记语言） | MDN

想让内容自动播放的最简单方法是将autoplay属性添加到<audio>或<video>元素。但自动播放音频（或有声视频）可能会破坏用户体验，尽管自动播放媒体文件在某些情况下，如实现背景音乐时是一个很实用的功能，据新规则，可能需要在满足一定的条件才允许自动播放【可参见https://developer.mozilla.org/zh-CN/docs/Web/Media/Autoplay_guide】。

chrome、safari、firefox、edge等浏览器都在某版本后限制了audio自动播放功能，必须要用户与当前页面有交互后，例如下面的例子设置了按钮，当用户点击后播放。

使用<audio> 标签实现网页背景音乐播放源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放</title>
</head>
<body>
<audio id="aid" autoplay loop src="./horse.mp3" ></audio>
<button type="button" id="unmuteButton">Click Me!</button>
<script>unmuteButton.addEventListener('click', function() {var music = document.getElementById("aid");//获取IDif (music.paused) { //判读是否播放music.paused=false;music.play(); //没有就播放}});
</script>
</body>
</html>

上面源码也可以写为（提示，仅JS部分的不同）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放 </title>
</head>
<body>
<audio id="aid" autoplay  loop src="./horse.mp3" ></audio>
<p>单击鼠标</p>
<script> function SoundPlay() {var music = document.getElementById("aid");//获取IDif (music.paused) { //判读是否播放music.paused=false;music.play(); //没有就播放}}setInterval("SoundPlay()",1);
</script>
</body>
</html>

使用<video> 标签实现网页背景音乐播放源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景音乐播放</title>
</head>
<body>
<video id="vid" muted autoplay loop src="./horse.mp3" ></video>
<button type="button" id="unmuteButton">Click Me!</button>
<script>unmuteButton.addEventListener('click', function() {vid.muted = false;});
</script>
</body>
</html>

用户和页面之间有交互：其实就是指用户与页面要发生了事件，才算有交互。比如鼠标事件（单击 onclick，双击 ondblclick，按下 onmousedown，松开 onmouseup，右击 oncontextmenu 等），键盘事件（按下 onkeydown，松开 onkeyup 等）等。

既然是这样，那么在用户进入页面的时候，只要引导用户先去触发这些事件，背景音乐就能播放了，问题变相解决了，如上面的例子。

audio或video标签的autoplay属性的说明相关推荐

audio标签控制音量_HTML5中audio与video标签的使用
最近做的微信分享页面中有大量的语音播放和视频展示,相关的好多方法属性以前都没接触过,现在记录下来! 1.首先,了解关于两个标签的基本信息: 两个标签的基本属性: 属性描述 audioTracks返回表 ...
html audio 路径,HTML中的audio和video标签讲解
关于标签讲解:点击这里这里来一段简单的html5的音频代码: 您的浏览器不支持 audio 标签. 在audio标签中加入的文字,可以让浏览器在不支持audio标签的时候显示出提示文字. Inter ...
audio与video标签支持的文件格式
audio与video标签支持的文件格式 1.audio标签支持的文件格式 (1)ogg:一种新的音频压缩格式,是完全免费.开放和没有专利限制的 (2)mp3:是一种音频压缩技术.它被设计用来大幅度地 ...
html5中preload是什么意思,html的video标签的preload属性详解
--------------------------------------------------------- Ta 只分享的内容开始 ------------------------------ ...
audio标签与video标签的常用属性及方法
一.常用的css属性 1.src:用于指明video标签需要播放的音频的地址 --<audio sec = "音频地址"> < ...
HTML5 audio与video标签实现视频播放，音频播放
随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签. audio 标签属性 <audio src="song.mp3" contr ...
【HTML5 video】video标签的部分属性解析
转自:http://www.cnblogs.com/kiter/archive/2013/02/25/2932157.html 现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Th ...
H5新增video标签的常用属性
原文地址:https://blog.csdn.net/nihaio25/article/details/120263499 video 在video标签出现之前,如果想在网页中播放视频或者音频数据是非 ...
Video标签事件与属性
事件与属性属性描述 audioTracks 返回可用的音轨列表(MultipleTrackList对象) autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeR ...
Video标签事件与属性 HTML5 Video Events and API
属性描述 audioTracks 返回可用的音轨列表(MultipleTrackList对象) autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeRanges对 ...

audio或video标签的autoplay属性的说明

audio或video标签的autoplay属性的说明

audio或video标签的autoplay属性的说明相关推荐

最新文章

热门文章