教文館の社内ナレッジベースです。

気になっていたvideoタグを使用しました。

Youtubeに動画をアップしてそれをサイトに埋め込んで表示させる、という方法もやってましたが(というかやってますが)、やはり広告や他動画の候補が表示されるのはまずい感じ。それはそれでリーチアップに役立つかもしれませんがね。

というわけで、おそらくだいぶ世間のブラウザがHTML5に対応普及してきているのでvideoタグを使ってみます。

今回西巻茅子展の動画を用意しました。

<video controls autoplay loop muted width="640″>
<source src="https://www.kyobunkwan.co.jp/event/nishimaki-s.webm" >
<source src="https://www.kyobunkwan.co.jp/event/nishimaki-s.mp4" >
<source src="https://www.kyobunkwan.co.jp/event/nishimaki-s.ogg" >
<p>このブラウザでは、動画が再生できません。</p>
</video>

これでできた表示が下の通り。

 
video タグには属性指定ができますが、ここではautoplay(自動再生)、loop(繰り返し)、muted(無音)=これ大事!、controls(コントロールボタン表示)を使いました。
sourceは動画の置き場までのパスを書きますが、WordPress内で使っているので絶対パスがいいでしょう(相対パスでもいいとなっている)。3つも動画を記述しているのはブラウザや端末によって対応する動画形式が違うからです。なんだかな~。統一してほしいところですが、世間の大人の事情というやつでしょう。

さて、mp4、webm、oggの3つをとりあえず用意しました。
これだけやれば大体カバーできんじゃね?的なざっくり体感意見でこうしました。
間違ってたらごめんなさい。
videoタグ内のテキスト(ここでは”このブラウザでは、動画が再生できません。”)は動画再生ができない環境で表示されます。

以上備忘録。