目錄
前言
瀏覽器自動(dòng)播放策略
策略詳情：
實(shí)現(xiàn)方案?
方案1： 互動(dòng)后播放
方案2： 互動(dòng)后出聲
總結(jié)
前言
在開發(fā)中可能有遇到這樣的需求，當(dāng)用戶打開頁(yè)面后，需要自動(dòng)播放視頻或音頻，按理說(shuō)那就打開頁(yè)面時(shí)play()一下不就搞定了嗎，但實(shí)際情況很明顯不是，不然也沒(méi)得這篇文章嘍，要實(shí)現(xiàn)這個(gè)需求，我們得先了解一下瀏覽器自動(dòng)播放策略。再給出相應(yīng)解決方案。
瀏覽器自動(dòng)播放策略
Chrome瀏覽器的自動(dòng)播放策略自Chrome66起生效,動(dòng)機(jī)是改善用戶體驗(yàn)
策略詳情：
Chrome 的自動(dòng)播放政策很簡(jiǎn)單：
- 始終允許靜音自動(dòng)播放。
- 在以下情況下，帶聲音的自動(dòng)播放會(huì)被允許：
- 用戶已經(jīng)與當(dāng)前域進(jìn)行了交互（click、tap）
- 在桌面設(shè)備上，用戶的==媒體參與度==指數(shù)閾值已超過(guò)，這意味著用戶之前播放過(guò)有聲視頻。
- 用戶已將網(wǎng)站添加到移動(dòng)設(shè)備上的主屏幕或在桌面上安裝了 PWA。
- 頂部幀可以將自動(dòng)播放權(quán)限委派給其 iframe，以允許自動(dòng)播放聲音。
==媒體參與度（MEI,?Media Engagement Index）==
媒體參與度?（MEI） 是衡量個(gè)人在網(wǎng)站上使用多媒體的傾向。
它是一個(gè)數(shù)字，可通過(guò)?chrome://media-engagement/?查看。
數(shù)值越高，用戶對(duì)該站點(diǎn)的媒體參與度越高，就越有機(jī)會(huì)自動(dòng)播放。
但對(duì)于開發(fā)者而言：
????????媒體參與度的計(jì)算規(guī)則無(wú)法通過(guò)技術(shù)手段更改
????????媒體參與度的計(jì)算規(guī)則不同版本的瀏覽器可能會(huì)有變動(dòng)
?
實(shí)現(xiàn)方案
首先呢，我們直接在用戶進(jìn)入頁(yè)面的時(shí)候play()，可以發(fā)現(xiàn)視頻并沒(méi)有播放，并且報(bào)錯(cuò)Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="vdo-container">
<video src="./test.mp4"></video>
</div>
<script>
const vdo = document.querySelector('video');
vdo.play();
</script>
</body>
</html>
這個(gè)錯(cuò)誤的意思是瀏覽器已經(jīng)嘗試在沒(méi)有用戶交互的情況下播放媒體文件，但是因?yàn)檫@是不允許的，所以瀏覽器拒絕了該操作。如果沒(méi)有這個(gè)保護(hù)機(jī)制，那么網(wǎng)站可以在用戶不知情的情況下播放音頻和視頻，這是不安全和不負(fù)責(zé)任的行為。?
?
方案1： 互動(dòng)后播放
先嘗試自動(dòng)播放，若發(fā)生異常，則引導(dǎo)用戶進(jìn)行互動(dòng)操作，然后再進(jìn)行播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>互動(dòng)后播放</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="vdo-container">
<video src="./test.mp4"></video>
<div class="modal">
<button class="btn">開始播放</button>
</div>
</div>
<script>
const vdo = document.querySelector('video');
const modal = document.querySelector('.modal');
const btn = document.querySelector('.btn');
async function play() {
try {
await vdo.play();
modal.style.display = 'none';
btn.removeEventListener('click', play);
} catch (err) {
modal.style.display = 'flex';
btn.addEventListener('click', play);
}
}
play();
</script>
</body>
</html>
?進(jìn)入頁(yè)面后發(fā)現(xiàn)不能自動(dòng)播放，這時(shí)顯示開始播放按鈕，用戶點(diǎn)擊后開始播放。
方案2： 互動(dòng)后出聲
先靜音播放，然后根據(jù)是否能自動(dòng)播放決定是否取消靜音，如果：
- 能自動(dòng)播放，取消靜音
- 不能自動(dòng)播放，引導(dǎo)用戶進(jìn)行互動(dòng)操作后取消靜音
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>互動(dòng)后取消靜音</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="vdo-container">
<video src="./test.mp4"></video>
<div class="modal">
<button class="btn">打開聲音</button>
</div>
</div>
<script>
const vdo = document.querySelector('video');
const modal = document.querySelector('.modal');
const btn = document.querySelector('.btn');
function play() {
vdo.muted = true; // 靜音
vdo.play();
const ctx = new AudioContext();
const canAutoPlay = ctx.state === 'running';
ctx.close();
if (canAutoPlay) {
vdo.muted = false;
modal.style.display = 'none';
btn.removeEventListener('click', play);
} else {
modal.style.display = 'flex';
btn.addEventListener('click', play);
}
}
play();
</script>
</body>
</html>
進(jìn)入頁(yè)面后靜音播放視頻，然后判斷是否允許自動(dòng)播放，如果允許，則取消靜音，但我們這里不允許，所以顯示打開聲音按鈕。?
引用的index.css文件內(nèi)容如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.vdo-container {
width: 50%;
margin: 1em auto;
position: relative;
}
video {
display: block;
width: 100%;
}
.modal {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.btn {
border: none;
outline: none;
background: #409eff;
color: #fff;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
text-align: center;
transition: 0.1s;
font-weight: 500;
user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.btn:hover {
background: #66b1ff;
}
.btn:active {
background: #3a8ee6;
}
.btn:disabled {
background: #66b1ff80;
cursor: not-allowed;
}
?
?
總結(jié)
如果文中出現(xiàn)有瑕疵的地方各位通過(guò)評(píng)論或者私信聯(lián)系我，我們一起進(jìn)步，有興趣的伙伴可以關(guān)注訂閱一下：點(diǎn)擊查看更多實(shí)用技巧及技術(shù)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-759757.html
?
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-759757.html
到了這里，關(guān)于瀏覽器自動(dòng)播放音視頻-前端實(shí)現(xiàn)方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
