199

ビデオが次のように埋め込まれている理由を理解するのにかなりの時間を費やしました。

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

ページが FireFox にロードされると自動的に再生を開始しますが、Webkit ベースのブラウザーでは自動再生を実行できません。これは、一部のランダム ページでのみ発生しました。これまでのところ、原因を見つけることができませんでした。いくつかの閉じられていないタグまたは CMS エディターによって作成された広範な JS が疑われます。

4

31 に答える 31

416

私が得ることができた最良の修正は、このコードを直後に追加することでした</video>

<script>
    document.getElementById('vid').play();
</script>

...きれいではありませんが、何とか機能します。

UPDATE 最近、多くのブラウザは音声をオフにしてビデオを自動再生できるためmuted、ビデオタグにも属性を追加する必要があります

<video autoplay muted>
...
</video>
于 2013-08-01T12:53:37.433 に答える
111

他の回答で示唆されているようにjQueryplay()またはDOM操作を使用した後、Chrome for Android（バージョン56.0）ではまだ機能していませんでした（ビデオは自動再生されませんでした）。

developers.google.comのこの投稿によると、ビデオがミュートされている場合、 Chrome 53 以降、ブラウザは自動再生オプションを尊重します。

したがってautoplay muted、video タグで属性を使用すると、バージョン 53 以降の Chrome ブラウザーで動画を自動再生できます。

上記のリンクからの抜粋:

動画のミュート自動再生は、バージョン 53 の Chrome for Android でサポートされています。autoplayとの両方mutedが設定されている場合、動画要素が表示されると、再生が自動的に開始されます[...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
  • ミュート自動再生は、iOS 10 以降の Safari でサポートされています。
  • 自動再生は、ミュートされているかどうかに関係なく、Android では Firefox と UC Browser によって既にサポートされています。これらは、いかなる種類の自動再生もブロックしません。
于 2017-02-23T11:44:13.833 に答える
8

ページの下部に以下のコードを追加するとうまくいきました。なぜそれが機能するのかわかりません:(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);
于 2016-11-24T05:47:11.163 に答える
3

他の答えはどれも私にとってはうまくいきませんでした。私の回避策は、ビデオ自体のクリックをトリガーすることでした。ハッキー（必要なタイムアウトのため）ですが、正常に動作します：

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);
于 2014-11-24T15:14:21.640 に答える
2

これを試して：

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

これが私が通常行う方法です。ループ、コントロール、および自動再生は、ブール属性である値を必要としません。

于 2013-08-01T13:58:55.610 に答える