html 5 autoplayが機能しないUncaaught(in promise)DOMException:play()failed because the user didn't interac
1145 ワード
Chromeのautoplayポリシーは2018年4月に変更されました.
新しい動作:ブラウザはユーザー体験を向上させ、データ消費を減らすために、現在autoplayポリシーに従っています.Chromeのautoplayポリシーは非常に簡単です.
1.muted autoplayは常に許可されている
2.音楽のautoplayは、以下の集中の場合にのみ機能します.
1. ユーザ行動発生像(click,tap,etc)がある.
2. デスクトッププログラムの場合、ユーザーは事前にオーディオを再生しています.
3. 携帯端末のユーザに対して、オーディオサイトhome screenを使用する.
ソリューション:
Open
Setting No user gesture is required
Relaunch Chrome
ユーザーの動作例:
$(
'.audioBox').
click(
function(){
$(
'.audio').
get(
0).
paused?(()
=>{
$(
'.musicImg').
attr(
'src',
'./img/audio.png');
$(
'.audioBox').
addClass(
'on');
$(
'.audio').
get(
0).
play()
})()
:(()
=>{
$(
'.musicImg').
attr(
'src',
'./img/OFF.png');
$(
'.audioBox').
removeClass(
'on');
$(
'.audio').
get(
0).
pause();
})();
})
新しい動作:ブラウザはユーザー体験を向上させ、データ消費を減らすために、現在autoplayポリシーに従っています.Chromeのautoplayポリシーは非常に簡単です.
1.muted autoplayは常に許可されている
2.音楽のautoplayは、以下の集中の場合にのみ機能します.
1. ユーザ行動発生像(click,tap,etc)がある.
2. デスクトッププログラムの場合、ユーザーは事前にオーディオを再生しています.
3. 携帯端末のユーザに対して、オーディオサイトhome screenを使用する.
ソリューション:
Open
chrome://flags/#autoplay-policy
Setting No user gesture is required
Relaunch Chrome
ユーザーの動作例:
$(
'.audioBox').
click(
function(){
$(
'.audio').
get(
0).
paused?(()
=>{
$(
'.musicImg').
attr(
'src',
'./img/audio.png');
$(
'.audioBox').
addClass(
'on');
$(
'.audio').
get(
0).
play()
})()
:(()
=>{
$(
'.musicImg').
attr(
'src',
'./img/OFF.png');
$(
'.audioBox').
removeClass(
'on');
$(
'.audio').
get(
0).
pause();
})();
})