自动播放策略说明
自动播放策略说明
随着用户使用某个页面的次数变多,浏览器会在这个页面上默认关闭自动播放策略,此时不需要任何交互也可以播放了。
但是我们无法通过 JavaScript 去感知浏览器这个行为。
先对视频流进行静音,再播放。播放成功后,引导用户手动将声音恢复播放。
Chrome 自动播放限制策略
新的特性
1.
2.
3.
4.
媒体参与指数(Media Engagement Index)(MEI)

开发者开关
chrome://flags/#autoplay-policy
。这可以用两个来完成 内部开关用
chrome.exe --disable-features=PreloadMediaEngagementData, AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies
iframe 委托授权
<!--允许自动播放-->
<iframe src = "https://cross-origin.com/myvideo.html" allow = "autoplay" />
<!--允许自动播放和全屏播放-->
<iframe src = "https://cross-origin.com/myvideo.html" allow = "autoplay; fullscreen" />
play()
不带用户手势的调用将拒绝带有NotAllowedErrorDOMException
的 promise。自动播放属性也将被忽略。Chrome 企业政策
1.
2.
开发人员最佳实践
视频元素
Promise
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
<video id="video" muted autoplay>
<button id="unmuteButton"></button>
<script>
unmuteButton.addEventListener('click', function() {
video.muted = false;
});
</script>
音频元素
audio
标签之外,还有另外一个 API 叫AudioContext
,AudioContext
接口表示由音频模块连接而成的音频处理图,每个模块对应一个 AudioNode。AudioContext 可以控制它所包含的节点的创建,以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext
对象,因为一切都发生在这个环境之中。function request (url) {
return new Promise (resolve => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
// set response Type arraybuffer
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.response);
}
};
xhr.send();
});
}
function play (context, decodeBuffer) {
let source = context.createBufferSource();
source.buffer = decodeBuffer;
source.connect(context.destination);
// 从0s开始播放
source.start(0);
}
// 请求音频数据
let audioMedia = await request(url);
// 进行decode和play
context.decodeAudioData(audioMedia, decode => play(context, decode));
// Existing code unchanged.
window.onload = function() {
var context = new AudioContext();
// Setup all nodes
...
}
// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
context.resume().then(() => {
console.log('Playback resumed successfully');
});
});document.querySelector('button').addEventListener('click', function() {
var context = new AudioContext();
// Setup all nodes
...
});
参考:
修改于 2025-05-27 13:13:16