ビデオの自動再生は Safari および Chrome デスクトップ ブラウザでは機能しません

Question

なぜビデオがこのように埋め込まれたのかを理解するのに多くの時間を費やしました:

<video height="256" ループ自動再生ミュート コントロール 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 を作成したのではないかと思います。

Answer 1

他の回答で提案されているように jQuery play() または DOM 操作を使用した後でも、Chrome for Android (バージョン 56.0) では正しく動作しません (ビデオは自動再生されません)。

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

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

上記リンクからの抜粋:

Answer 2

私が得られる最善の解決策は、このコードを

の後に追加することです。 リーリー

...きれいではありませんが、どういうわけか効果的です。

更新 最近では、多くのブラウザでは音声をオフにして動画を自動再生することしかできないため、video タグに muted 属性

を追加する必要もあります。 リーリー