网页嵌入音乐/视频
Posted 蚂蚁Zz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页嵌入音乐/视频相关的知识，希望对你有一定的参考价值。
<!--h5代码 安卓微信测试可行--> <audio autoplay="true" loop="true"><source src="music/bg.mp3"></audio>
从ios 4.2开始，所有的媒体元素必须要用户操作之后才能播放，比如点击、输入动作， 这个是ios的一个安全限制
参考问题来源：iphone浏览器(三大主流浏览器) 开webApp中 audio 播放不了
通过交互动作播放media
参考文案来源：解决html5 audio iphone,ipd，safari不能自动播放问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Fake auto play html audio in iOS Safari the right way</title> </head> <body> <h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1> <p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p> <br> <br> <br> <audio id="bgmusic" autoplay preload loop controls></audio> <script> (function() { function log(info) { console.log(info); // alert(info); } function forceSafariPlayAudio() { audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效 audioEl.play(); // iOS 7/8 仅需要 play 一下 } var audioEl = document.getElementById(\'bgmusic\'); // 可以自动播放时正确的事件顺序是 // loadstart // loadedmetadata // loadeddata // canplay // play // playing // // 不能自动播放时触发的事件是 // iPhone5 iOS 7.0.6 loadstart // iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay audioEl.addEventListener(\'loadstart\', function() { log(\'loadstart\'); }, false); audioEl.addEventListener(\'loadeddata\', function() { log(\'loadeddata\'); }, false); audioEl.addEventListener(\'loadedmetadata\', function() { log(\'loadedmetadata\'); }, false); audioEl.addEventListener(\'canplay\', function() { log(\'canplay\'); }, false); audioEl.addEventListener(\'play\', function() { log(\'play\'); // 当 audio 能够播放后, 移除这个事件 window.removeEventListener(\'touchstart\', forceSafariPlayAudio, false); }, false); audioEl.addEventListener(\'playing\', function() { log(\'playing\'); }, false); audioEl.addEventListener(\'pause\', function() { log(\'pause\'); }, false); // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, // 因此我们通过一个用户交互事件来主动 play 一下 audio. window.addEventListener(\'touchstart\', forceSafariPlayAudio, false); audioEl.src = \'http://www.w3school.com.cn/i/song.mp3\'; })(); </script> </body> </html>
以上是关于网页嵌入音乐/视频的主要内容，如果未能解决你的问题，请参考以下文章