网站内容更新策略(PC端浏览器的限制策略和应对方案使用MacPC测试 )

　　网站内容更新策略(PC端浏览器的限制策略和应对方案使用MacPC测试

)

　　不同浏览器下自动播放的限制策略与方案比较PC浏览器的限制策略与对策

　　使用MAC在PC上测试的浏览器包括

　　浏览器限制策略

　　内容引用自

　　2018年4月发布的Chrome 66正式关闭了自动声音播放功能

　　Mei是一个评估用户在当前网站上的媒体参与度的指数，这取决于

　　

- 用户在媒体上停留时间超过了 7 秒以上

- 音频必须是展示出来，并且没有静音

- 与 video 之间有过交互

- 媒体的尺寸不小于 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浏览器使用自动推理引擎阻止默认情况下自动播放的大多数网站媒体元素

　　Safari11允许用户通过“此网站的设置”选项控制哪些网站可以自动播放音频和视频

　　无声自动播放的示例：

　　

　　弹出对话框指导用户生成交互示例：

　　

　　指导用户将浏览器设置为[允许自动播放]的示例：

　　

　　

　　火狐浏览器

　　个人测试的结果是Firefox浏览器支持自动播放

　　手机浏览器的制约策略与对策

　　使用Android手机测试的浏览器包括以下内容

　　其中，Firefox/Browser/nail在视频自动播放方面表现良好

　　微信的制约策略与对策

　　微信自动播放需要API weixinjsbridge

　　它在微信内置浏览器中有一个内置JS对象。内置的JS对象是weixinjsbridge。WebView一打开，Weixinjsbridge就不存在。客户端需要初始化此对象。当这个对象就绪时，客户端将抛出一个事件“weixinjsbridgeready”。因此，在调用weixinjsbridge相关API时，需要判断weixinjsbridge是否存在

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

if (

typeof WeixinJSBridge == "object" &&

typeof WeixinJSBridge.invoke == "function"

) {

vedio.play();

} else {

//*敏*感*词*客户端抛出事件"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在移动终端上的限制和解决方案Safari在移动终端上的限制和解决方案UC浏览器在移动终端上的限制和解决方案音频策略和解决方案

　　参考资料

　　音频元素

　　除了使用音频标签进行本机音频播放外，还有另一个称为audiocontext的API。audiocontext接口表示由音频模块连接的音频处理图，每个模块对应一个audionode。Audiocontext可以控制其收录节点的创建以及音频处理和解码操作的执行。在做任何事情之前创建一个audiocontext对象，因为一切都是在这个环境中发生的

　　当audiocontext播放声音时，首先请求音频文件并将其放入arraybuffer中，然后使用audiocontext API对其进行解码，然后让其在解码后播放

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

});

}

　　实例化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开始播放

source.start(0);

}

// 请求音频数据

let audioMedia = await request(url);

// 进行decode和play

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