web-dev-qa-db-ja.com

Chrome

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)は両方のブラウザで正しい値を提供します。

javascripthtmlgoogle-chromevideohtml5-video
14
Tovi7

それを理解するのに少し時間がかかりました...

問題はサーバー側であることが判明しました。私はすべてのビデオファイルを提供するためにJettyのバージョンを使用していました。 Jettyの単純な構成では byte serve はサポートされていませんでした。

FirefoxとChrome=の違いは、サーバーがサポートしていない場合でも、Firefoxがビデオファイル全体をダウンロードしてシークできるようにすることです http code 206（partial content） 。Chromeは、ファイル全体のダウンロードを拒否します（約2〜3 MBのように本当に小さい場合を除きます）。

したがって、html5ビデオのcurrentTimeパラメータをChromeで機能させるには、httpコード206をサポートするサーバーが必要です。

この問題を抱えている他の人は、curlを使用してサーバー設定を再確認できます。

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

これはcode 206を返すはずです。 code 200を返す場合、Chromeはビデオをシークできませんが、Firefoxはブラウザーでの回避策。

そして最後のヒント：npm http-serverを使用して、部分的なコンテンツをサポートするローカルフォルダーの単純なhttp-serverを取得できます。

npm install http-server -g

そしてそれを実行してローカルフォルダを提供します：

http-server -p 8000
22
Tovi7

サーバーコードを変更できない場合は、回避してください。動画のAPI呼び出しを行ってから、ブロブを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);
      });
1
Luis Salas

canplaythroughではなくloadeddataを待つと、機能します。

このコードペンの例 を参照してください。

1
Ian Devlin

動画タグには、MP4、OGG、WebMの3つの可能性があります。

すべてのフォーマットがすべてのブラウザで機能するわけではありません。

ここでは、WebMはFirefoxでは機能するがChromeでは機能しないと考えているため、MP4ファイルを参照する2番目のSourceタグを含めることにより、MP4とWebMファイルの両方の代替形式を指定する必要があります。

例えば。 src = "data/video1.mp4" type = "video/mp4"

関連するバージョンは、ブラウザによって自動的に選択されます。

0
Tony Duffill

同様の問題がありました。ビデオの終了イベントをリッスンしていて、currentTimeをビデオの中央に設定して連続的にループさせていました。 SafariやChromeでは機能しませんでした。

Safari/Chromeには、メディアが現在再生されていない限り再生ヘッドの位置のプロパティが使用できないというバグがあると思います。

私の回避策は、ビデオが終了する直前にループを開始し、実際に終了させないことでした。

最初に再生を開始してから機能をテストしてから、機能を実行して、Safari Chromeで機能するかどうかを確認してください。

0
Mysterfxit