如果覺(jué)得還有點(diǎn)用，請(qǐng)您給我一個(gè)贊吗货！您的贊是我堅(jiān)持下去的動(dòng)力
視頻自動(dòng)播放
使用video播放mp4時(shí)泳唠，如果沒(méi)有自動(dòng)播放，原因是因?yàn)闉g覽器禁止視頻附帶的音樂(lè)在沒(méi)有用戶操作的前提下自動(dòng)播放宙搬，以防止打擾用戶
解決方案
- 1笨腥、給video標(biāo)簽內(nèi)增加
muted屬性<video muted preload="auto" autoplay loop='loop' src='x.mp4' />，告知瀏覽器靜音播放 - 2勇垛、增加一個(gè)按鈕或全屏監(jiān)聽(tīng)click事件,讓用戶主動(dòng)點(diǎn)擊后調(diào)用play()
音頻自動(dòng)播放
同理扇雕，由于瀏覽器禁止了自動(dòng)播放，嚴(yán)格來(lái)說(shuō)是沒(méi)有任何方法能100%繞過(guò)的窥摄，見(jiàn) https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio
解決方案
- 1镶奉、設(shè)置chrome打開(kāi)自動(dòng)播放
- 在windows下可以增加啟動(dòng)屬性以打開(kāi)
chrome.exe --disable-features=AutoplayIgnoreWebAudio - mac下目前無(wú)解，我的chrome版本為79+
- 在windows下可以增加啟動(dòng)屬性以打開(kāi)
- 2崭放、AudioContext 成功率50% 直接上代碼
var context = new window.AudioContext();
var source = null;
var audioBuffer = null;
function loadAudioFile(url) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
initSound(this.response);
};
xhr.send();
}
function initSound(arrayBuffer) {
context.decodeAudioData(arrayBuffer, function(buffer) {
audioBuffer = buffer;
playSound();
}, function(e) {
console.log('Error decoding file', e);
});
}
function playSound() {
source = context.createBufferSource();
source.buffer = audioBuffer;
source.loop = true;
source.connect(context.destination);
source.start(0);
console.log('開(kāi)始播放')
}
- 3哨苛、iframe 成功率50%
<iframe src='bgm.wav' allow='autoplay' style="opacity:0">
