video实现浏览器打开自动播放

最新推荐文章于 2025-11-06 01:28:00 发布

原创最新推荐文章于 2025-11-06 01:28:00 发布 · 5.6w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#video

Javascript 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了一种解决iOS Safari浏览器中音视频自动播放问题的方法。通过监听用户交互事件来触发音视频播放，绕过iOS Safari对于自动播放功能的限制。

1.html

</video>

2.demo

<!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>
<style>
video{
width: 100%;
}
</style>
</head>
<body>
<video id="bgmusic" autoplay preload muted>
<source type="video/mp4" src="http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4">
</video>
<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('ready', forceSafariPlayAudio, false);
// audioEl.src = 'http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4';
})();
</script>
</body>
</html>