Html5 視頻幀准確

Question

我正在嘗試獲取 html5 視頻標記源元素以返回准確的幀號。
接近stackoverflow 答案的東西。
我的目標是顯示准確的時間碼。 我一直在查看VideoFrame和許多其他內容，但沒有一個是准確的。 如果您播放包含燒入時間碼或幀數的視頻，例如我使用的video_keyframes12_24p_Mbits1.8.mp4我自己制作的視頻。 你最終會看到一幀。

有人對此有暗示嗎？
多多謝！

Answer 1

問題

不幸的是，沒有可供我們使用的幀 API - Firefox 有一些實驗性功能，但除此之外我們只能處理時間以及瀏覽器如何處理幀解碼以及幀速率轉換。 請參閱下面的更新。

例如，瀏覽器可能會或可能總是轉換/標准化為 30 fps，如果是這樣，可能會或可能不會假設掉幀（對於 29.97/59.94 fps/NTSC）。 隨着時間的推移，這將影響幀數，並最終顯示為偏移量，因為時間和幀數之間沒有真正的聯系。

此外，由於基於整數的轉換，並且還可能取決於視頻中的開始位置，因此可能存在舍入錯誤。 對於如何在引擎蓋下解碼視頻，也有不同的解決方案，具體取決於瀏覽器，例如，Chrome 在底層使用 FFMpeg，Firefox 使用 OS* 中可用的任何內容（用於 MP4 編碼視頻）等等。

可能的解決方案

（更新：忘記提及 -）有支持VideoPlaybackQuality對象的媒體源擴展 API 。 目前[支持 Chrome 和 IE（在 Windows 8+ 上）以及 Firefox。

要使用，您可以直接在 HTMLVideoElement 上調用它：

var q = video.getVideoPlaybackQuality();

然后使用其屬性讀出值：

var frames = q.totalVideoFrames;

請注意，無論實際播放位置如何，此值都可能會累積所有幀。 您也許可以直接使用 MSE 來解決這個問題。 設置和處理有點繁瑣，但如果您不熟悉 MSE， 此鏈接提供了一個很好的起點。

另一種想法是在視頻中編碼一個特殊的條形碼，然后使用畫布讀取它。 這將與實際的 SMPTE 時間碼等效，但這需要在某種程度上在視頻中可見覆蓋（即將圖文文本編碼到視頻過掃描區域的舊方法）。 如果視頻是全幀，則會出現其他問題，例如根據用於編碼的顏色（或為其制作純色背景）而導致的錯誤檢測。

^*)在 Cisco 免費發布其 mp4 解決方案后，最近的版本可能已更改。

Answer 2

我在您引用的鏈接上發布了這個答案，但我認為它也可能與此相關：

從 M83 開始，Chromium 有一個 requestVideoFrameCallback() API，它可能會解決您的問題。 您可以使用 mediaTime 獲得一致的時間戳，如此 Github issue 中所述。 從那里，你可以嘗試這樣的事情：

var frameCounter = (time, metadata) => {
   let count = metadata.mediaTime * frameRate;
   console.log("Got frame: " + Math.round(count));

   // Display timecode code here.

   video.requestVideoFrameCallback(frameCounter);
}

video.requestVideoFrameCallback(frameCounter)

這只會在新幀上觸發，但您可能偶爾會錯過一個（您可以從metadata.presentedFrames計數中的不連續性中檢測到）。 您也可能在捕獲幀時稍晚（通常 16 毫秒，或者比視頻幀可用時晚一次調用window.requestAnimationFrame() ）。

如果您對 API 的高級概述感興趣，請參閱博客文章，或者您可以查看API 的官方 github 。