如何在JavaScript中获取视频src的t属性并实现起止播放控制

一、实现16秒开始、20秒结束播放 #

HTML5 video元素没有内置的endTime属性，直接赋值不会生效。有两种可行方案：

方案1：通过事件监听控制播放停止 #

修正原代码中的错误（video播放方法是play()而非start()），通过timeupdate事件实时检测播放时间，达到目标时间后暂停：

function playVideo(str) {
  const video = document.getElementById("myVideo");
  // 移除旧的监听，避免重复触发
  video.removeEventListener('timeupdate', stopAtEndTime);
  
  video.src = str;
  video.currentTime = 16;
  
  // 定义停止逻辑
  function stopAtEndTime() {
    if (video.currentTime >= 20) {
      video.pause();
      video.removeEventListener('timeupdate', stopAtEndTime);
    }
  }
  
  video.addEventListener('timeupdate', stopAtEndTime);
  video.play();
}

对应的HTML代码：

<video id="myVideo" width="1000" height="800" controls loop>
  Your browser does not support the video tag.
</video>

<a onclick="playVideo('video/journey27.mp4')">Play</a>

方案2：直接使用媒体片段标识符 #

更简便的方式是在视频URL后拼接#t=16,20（媒体片段URI），浏览器会自动解析并播放指定时间段，无需额外事件监听：

function playVideo(str) {
  const video = document.getElementById("myVideo");
  video.src = `${str}#t=16,20`;
  video.play();
}

二、解析src中的t参数 #

要提取video src里#t=16,20的时间参数，可以通过解析URL的hash部分实现：

function getVideoTimeRange(video) {
  const urlParts = video.src.split('#');
  if (urlParts.length < 2) return null;
  
  const hashParams = new URLSearchParams(urlParts[1]);
  const timeStr = hashParams.get('t');
  if (!timeStr) return null;
  
  const [start, end] = timeStr.split(',').map(Number);
  return { start, end };
}

// 使用示例
const myVideo = document.getElementById("myVideo");
const timeRange = getVideoTimeRange(myVideo);
if (timeRange) {
  console.log('开始时间:', timeRange.start);
  console.log('结束时间:', timeRange.end);
}

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