如何解决Safari中HTML5视频渐变慢动作的缓冲卡顿问题？

除Safari外的浏览器修改playbackRate不会中断视频播放，但在Safari（iOS、macOS）中，每次修改playbackRate都会触发重新缓冲（产生0.5秒暂停）。我想通过每50ms修改video.playbackRate实现视频渐变慢动作，以下代码在其他浏览器正常，但Safari中无法工作，求解决思路：

var rint=null;
function iniramp(){
//pt 是慢动作的核心时间点
    var sr=pt-1.5,er=pt+1.5; 
    if(sr<0)sr=0;
//et 是视频总时长
    if(er>et)er=et;
    video.currentTime=sr;
    video.playbackRate=0.98;
    rint=setInterval(function(){doramp(sr,er)},50);
    if (video.paused) video.play();
}


function doramp(sr,er){
    var p,step=0.02,pbr=video.playbackRate,minrate=0.25,ct=parseFloat(video.currentTime);
    if (pbr<0.5)step=0.01;
    if (ct<pt){
        p=pbr-step;
        if(p<minrate)p=minrate;
    } else {
        p=pbr+step;
        if(p>1)p=1;
        if (ct>er){endramp();iniramp();return false;}
    }
    video.playbackRate=p;
}

解决思路 #

• 减少playbackRate修改频率：Safari的缓冲触发源于高频修改播放速率，可提前计算整个慢动作阶段的速率曲线，把连续50ms一次的小幅度修改合并为200-300ms一次的调整，按比例放大步长，保证渐变效果不变，同时降低缓冲概率。
• 手动控制currentTime模拟变速：暂停视频自动播放，用requestAnimationFrame（或高精度定时器）根据目标速率逐步递增video.currentTime，完全绕开修改playbackRate的逻辑。比如当目标速率是0.5时，每帧增加1/60 * 0.5秒的时间，实现慢动作效果。
• 预加载慢动作片段：在启动渐变前，先将视频定位到慢动作起始点sr，等待sr到er的片段完全加载（通过video.buffered属性确认），再开始变速操作，减少中途缓冲的可能。
• 基于MSE流层面调整速率：如果视频通过MediaSource Extensions加载，可以直接在视频流中调整帧的时间戳，从源头上控制播放速度，避开浏览器原生playbackRate的限制。

内容的提问来源于stack exchange，提问作者skatehype