序列的页面优化

1. 解决方案：
   目前产品页面加载对于根据鼠标滚动播放的画面多以序列帧的表现形式，此方式加载会使浏览器内存占用过高，渲染不及时会导致页面掉帧等其他性能问题，本次方案主要使用webm视频代替传统序列的加载。

2. 什么是webm视频?
   WebM是一种免版权的视频文件格式，旨在为网络开发高质量、开放的视频格式。它是一个开放、免费的媒体文件格式，专为在网络上共享视频而设计，可作为商标H.264和H.265标准的免版税替代品。WebM文件由使用VP8或VP9视频编解码器压缩的视频流和使用Vorbis或Opus音频编解码器压缩的音频流组成。WebM旨在与HTML5视频和音频元素一起使用，因此WebM文件主要用于在线视频共享。WebM文件在网络浏览器中播放时计算量较小，适用于很多配置较低的设备。

3. 总结：
   -加载时间：页面序列帧和视频的加载时间都会有不同程度的影响用户体验。序列需要下载和处理大量的图像文件，可能会增加整体加载时间；视频文件通常具有较高的压缩率，因此相对较小，加载时间更短；
   -渲染性能：性能越低加载越慢过多的动画效果会占用大量的内存和CPU资源，导致页面渲染缓慢，反应迟钝。序列的每一帧都需要通过JavaScript代码或其他方式进行处理和渲染，这可能会导致性能下降，尤其是在旧的设备或性能较低的浏览器上；视频的渲染性能通常较好，特别是在现代浏览器中，因为视频播放是由浏览器的媒体播放器处理的；
   -文件大小：每个序列通常有150帧左右，而为了减小页面资源加载，在支持webp图片的浏览器中需要加载webp图片，所以一共需要放置300张图片到文件夹中，文件可以达到几十兆；而5秒左右的视频中文件压缩后最多只有几兆；

4. 如何转换
   （1）使用ffmpeg
   详细命令
   ruby ffmpeg -i video.mp4 -c:v libvpx-vp9 -crf 30 -framerate 30 -g 3 -b:v 0 video.webm
   js

let format = 'webm';

# 有的浏览器不支持webm格式的视频，这里做个判断
if ( Modernizr.safari || Modernizr.ios || Modernizr.ie ) {
    format = 'mp4';
}
let video = `<picture class="video lazy-imageom">
      <video id="video" muted="true" playsinline="true" preload="metadata"  webkit-playsinline="true" x5-video-player-type: h5-page src="`+ IMAGE_HOST +`images/yourVideo.${format}" poster="`+ IMAGE_HOST +`images/video-poster.jpg" type="video/${format}"></video>
  </picture>`;

let addVideo = () => {
    $wrap.find('.umx-hinge-video').prepend(video); 
    let $Media = document.querySelector('#video');
    ScrollTrigger.create({
        // animation: tl,
        trigger: $wrap,
        scrub: true,
        // markers: true,
        start: "top 30%",
        end: "bottom bottom",
        onUpdate: function (e) {
            if (!isNaN($Media.duration)) {
                $Media.currentTime = e.progress * $Media.duration;
            }
        },
    })
}

#这里设置滚动到当前页加载
let flag = true;
let judgePosition = (target) => {
    return ($(window).scrollTop() >= target.offset().top - $(window).height() && $(window).scrollTop() <= target.offset().top + target.height() );
};

let timer = setInterval(() => {
    if (judgePosition($wrap) && flag) {
        flag = false;
        addVideo();
        clearInterval(timer);
    }
}, 60);