VIDEO自動再生を音声コントロールオフで行う

2019年7月30日2020年1月9日

ホームページに動画を埋め込む際の選択肢として、youtubeなど外部サイト動画を埋め込む方法と、映像データを直接埋め込む方法があります。

動画掲載目的であれば、youtubeに動画をUPし、埋め込みを行ったほうが手軽です。ただ、デザイン上ピクセル単位で調整したい場合などは、videoタグを使用して動画を埋め込むことになります。

その際に、動画を自動再生させたいのですが、webでは勝手に音が鳴るのはあまりよろしくありません。なのでミュート（音声なし）状態にしておく必要があります。

videoタグの自動再生はすぐ見つかったのですが、ミュートについて少々わかりづらかったため、忘備録として残します。

一般的なvideoタグの記述

一般的なvideoタグの記述ですが、少々複雑です。
基本は、<video></video>でタグを囲います。
<source>タグで、映像データを指定します。
<p>タグでメッセージを入れているのは、うまく再生されない場合、<p>タグが表示されます。

自動再生にする場合のvideoタグ

自動再生にする場合は、[autoplay]オプションを盛り込みます。
<video controls autoplay ・・・>
と、<video>タグ内に、オプションを記述します。

これで、自動再生されるようになります。
ミュートする方法も、オプションを同様に指定すればOKです。
自動再生は、ググるとすぐ出てきましたが、ミュートは少々探すのに苦労しました。

ミュート（音無し）の指定方法

ミュート指定オプションは、[muted]です。
あとは、autoplay同様半角スペースを空けて<video>タグ内に記述すればOKです。

HTML5ガイドにはこの[muted]オプションについて省略されているケースが多く、よく使うオプションなのに音声あり状態で再生されるということになりがちです。

しかしながら、よくよく調べると大抵のことはできるようになっているものです。