网页视频autoplay兼容及解决方案 | 您所在的位置:网站首页 › 浏览器flash限制解除设置方法视频播放失败 › 网页视频autoplay兼容及解决方案 |
网页视频自动播放的局限
自动播放是指无需经过用户的同意就可以开始播放视频。这包括在video元素使用autoplay属性或者通过JavaScript代码直接调用video元素的play方法。 和 videoElement.play(); 非常遗憾的是,各个浏览器都为多媒体的自动播放设置了不尽相同的限制策略,也就意味着目前想要实现有良好兼容性的自动播放,是很难办到的。 各个浏览器对视频自动播放的限制 IOSIOS9以下版本: 无法自动播放 (在当时移动互联网的条件下,播放一个视频的流量和电量成本都是非常高的,因此视频的播放必须要先经过用户同意) IOS10以上版本: (浏览器厂商不给自动播视频,开发者只好曲线救国,使用GIF动图代替视频实现自动播放,但是GIF动图需要消耗的流量是视频的12倍,性能消耗是视频的2倍,并且移动互联网发展飞速,用户对视频播放占用的流量和电量也不再这么敏感,于是决定给移动设备的视频自动播放放宽限制) 满足下列条件可以自动播放: 1.视频的源是没有音轨的或video元素使用了muted属性手动静音 2.video元素需要在屏幕上可见 3.video元素设置了playinline属性 videoElement.play()满足下列条件可以自动播放: 1.视频的源是没有音轨的或video标签使用了muted属性手动静音 2.video元素设置了playinline属性 以下行为将导致自动播放失效: 元素在没有用户手势的情况下有了音轨或取消了静音,播放将被暂停 Chrome in AndroidAndroid 4.3及以下版本: 4.3及以下版本的安卓,使用的是基于Webkit实现的内核,和ios有着相同的表现 无法自动播放 (4.4及以上版本的安卓,用上了Bink/Chromium内核,有了自己的一套限制规则) Chrome 53版本以前: 无法自动播放 Chrome 53版本以后,Chrome 58版本以前: 和videoElement.play()满足下列条件可以自动播放: 1.视频的源是没有音轨的或video元素使用了muted属性手动静音 2.用户未开启流量节省模式 Chrome 58版本以后,Chrome66版本以前: 满足下列条件可以自动播放: 1.视频的源是没有音轨的或video元素使用了muted属性手动静音 2.用户未开启流量节省模式 3.video元素需要在屏幕上可见 或 1.站点被"添加到主屏幕",且视频的源在manifest文件标识的范围内 videoElement.play()满足下列条件可以自动播放: 1.视频的源是没有音轨的或video元素使用了muted属性手动静音 2.用户未开启流量节省模式 Chrome 66版本以后: 在Chrome 58版本的基础上移除了“未开启流量节省模式”的限制 Chrome in PCChrome 66版本以前: 完全支持自动播放 Chrome 66版本及以后: 视频的源是没有音轨的或video元素使用了muted属性手动静音 或 站点是一个PWA应用,并且用户把它安装到了桌面 Safari in PCSafari 11版本以前: 完全支持自动播放 Safari 11版本以后: 视频的源是没有音轨的或video元素使用了muted属性手动静音 可以发现,无论是什么浏览器内核,它们对于视频自动播放限制的改动趋势都是相近的,移动端在不断地放松限制,而桌面端则在不断地收紧限制,直到达成了一个近乎统一的标准:只有静音视频才能自动播放。 参考: Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and Animated GIFs! Media updates in Chrome 58 Chrome's autoplay feature updated video policies for iOS Auto-Play Policy Changes for macOS 解决办法 1. 静音自动播放只在桌面端使用的网页,采取静音的方式自动播放视频,移动端则无法在低版本手机中正常运行。 2. 通过用户交互行为解除自动播放限制在桌面端浏览器上,可以通过在调用video.play()方法之前引导用户与页面产生交互行为,即可使自动播放限制解除。 在移动端,只允许通过用户交互来触发有声媒体的播放,而不是在用户与页面产生交互后解除自动播放限制,因此需要把video.play()方法放到HTMLElement容器的交互事件回调中(点击/触摸)。 document.body.addEventListener('click', () => { console.log('触发播放') this.videoRef.play(); })结合静音自动播放与交互播放 视频自动播放时设置 muted: true。 video.play()方法绑定到HTMLElement容器的交互事件回调中(点击/触摸)。 在播放界面上通过图标显示当前视频被静音,引导用户点击。 当用户点击绑定的容器时,在事件的回调中将视频再次播放,此时无需设置静音,同时更改静音图标!用户手势令牌过期 如果需要在获得用户手势令牌后,延迟数秒进行video.play()方法的调用,比如说想要在交互事件回调函数中先异步请求视频链接再进行播放,则需要注意在移动端,用户的手势令牌可能会在N秒后过期,在不同的机型中N的大小也不同,即延迟调用video.play()方法可能会失效。 尝试在点击事件回调中延迟几秒调用play()方法并捕获报错:Play() can only be initiated by a user gesture. 在线尝试 解决办法:先调用video.load(),再去延迟调用video.play()。 button.addEventListener('click', onButtonClick); function onButtonClick() { // This will allow us to play video later... video.load(); fetchVideoAndPlay(); } function fetchVideoAndPlay() { fetch('https://example.com/srcApi') .then(src => { video.src = src; return video.play(); }) .then(_ => { // Video playback started ;) }) .catch(e => { // Video playback failed ;( }) }参考: DOMException: The play() request was interrupted 3. 检测自动播放,播放失败时回退到用户交互触发播放 通过play API返回的Promise检测自动播放成功还是失败不使用autoplay属性,而是调用play API来尝试进行自动播放,高版本浏览器会返回一个Promise,如果自动播放失败,则Promise会拒绝(低版本浏览器不会返回Promise,此时可以通过事件或参数来检测自动播放) 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 }); } 通过video事件或参数检测自动播放成功,通过超时判断自动播放失败使用autoplay属性,或调用play API来尝试进行自动播放,通过监听由自动播放触发的play事件,监听timeupdate事件,查看currentTime是否发生了变化等等办法来检测自动播放成功,并通过设置定时器超时来作为判断自动播放失败的依据。 this.videoRef.addEventListener('timeupdate', (e) => { // console.log('视频自动播放成功'); }) this.videoRef.addEventListener('canplay', (e) => { // console.log('视频已就绪'); setTimeout(() => { // console.log('视频自动播放失败'); }, this.maxWaitTime) })不要假设video标签一定会按照预期触发某个事件或改变某个属性。 4. 增加网站视频的受众,解除自动播放的限制浏览器的限制策略不是绝对的,如果在本地尝试将你的网页代理到知名的视频网站(比如youtube.com),会发现自动播放限制被解除了。 直接尝试自动播放失败,并报错显示“调用play()方法失败,因为用户尚未与文档产生交互” 将页面代理到知名视频网站的域名后,自动播放成功 桌面端Chorme会针对用户给每个网站统计一个MEI指数,用来衡量用户在网站上消费多媒体的倾向强烈程度,并在浏览器内维护一个MEI列表(无法通过JS探测)。当用户在网站上观看视频并满足以下条件时 观看时长大于 7 秒。 视频音轨存在并且没有静音。 带有视频的选项卡处于活跃状态。 视频的像素大小大于200x140。 浏览器就会提高该网站的MEI指数,当网站的MEI指数足够高时,自动播放的限制就会被解除。 新用户会加载一个初始MEI列表,这个初始列表会预先植入一些被很多用户打了MEI高分的网站,也就是说如果一个网站有足够多的用户允许自动播放,那么这个网站就会默认得到新用户的MEI高分,并放开自动播放限制(这个初始列表是完全由算法生成的)。并且这个初始列表会被用户个人的MEI行为所覆盖。 通过访问chrome://media-engagement来查看你的MEI列表(不包含初始MEI列表) 桌面端Safari也有类似的策略,它宣称“使用自动推理引擎来阻止大多数网站自动播放带有声音的视频”,但没有公开具体的策略内容。 参考: 媒体参与指数(Media Engagement Index,MEI) Web Audio, Autoplay Policy and Games 5. 使用gif图片,顺序展示序列图片等手段模拟视频效果使用gif图片模拟视频播放效果。 使用动态绘制图片到canvas的方式模拟视频播放效果: 图片对象预加载,放在内存中; 播放开始,canvas擦除上一帧图片,同时绘制当前帧图片。使用动态更新图片dom的方式模拟视频播放效果: 图片对象预加载,放在内存中; 播放开始,页面添加当前图片元素,同时移除上一帧图片元素,保证页面中仅有一个图片元素。由于动态更新图片dom的方式本质是播放html元素,因此还可以实现弱网状态下“抽帧播放”,在“视频播放”中手动添加额外信息等。 查看在线演示 参考: www.didiglobal.com juejin.cn/post/686958… |
CopyRight 2018-2019 实验室设备网 版权所有 |