如何解决Safari HTML5 Video Player视频片段确定性播放不一致问题？

问题背景 #

常规实现视频片段确定性播放的步骤如下：

• 将视频播放器的currentTime设置为目标起始时间
• 为timeupdate事件添加监听函数
• 调用videoPlayer.play()
• 当监听器检测到currentTime超过目标结束时间时暂停播放

这套逻辑在Chrome和Firefox中能稳定运行，但在macOS和iOS的Safari中会间歇性失效。

原测试代码如下：

<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
     <style>
        button {
         font-size: 24px;
         }
        </style>
  </head>
  <body>
  <div id="movieDiv" style="margin-left: 40px;">
    <video id="videoPlayer"  controls height="400" preload="auto">
        <source src="https://slexildata.artsrn.ualberta.ca/tlingit/37AtlinSrprizLk.mov">
    </video>
  </div>

  <div id="buttonDiv" style="margin-left: 100px; margin-top: 20px; margin-bottom: 10px;">
      <br><button onclick="playVideoSegment(58, 62)"> mov 58-62</button>
  </div>

<script>
//----------------------------------------------------------------------------------------------------
var videoPlayer = document.getElementById("videoPlayer");
var videoSegmentEnd;
var videoContinuousPlay = true;

videoPlayer.addEventListener("canplay", function(){
   console.log("video can now play");
   })

videoPlayer.addEventListener("timeupdate", function (){
    console.log(videoPlayer.currentTime)
    if (!videoContinuousPlay && videoSegmentEnd && videoPlayer.currentTime >= videoSegmentEnd){
      videoPlayer.pause();
      videoContinuousPlay = true;   
      }   
    }, false);

function playVideoSegment(startTime, endTime){
    videoContinuousPlay = false;
    videoSegmentEnd = endTime;
    videoPlayer.pause()
    videoPlayer.currentTime = 0;
    videoPlayer.currentTime = startTime;
    videoPlayer.play();
}
</script>
</body>
</html>

在Safari中的非确定性症状：点击按钮请求播放58秒至62秒的视频及音频，有时正常，有时播放效果异常。

解决方案 #

Safari的视频时间更新机制存在延迟或精度问题，同时直接设置currentTime后立即调用play()可能导致时间未同步完成就开始播放。以下是修正后的代码方案：

核心优化点 #

• 移除不必要的currentTime = 0设置，避免额外的时间跳转开销
• 等待seeked事件确认时间跳转完成后再调用play()，确保起始位置准确
• 优化timeupdate监听逻辑，增加微小阈值避免因时间精度问题提前或延迟暂停
• 增加播放状态锁机制，避免多次点击导致的状态混乱

修正后的完整代码 #

<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
    <style>
        button {
            font-size: 24px;
        }
    </style>
</head>
<body>
<div id="movieDiv" style="margin-left: 40px;">
    <video id="videoPlayer" controls height="400" preload="auto">
        <source src="https://slexildata.artsrn.ualberta.ca/tlingit/37AtlinSrprizLk.mov">
    </video>
</div>

<div id="buttonDiv" style="margin-left: 100px; margin-top: 20px; margin-bottom: 10px;">
    <br><button onclick="playVideoSegment(58, 62)">播放58-62秒片段</button>
</div>

<script>
const videoPlayer = document.getElementById("videoPlayer");
let videoSegmentEnd = null;
let isPlayingSegment = false;
let isSeeking = false;

// 监听时间跳转完成事件
videoPlayer.addEventListener("seeked", function() {
    if (isSeeking && !isPlayingSegment) {
        isPlayingSegment = true;
        videoPlayer.play().catch(err => console.error("播放失败:", err));
        isSeeking = false;
    }
});

videoPlayer.addEventListener("timeupdate", function () {
    if (isPlayingSegment && videoSegmentEnd !== null) {
        // 增加0.1秒阈值，兼容Safari的时间精度问题
        if (videoPlayer.currentTime >= videoSegmentEnd - 0.1) {
            videoPlayer.pause();
            isPlayingSegment = false;
            videoSegmentEnd = null;
        }
    }
});

function playVideoSegment(startTime, endTime) {
    // 如果正在播放片段，先暂停重置状态
    if (isPlayingSegment || isSeeking) {
        videoPlayer.pause();
        isPlayingSegment = false;
        isSeeking = false;
    }

    videoSegmentEnd = endTime;
    isSeeking = true;
    // 直接跳转到起始时间
    videoPlayer.currentTime = startTime;
}
</script>
</body>
</html>

说明 #

• seeked事件确保时间跳转完成后再启动播放，解决了Safari中设置currentTime后立即播放可能出现的位置偏差问题
• 增加0.1秒的阈值，避免因Safari的currentTime精度误差导致暂停时机不准确
• 状态锁机制防止多次点击按钮导致的播放状态混乱
• 移除了原代码中多余的currentTime = 0步骤，减少不必要的操作

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