pc端大号视频的优化

pc端大视频优化加载

需求背景

首页渲染一个16秒40M的视频？？这加载得加载到猴年，想到一个方案-拆分视频资源，经过专业小伙伴的努力压缩，最终拆分成4段视频，每段2M左右。

技术方案

拆分成4段小视频，按顺序播放，最终形成一个完整的16秒的视频

实现过程：

• 第一次试水（失败）： 由于不想生成4个video，就采用了使用一个video，动态改变src的方式，但是这种方式在切换的瞬间，由于新的资源加载，会出现闪屏现象，固pass（不贴代码了）。
• 第二次试水（成功）： 本次主要解决闪屏的问题。还是选择4个video，通过控制dom的opacity来控制视觉上的连续。 核心思想：监听每段视频的ended播放完成，播放中的视频opacity:1，其余都是0。 ps:每段视频播放完之后要移除监听，不然会一直监听到那段视频的ended

  const { data: videoList } = props;
  const videos = useRef([]);
  const [count, setCount] = useState(0);
  const loop = () => {
    videoList.forEach((item, index) => {
      if (videos.current?.children) {
        videos.current.children[index].style.opacity = 0;
        videos.current.children[index].removeEventListener('ended', loop);
      }
    });
    setCount((pre) => {
      let newCount = pre + 1;
      if (pre === 3) {
        newCount = 0;
      }
      play(newCount);
      return newCount;
    });
  };
  const play = (c) => {
    videos.current.children[c].style.opacity = 1;
    videos.current.children[c].play();
    videos.current.children[c].addEventListener('ended', loop);
  };

  useEffect(() => {
    play(0);
  }, []);

  return (
    <div className={styles.box}>
      <div className={styles.banner} ref={videos}>
        {videoList.map((item, index) => {
          return (
            <video
              muted
              preload="auto"
              src={item}
              key={index}
              data-count={count}
            />
          );
        })}
      </div>
    </div>
  );
};