H5 视频项目开发技巧及注意事项视频的比特率越大，单位时间需要加载的数据里越多，过大的比特率会使视频开始播放的等待时间变

一、视频压缩编码工具如何选择

Premiere Pro （推荐）；
Handbrake：英文界面，压缩速度一般，预览对阵依赖本地播放器，H5压缩教程可参考这里；
狸窝：中文界面，压缩方便，适合常规转码，但某些版本会在视频结尾加一帧黑屏，参数设置参考Handbrake的原理；

优先推荐使用Premiere Pro进行压缩和转码，速度快且方便对帧

二、Premiere 的基本使用（简称PR）

1、导入导出

image-20210402150705385aa

新建：打开PR后新建默认项目
导入：菜单文件-—导入原视频，或者直接拖拽原视频到左下角的工作区
查看：双击工作区的视频可在上方监视区查看确认视频画面
导出：在工作区选中要导出的视频，在菜单文件-—导出—媒体打开导出设置

2、导出设置

image-20210402150947917aa

格式选择H.264
预设选择匹配源
输出名称选择输出目录
在下方比特率设置一栏设置目标比特率、最大比特率为1.5Mbps左右

为什么设置比特率大小为1.5Mbps？

视频的比特率越大，单位时间需要加载的数据里越多，过大的比特率会使视频开始播放的等待时间变长，在弱网络下也会出现卡顿的现象；但是过低的比特率又会造成视频画面质量过低，影响视觉。

所以要根据实际情况调整比特率，运动镜头过多的视频可以调整到1.5，运动镜头少的视频可以调整到1-1.3左右；

3、PR 里视频帧数与时间对应关系

在 PR 的时间轴上，最后两位指的是视频的帧数（比如这个 25:24 指的是第 25 秒 24 帧），但是在 H5 里我们通过currentTime属性获取到的是视频的当前播放时间（比如 10.85 指的是第 10.85 秒），所以我们需要把再PR里读到的时间帧转换到实际的秒数，这样才不会在 H5 里出现较大的卡点错误。

以 25FPS 的视频为例，每帧的时间就是1s/25=0.04s，所以 25:14 转换后是 25.56，25:24 转换后是 25.8;

视频的帧数可以通过在PR里右键点击视频—属性查看

三、视频时间监听和跳播为什么不准

这个涉及到timeupdate事件触发间隔以及的视频编码的基本原理（I帧、P帧）。

首先来看HTMLMediaElement的timeupdate事件，根据MDN文档，timeupdate事件：

这个事件的触发频率由系统决定，但是会保证每秒触发4-66次（前提是每次事件处理不会超过250ms）。鼓励用户代理根据系统的负载和处理事件的平均成本来改变事件的频率，保证UI更新不会影响视频的解码。

多款手机实测在微信手Q等浏览器内触发频率均是 250ms 左右，所以视频总会在你监听的时间点左右 250ms 的地方触发回调，这是系统刷新频率造成的误差，所以基本没办法解决。

然后来看视频编码的基本原理（I帧、P帧）：

I帧，英文全写 Intra Picture，又称帧内编码帧，俗称关键帧。一般来说I帧不需要依赖前后帧信息，可独立进行解码。有数据表明，仅I帧的压缩率，可以达到7，这里其实可以把I帧的压缩等同于单独压缩一幅图片。至于说I帧的压缩只压缩了空间上的冗余信息，放在后续编码相关的系列文章中会详述。

P帧，英文全写 predictive-frame，又称前向预测编码帧，也有帧间预测编码帧。顾名思义，P帧需要依赖前面的I帧或者P帧才能进行编解码，因为一般来说，P帧存储的是当前帧画面与前一帧（前一帧可能是I帧也可能是P帧）的差别，较专业的说法是压缩了时间冗余信息，或者说提取了运动特性。P帧的压缩率约在20左右，几乎所有的 H264 编码流都带有大量的P帧。