6

私は奇妙な問題を抱えています。Chrome の 2 つのバージョン (レギュラーとカナリア) は、私が表示しているビデオをループすることを拒否します。または、2 回ループしてから停止することもあります。奇妙なことに、それはサファリで動作するので、私は知っています。

<video autoplay="autoplay" data-type="bg" id="video" loop="loop">
    <source src="/assets/video/_L88P.mp4" content-type="video/mp4">
</video>

私のセットアップは、マウンテン ライオンとマンプを搭載した Mac です。Chrome のバージョンは最新です (カナリア: 26.0.1384.0 およびレギュラー: 24.0.1312.52)。

なぜこれが起こっているのか誰にも分かりますか？

4

5 に答える 5

8

これは解決されました。私の場合の解決策は次のとおりです。

ビデオの解像度が大きすぎました。ビットレートが低くても、クロムはそれをしたくありませんでした。サイズを720pに変更すると、完全に機能しました。

問題が発生した場合のその他の推奨される解決策:

  • コーデックを含む正しいコンテンツ タイプを設定します。
  • ファイルの種類をサポートするブラウザを使用していることを確認してください。ライブの場合は、少なくとも .mp4 と .ogg の両方を常に使用し、セキュリティのために .webm を含めます。

  • JavaScript 経由でループするように設定します。これは、ブラウザが video タグの loop 属性に問題がある場合の適切なフォールバックでもあります (主な例は ipad です)。以下は、昨日あるサイトからコピーしたサンプル コードです (ソースを思い出せません)。

    var myVideo = document.getElementById('video');
if (typeof myVideo.loop == 'boolean') { // loop supported
    myVideo.loop = true;
} else { // loop property not supported
    myVideo.on('ended', function () {
    this.currentTime = 0;
    this.play();
    }, false);
}
myVideo.play();
于 2013-01-16T10:25:49.713 に答える
4

これは、サイトをローカルで実行している場合にのみ発生します...
そして、Chromeでも同じ問題がありましたが、XAMPローカルサーバーで解決策を見つけました...

必要なローカルサーバーを使用できます（wampなど）...ただし、サイトはサーバーのルートディレクトリにある必要があります...このようにして、クロムはビデオがサーバーからのものであり、ローカルマッシングからのものではないことを認識します

于 2015-10-23T16:17:22.237 に答える
1

私は最近、これに関していくつかの問題を抱えていました。私のサイトがローカルホストにあることに関係していることが判明しました。サイトを本番サーバーに移動してリモートでテストしたところ、すべて期待どおりに機能しました。

ローカルホストで強制的に動作させるために、Joakim Bananskal のソリューションを使用しましたが、ビデオを再生すると、既に再生しようとしていたためエラーが発生したため、load().

ビデオがendedイベントを発生させなかったため、ループするように設定すると問題が発生するようにも見えました。

localhost の最終的な解決策は次のとおりです。

$("video").each(function () {
    this.loop = false;
    this.onended = function () {
        this.load();
    };
    this.play();
});

このHTMLで：

<video preload="auto" autoplay>
    <source src="/video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="/video.ogg" type="video/ogg">
    <img src="/backupImage.png" />
</video>
于 2016-07-20T09:49:36.777 に答える
0

何らかの理由で、「終了」イベント バインディングに問題がありました。

これが私がそれを修正した方法です：

  1. ビデオから「ループ」属性を削除しました。

  2. replay() を呼び出すために onended を追加

    <video autoplay='true' onended="replay()"></video>

  3. replay() を次のように定義します。

    関数リプレイ() {
    console.log('ビデオ終了');
    document.getElementsByTagName('video').currentTime = 0;
    document.getElementsByTagName('video')[0].play();
}
于 2015-01-09T08:27:48.007 に答える