網(wǎng)站內容更新策略(PC端瀏覽器的限制策略和應對方案使用MacPC測試

)

　　不同瀏覽器下自動(dòng)播放的限制策略與方案比較PC瀏覽器的限制策略與對策

　　使用MAC在PC上測試的瀏覽器包括

　　瀏覽器限制策略

　　內容引用自

　　2018年4月發(fā)布的Chrome 66正式關(guān)閉了自動(dòng)聲音播放功能

　　Mei是一個(gè)評估用戶(hù)在當前網(wǎng)站上的媒體參與度的指數，這取決于

　　

- 用戶(hù)在媒體上停留時(shí)間超過(guò)了 7 秒以上

- 音頻必須是展示出來(lái)，并且沒(méi)有靜音

- 與 video 之間有過(guò)交互

- 媒體的尺寸不小于 200x140.

　　鉻溶液

　　var promise = document.querySelector("video").play();

if (promise !== undefined) {

promise

.catch(error => {

// Auto-play was prevented

// Show a UI element to let the user manually start playback

})

.then(() => {

// Auto-play started

});

}

　　safari瀏覽器的限制策略與對策

　　內容引用自

　　Safari瀏覽器使用自動(dòng)推理引擎阻止默認情況下自動(dòng)播放的大多數網(wǎng)站媒體元素

　　Safari11允許用戶(hù)通過(guò)“此網(wǎng)站的設置”選項控制哪些網(wǎng)站可以自動(dòng)播放音頻和視頻

　　無(wú)聲自動(dòng)播放的示例：

　　

　　彈出對話(huà)框指導用戶(hù)生成交互示例：

　　

　　指導用戶(hù)將瀏覽器設置為[允許自動(dòng)播放]的示例：

　　

　　

　　火狐瀏覽器

　　個(gè)人測試的結果是Firefox瀏覽器支持自動(dòng)播放

　　手機瀏覽器的制約策略與對策

　　使用Android手機測試的瀏覽器包括以下內容

　　其中，Firefox/Browser/nail在視頻自動(dòng)播放方面表現良好

　　微信的制約策略與對策

　　微信自動(dòng)播放需要API weixinjsbridge

　　它在微信內置瀏覽器中有一個(gè)內置JS對象。內置的JS對象是weixinjsbridge。WebView一打開(kāi)，Weixinjsbridge就不存在?？蛻?hù)端需要初始化此對象。當這個(gè)對象就緒時(shí)，客戶(hù)端將拋出一個(gè)事件“weixinjsbridgeready”。因此，在調用weixinjsbridge相關(guān)API時(shí)，需要判斷weixinjsbridge是否存在

　　//*敏*感*詞* WeixinJSBridge 是否存在

if (

typeof WeixinJSBridge == "object" &&

typeof WeixinJSBridge.invoke == "function"

) {

vedio.play();

} else {

//*敏*感*詞*客戶(hù)端拋出事件"WeixinJSBridgeReady"

if (document.addEventListener) {

document.addEventListener(

"WeixinJSBridgeReady",

function() {

vedio.play();

},

false

);

} else if (document.attachEvent) {

document.attachEvent("WeixinJSBridgeReady", function() {

vedio.play();

});

document.attachEvent("onWeixinJSBridgeReady", function() {

vedio.play();

});

}

}

　　chrome在移動(dòng)終端上的限制和解決方案Safari在移動(dòng)終端上的限制和解決方案UC瀏覽器在移動(dòng)終端上的限制和解決方案音頻策略和解決方案

　　參考資料

　　音頻元素

　　除了使用音頻標簽進(jìn)行本機音頻播放外，還有另一個(gè)稱(chēng)為audiocontext的API。audiocontext接口表示由音頻模塊連接的音頻處理圖，每個(gè)模塊對應一個(gè)audionode。Audiocontext可以控制其收錄節點(diǎn)的創(chuàng )建以及音頻處理和解碼操作的執行。在做任何事情之前創(chuàng )建一個(gè)audiocontext對象，因為一切都是在這個(gè)環(huán)境中發(fā)生的

　　當audiocontext播放聲音時(shí)，首先請求音頻文件并將其放入arraybuffer中，然后使用audiocontext API對其進(jìn)行解碼，然后讓其在解碼后播放

　　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();

});

}

　　實(shí)例化audiocontext

　　// Safari是使用webkit前綴

let context = new (window.AudioContext || window.webkitAudioContext)();

　　解碼播放

　　function play (context, decodeBuffer) {

let source = context.createBufferSource();

source.buffer = decodeBuffer;

source.connect(context.destination);

// 從0s開(kāi)始播放

source.start(0);

}

// 請求音頻數據

let audioMedia = await request(url);

// 進(jìn)行decode和play

context.decodeAudioData(audioMedia, decode => play(context, decode));