[解決済み] SafariとChromeのデスクトップブラウザーで、動画の自動再生が機能しない

質問

なぜこのように動画が埋め込まれるのか、その原因を探るのにかなりの時間を費やしました。

<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が原因ではないかと考えています。

解決方法は？

私が得た最良の修正は、このコードを </video>

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

...美しくないけど、どうにか動く。

アップデイト 最近は音を消した状態でしか動画を自動再生できないブラウザが多いので、その場合は muted 属性も追加してください。

<video autoplay muted>
...
</video>