Django3开发类playphrase.me站点 如何实现视频指定时间戳区间播放

• 轻量无依赖场景：原生HTML5 <video> 标签，性能最优，满足基础播放控制需求，无需引入额外第三方资源
• 功能扩展场景：Video.js，生态完善，支持自定义UI、外挂字幕、多清晰度切换等扩展能力，适合后续需要迭代更多功能的场景

无需引入额外依赖，直接在模板层写入以下代码即可：

<video id="clipPlayer" controls preload="metadata">
  <source src="" type="video/mp4">
  您的浏览器不支持HTML5视频播放
</video>

// 后端将检索到的播放数据注入模板，格式示例：
// const playData = {{ your_view_data|safe }};
const currentClip = {
  video_url: "替换为后端返回的视频资源地址",
  start: 13.2, // 后端返回的短语出现开始时间，单位为秒
  end: 16.7 // 后端返回的短语出现结束时间，单位为秒
}

const player = document.getElementById('clipPlayer')
// 绑定视频资源
player.src = currentClip.video_url
// 设置初始播放位置
player.currentTime = currentClip.start

// 监听播放进度，到达结束时间自动暂停
player.addEventListener('timeupdate', () => {
  // 预留0.1秒容错，避免timeupdate触发间隔导致的停止延迟
  if (player.currentTime >= currentClip.end - 0.1) {
    player.pause()
    // 如需自动播放下一个片段，可在此处替换currentClip并重新加载播放
  }
})

// 可选：视频元数据加载完成后自动播放
player.addEventListener('loadedmetadata', () => {
  player.play()
})

如果需要更多播放器扩展能力，可使用Video.js实现：
首先在页面引入Video.js资源：

<link href="https://vjs.zencdn.net/8.6.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.6.1/video.min.js"></script>

播放器DOM结构：

<video id="clipPlayer" class="video-js" controls preload="metadata" width="960" height="540">
  <source src="" type="video/mp4">
</video>

JS控制逻辑：

// 初始化播放器
const player = videojs('clipPlayer')
const currentClip = {
  video_url: "替换为后端返回的视频资源地址",
  start: 13.2,
  end: 16.7
}

// 加载视频资源
player.src(currentClip.video_url)
// 元数据加载完成后跳转到起始位置并自动播放
player.on('loadedmetadata', () => {
  player.currentTime(currentClip.start)
  player.play()
})

// 监听播放进度，到达结束时间自动暂停
player.on('timeupdate', () => {
  if (player.currentTime() >= currentClip.end - 0.1) {
    player.pause()
  }
})

• 视频标签设置preload="metadata"属性，仅加载视频时长、分辨率等元数据，无需提前加载全量视频资源，大幅降低带宽消耗
• 后端返回的起止时间统一转换为秒为单位即可，无需额外做时间格式转换
• 如需循环播放当前片段，可在暂停逻辑后添加player.currentTime = currentClip.start; player.play()即可实现循环

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