关于视频展示卡顿的分析及优化

• 关于视频展示卡顿的分析及优化
  一、造成页面视频卡顿的原因
  - 1. 编码格式
  - 2. 分辨率和帧率
  - 3. 压缩率
  - 4. 视频加载方式
  二、页面视频对比分析
  - 对比三个质量差不多视频的可视化图表
  三、页面视频优化的解决方案

关于视频展示卡顿的分析及优化

一、造成页面视频卡顿的原因

1. 编码格式

• 常见的视频编码格式包括H.264、H.265、VP9等；三种编码格式的特点、优缺点及其不同之处：

（1）H.264（也称为 AVC）
特点：H.264 是一种广泛使用的视频编码标准，支持各种分辨率，适用于从低到高的多种视频需求。它在压缩效率和视频质量之间取得了良好的平衡。
优点：兼容性好，几乎所有设备和平台都支持 H.264。在相对较低的比特率下仍能提供较高的视频质量。处理速度较快，编码和解码效率高。
缺点：相比于 H.265 和 VP9，压缩效率较低，文件大小相对较大。由于专利问题，使用 H.264 可能需要支付费用。

（2）H.265（也称为 HEVC）
特点：H.265 是 H.264 的继任者，旨在提高压缩效率，尤其是在高分辨率视频（如 4K 和 8K）中表现更佳。
优点：压缩效率高，能够在相同的视频质量下将文件大小减少约 50%。在高分辨率视频中，表现优异，适合流媒体和视频存储。
缺点：兼容性较差，虽然越来越多的设备开始支持 H.265，但仍然不如 H.264 普遍。
编码和解码的计算复杂度较高，需要更强的硬件支持。可能涉及专利费用，使用时需注意相关许可。

（3）VP9
特点：VP9 是 Google 开发的一种开源视频编码格式，主要用于网页视频（如 YouTube）。
优点：开源且免费，使用不需要支付专利费用。在相同的画质下，压缩效率可与 H.265 相媲美，能够减少文件大小。支持高分辨率视频，适用于流媒体传输。
缺点：兼容性相对较差，虽然支持 VP9 的设备逐渐增多，但仍不如 H.264 广泛。编码和解码速度较慢，可能需要更多的计算资源。

• 总结
  （1）H.264：兼容性好，适用于大多数应用，但压缩效率较低，这个也是我们目前使用的编码格式。
  （2）H.265：压缩效率高，适合高分辨率视频，但兼容性和计算复杂度较高。
  （3）VP9：压缩效率优异，能在保持相同质量的前提下提供更低的比特率，但兼容性和编码速度较差。

2. 分辨率和帧率

• 高清视频（如1080p或4K）以及较高的帧率（如60帧每秒）会增加数据传输和解码的负担。较高的分辨率和帧率可能需要更好的硬件和带宽支持。

3. 压缩率

• 较高的压缩率可能导致视频质量下降，但能减小文件大小，帮助在低带宽下流畅播放。

4. 视频加载方式

• 视频加载方式的选择也会影响页面性能。如果在页面加载时立即加载大量视频，可能会导致页面初始加载时间过长，从而影响用户体验。

二、页面视频对比分析

• 主要对比页面HUAWEI Mate XT 非凡大师、VIVO x200pro；

• 对比结论
  （1）、华为 Mate XT 使用的是mp4格式视频的加载方式。页面内的视频压缩率较高，清晰度较低，视频质量较小单个视频质量基本都在5M以内，视频编码格式为H.264，分辨率3840x1920，比例为 2:1；

  （2）、vivo x200pro 使用的是webm格式视频的加载方式。页面内的视频也有压缩，使用的是 VP9 编码，但是webm格式视频相对比mp4格式视频在清晰度差不多的情况下，webm格式视频质量会更小一些，分辨率3840x2160 (4K UHD)，比例为 16:9，；

  （3）、我们输出的视频使用的是mp4格式视频的加载方式，为了不影响视觉效果所以压缩的相对较少，视频编码格式为H.264，分辨率1920x1080 (Full HD)，比例为 16:9；

对比三个大小差不多视频的数据

• 蓝色条形图：表示每个视频的比特率，单位为 kbps。比特率越高，画质通常越好，但文件体积也越大。
• 绿色折线图：表示视频的分辨率（以像素为单位），越高的分辨率意味着更清晰的画质，特别是在大屏幕上。
• 每个条形图上方标注的数字代表该视频的帧率（fps），帧率影响视频的流畅度。

• 加载详情

视频文件名	视频时长	视频大小	加载时间
uimix-4.8.mp4	3s	4.8 MB	1.10 s
huawei-4.6.mp4	7s	4.6 MB	1.13 s
x200-4.7.webm	7s	4.7 MB	1.00 s

三、页面视频优化的解决方案

1. 将页面加载视频格式将mp4改成webm格式；

• 方法：使用ffmpeg转换

命令：
ffmpeg -i input.mp4 \
-vcodec libvpx-vp9 -vf "scale=3840:2160,fps=24" \
-acodec libvorbis -ar 48000 \
-y output.webm

• 测试数据（相同视频不同格式）

视频格式	视频时长	视频大小	加载时间
mp4	3s	4.8 MB	1.10 s
webm	3s	1.2 MB	950 ms

2. 减少帧率，适度提高压缩率；

• 方案：减少帧率可以有效降低文件体积和解码计算负担，适合在不影响视觉效果的情况下优化性能。可以将帧率从 30 fps 降低到 24 fps，既减少文件大小，又保留视频流畅性。
• 方法：结合 ffmpeg 工具调整视频的帧率，同时适度提高压缩率以进一步优化加载性能。

命令：
ffmpeg -i input.mp4 \
-vf "fps=24" \
-crf 28 \
-y output.mp4

3. 使用懒加载与 Intersection Observer

• 方案：通过懒加载仅在需要时加载视频资源，可以显著减少页面初始加载时间。
• 使用 IntersectionObserver 替代传统的 setInterval 或 scroll 事件监听方式，减少轮询过于频繁可能导致不必要的性能消耗。

// 原代码
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);


// 替换为
let observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            addVideo();
            observer.disconnect(); // 加载完成后取消观察
        }
    });
});

observer.observe($wrap[0]);