TIPs
setInterval
andsetTimeout
aren't synced to when the browser is going to draw a new frame. However, requestAnimationFrame calls you at just the right time to sync your animation with the screen and it also only calls you if your tab is visible.
移动端浏览器
- 移动端浏览器大部分禁用video和audio的autoplay功能。这样做主要是为了防止不必要的自动播放浪费流量。同时,很多移动端浏览器也不支持首次JS调用play方法进行播放,只有用户首先手动点击播放,然后才可以用JS代码进行play。
- Apple documentation: "Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations. In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it."
- 关于muted autoplay:用来替代GIF的方案(Apple官网)。
- 微信自带的浏览器使用X5内核(Android),而使用webkit内核(iOS)。目前没有有效的方法实现video的自动播放。以下是一些尝试,但不成功:
1.设置video属性autoplay;
2.通过js调用play();
3.通过js来触发click事件;
4.使用插件videojs;
5.通过js调用load()然后再调用play();
6.设置video属性webkit-playsinline="true";
7.touchstart监听;
8.stalled事件处理;
9.canplaythrogh事件处理;
10.readyState大于2的处理;
11.DOMContentLoaded监听;
12.微信js api中WeixinJSBridgeReady;
13.微信js api中getNetworkType;
14.白名单;