移动端视频作为全屏背景播放

首先附上参考文章：PC端、移动端Video自动播放兼容完美解决方案（IOS、安卓、微信端）

在此之前搜寻了两天使用video标签的解决办法，x5-video-player-type和webkit-playsinline属性都不管用，出项的问题是，进入首页自动播放时会唤起手机的视频播放器（safari），还有不会自动播放的（微信内嵌网页）

最后终于遇到参考文章的办法，序列图片视频化

滴滴的移动端官网就是这样的办法实现的类似效果

以下是我在react项目中涉及到的相关代码，可做相关参考

const videoBox = useRef(null);
  useEffect(() => {
    // 动态设置序列图片列表
    var store = [];
    for (let index = 1; index < 639; index++) {
      const idx = index.toString().length < 2 ? '00' + index : index.toString().length < 3 ? '0' + index : index;
      const url = require(`@m/assets/images/header_video/${idx}.jpg`);
      const img = document.createElement('img');
      img.src = url;
      store.push(img);
    }
    // 动态改变页面图片
    let index = 0;
    let timer;
    let step = function () {
      let img = videoBox.current?.children[0];
      if (img) videoBox.current.removeChild(img);
      index++;
      if (index >= 638) index = 0; // 循环
      videoBox.current?.appendChild(store[index]);
      timer = setTimeout(step, 42); // 42是按照每秒24帧计算的值---1000/24
    };
    step();
    return () => {
      clearTimeout(timer);
    };
  }, []);


<div className={styles['videoBox']} ref={videoBox}></div>