使用 Chrome 在 HTML5 視頻中尋找

Question

我在使用 Chrome 搜索視頻時遇到問題。

出於某種原因，無論我做什么， video.seekable.end(0)始終為 0。

當我調用video.currentTime = 5 ，然后調用console.log(video.currentTime) ，我看到它始終為 0，這似乎重置了視頻。

我已經嘗試過基於 MP4 和 VP9 的 webm 格式，但都給出了相同的結果。

更令人討厭的是，Firefox 可以完美地運行一切。 Chrome 有什么特別值得我了解的地方嗎？

這是我的代碼（僅適用於 Firefox）：

      <div class="myvideo">
        <video width="500" height="300" id="video1" preload="auto">
          <source src="data/video1.webm" type="video/webm"/>
          Your browser does not support videos.
        </video>
      </div>

這是javascript：

var videoDiv = $(".myvideo").children().get(0)
videoDiv.load();
  videoDiv.addEventListener("loadeddata", function(){
    console.log("loaded");
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox?
    videoDiv.currentTime = 5;
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox?
  });

請注意，簡單地調用videoDiv.play()實際上可以在兩個瀏覽器中正確播放視頻。

此外，在電影文件完全加載后， videoDiv.buffered.end(0)也會在兩個瀏覽器中給出正確的值。

Answer 1

我花了一段時間才弄明白...

結果是服務器端的問題。 我使用 Jetty 的一個版本來提供我所有的視頻文件。 Jetty 的簡單配置不支持字節服務。

Firefox 和 Chrome 的區別在於，Firefox 會下載整個視頻文件，以便您可以通過它進行查找，即使服務器不支持http 代碼 206（部分內容） 。 另一方面，Chrome 拒絕下載整個文件（除非它非常小，比如大約 2-3mb）。

因此，要讓 html5 視頻的currentTime參數在 Chrome 中工作，您需要一個支持 http 代碼 206 的服務器。

對於遇到此問題的其他人，您可以使用 curl 仔細檢查您的服務器配置：

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4

這應該返回代碼 206 。 如果它返回代碼 200 ，Chrome 將無法搜索視頻，但 Firefox 可以，這是由於瀏覽器中的一種變通方法。

最后一個提示：您可以使用 npm http-server 為支持部分內容的本地文件夾獲取一個簡單的 http-server：

npm install http-server -g

並運行它以提供本地文件夾：

http-server -p 8000

Answer 2

如果您等待canplaythrough而不是loadeddata ，它會起作用。

請參閱此代碼筆示例。

Answer 3

如果修改服務器代碼不可行，請解決。 為您的視頻進行 API 調用，然后將 blob 加載到URL.createObjectURL並將其提供給您的視頻 html 標記的src屬性。 這將加載整個文件，然后 chrome 將知道文件的大小，允許搜索功能工作。

 axios.get(`${url}`, {
      responseType: "blob"
    })
      .then(function(response) {
        setVideo(URL.createObjectURL(response.data));
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });

Answer 4

視頻標簽有 3 種可能性：MP4、OGG、WebM。

並非所有格式都適用於所有瀏覽器。

在這里，我認為 WebM 可以在 Firefox 中運行，但不能在 Chrome 中運行，因此您應該為 MP4 和 WebM 文件提供兩種替代格式，方法是包含引用 MP4 文件的第二個源標簽。

例如 src="data/video1.mp4" type="video/mp4"

瀏覽器會自動選擇相關版本。

Answer 5

我有一個類似的問題。 我正在偵聽視頻的結束事件並將 currentTime 設置為視頻的中間以連續循環播放。 它在 Safari 或 Chrome 中不起作用。

我認為 Safari/Chrome 中可能存在一個錯誤，除非媒體當前正在播放，否則播放頭位置屬性不可用。

我的解決方法是在視頻結束之前開始我的循環，而不是讓它真正結束。

嘗試通過首先開始播放來測試您的功能，然后運行您的功能以查看它是否在 Safari Chrome 中工作。