設為首頁 加入收藏
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置： 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

HTML5 <object>/<embed> 播放 TS 流媒體無法快進/後退的原因分析

     編輯：程式設計綜合問答

使用 `` 或 `` 嵌入 Windows Media Player 播放 `.ts` 視頻時，播放器控制欄缺少快進/後退按鈕或操作無響應。核心原因：**TS (MPEG-TS) 通常為直播流或無索引的流媒體容器，本身不支持隨機跳轉**。

現象說明

  • 視頻能正常播放，但進度條不可拖動、快進按鈕灰色/無效。
  • 切換為 `.mp4`、`.wmv` 等本地文件時快進正常。

技術原理

  1. 容器特性：MPEG-TS (Transport Stream) 設計用於**實時傳輸/廣播**，數據包無關鍵幀索引表，播放器無法計算任意時間點的字節偏移量。
  2. 協議限制：`ftp://`、`https://` 直接鏈接 TS 文件時，若服務端不支持 Range 請求或文件無索引，播放器只能順序緩衝播放。
  3. 播放器能力：WMP (x-mplayer2) 對無索引流媒體**禁用 Seek 操作**，VLC 等播放器可能通過緩衝全量實現偽隨機訪問，但延遲極高。

解決路徑

方案一：轉碼為可 Seek 容器（推薦）

  • 服務端使用 FFmpeg 將 TS 轉碼為 **MP4 (含 moov atom 前置)** 或 **WebM**： 
    ffmpeg -i input.ts -c copy -movflags +faststart output.mp4
    # 或重編碼兼容性更好
    ffmpeg -i input.ts -c:v libx264 -c:a aac -movflags +faststart output.mp4
  • 前端改用原生 `

方案二：使用 HLS (m3u8) + hls.js

  • 將 TS 切片為 HLS 分段，生成 `.m3u8` 索引文件。
  • 前端引入 hls.js，在 `

方案三：VLC Web 插件（舊方案，不推薦）

  • `` 需用戶安裝 VLC 瀏覽器插件，現代瀏覽器已棄用 NPAPI，Edge/Chrome 不再支持。

代碼對比

<!-- 舊：WMP 播放 TS，不可 Seek -->
<object type="application/x-mplayer2" data="ftp://server/video.ts"></object>

<!-- 新：原生 video 播放 MP4，完整控制 -->
<video src="https://cdn.example.com/video.mp4" controls preload="metadata"></video>

<!-- 或 HLS 直播/點播 -->
<video id="player" controls></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js"></script>
<script>
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://cdn.example.com/video.m3u8');
    hls.attachMedia(document.getElementById('player'));
  }
</script>

總結