网页视频自动播放的局限自动播放是指视频可以在没有用户同意的情况下开始播放。这包括在视频元素上使用自动播放属性或直接从JavaScript代码调用视频元素的播放方法。和videoElement.play();遗憾的是，各个浏览器对多媒体自动播放设置了不同的限制策略，这意味着目前想要实现兼容性好的自动播放是很难实现的。各种浏览器对自动播放视频的限制IOSIOS9以下版本：（在当时的移动互联网条件下，播放视频的流量和电量成本非常高，所以播放视频必须先通过用户）无法自动播放IOS10及以上版本：（浏览器厂商不允许自动播放视频，开发者不得不曲线救国，用GIF动画代替视频实现自动播放，但是GIF动画需要消耗12倍视频的流量，性能消耗是视频的2倍，随着移动互联网的高速发展，用户对视频播放的流量和功耗不再那么敏感，所以决定放宽限制移动设备自动播放视频）满足以下条件可自动播放：1.源没有音轨或视频o元素使用muted属性手动静音。2.视频元素需要在屏幕上可见。3.视频元素设置了playinline属性。videoElement.play()满足以下条件可以自动播放：1.视频的来源是没有音轨或者??video标签使用muted属性手动静音2.video元素设置了playinlineattribute以下行为会导致自动播放失败：参考：DOMException：播放（）请求被中断播放失败时触发播放，使用播放API返回的Promise来检测自动播放是否成功，不使用autoplay属性，而是调用播放API尝试自动播放，高版本浏览器会返回一个Promise，如果自动播放失败，Promise会拒绝（低版本浏览器不会返回Promise，自动播放可以通过事件或参数检测）varpromise=document.querySelector('video').play();if(promise!==undefined){promise.catch(error=>{//自动播放被阻止//显示一个UI元素t让用户手动开始播放}).then(()=>{//自动播放开始});}通过视频事件或参数检测自动播放是否成功，判断自动播放失败暂停。使用autoplay属性，或者调用playAPI尝试自动播放，通过监听自动播放触发的play事件，监听timeupdate事件，检查currentTime是否改变等检测自动播放是否成功,并设置定时器超时作为自动播放失败的判断根据this.videoRef.addEventListener('timeupdate',(e)=>{//console.log('videoautoplaysuccessful');})this.videoRef.addEventListener('canplay',(e)=>{//console.log('视频已准备就绪');setTimeout(()=>{//console.log('视频自动播放失败');},this.maxWaitTime)})不要假设视频标签会按预期触发事件或属性更改。4.增加网站视频的播放量，取消自动播放限制。浏览器的限制策略不是绝对的。如果你尝试在本地将你的网页代理到知名视频网站（如youtube.com），你会发现自动播放的限制已经解除。直接尝试自动播放失败，并显示一条错误消息“调用play()方法失败，因为用户尚未与文档交互。”将页面代理到知名视频网站域名后，自动播放成功桌面Chorme会给用户每个网站统计一个MEI指数，用来衡量用户消费多媒体的倾向网站，并在浏览器中维护一个MEI列表（无法被JS检测到）。用户在本站观看视频且满足以下条件时，观看时长大于7秒。视频音轨存在且未静音。带有视频的选项卡处于活动状态。视频的像素大小大于200x140。浏览器会增加网站的MEI指数，当网站的MEI指数足够高时，就会解除自动播放的限制。新用户会加载一个初始的MEI列表，这个初始列表会预嵌一些用户多的MEI评分高的网站，也就是说，如果一个网站有足够的用户允许自动播放，那么这个网站会得到新用户的高MEI分数和自动播放限制的自由化（这个初始列表完全是算法生成的）。而这个初始列表会被用户个人的MEI行为所覆盖。通过访问chrome://media-engagement查看你的MEI列表（不包括最初的MEI列表）DesktopSafari有类似的政策，声称“使用自动推理引擎来防止大多数网站自动播放有声视频”，但是没有透露具体的政策内容。参考：媒体参与指数(MEI)网络音频、自动播放政策和游戏5。Usegifpictures,sequentiallydisplaysequencepicturesetctosimulatevideoeffects使用gif图片模拟视频播放效果。使用动态绘制图片到canvas的方法来模拟视频播放效果：图片对象预加载，放在内存中；开始播放时，画布擦除上一帧图片，同时绘制当前帧图片。通过动态更新imagedom来模拟视频播放效果：image对象被预加载并存储在内存中；播放开始时，将当前的图片元素添加到页面中，并移除上一帧图片元素，保证页面中只有一个图片元素。由于动态更新图片dom的方式是播放html元素，所以也可以在弱网状态下实现“抽帧播放”，在“视频播放”中手动添加附加信息。查看在线演示参考：https://www.didiglobal.comhttps://juejin.cn/post/686958...
