天城スタジオ

WEBサイトに保存した動画を表示しよう

WEBサイトに動画コンテンツを使うにはvideoをタグを使って埋め込みます。
YouTubeなどのサイト動画ではなくサーバーに保存した動画を使う方法です。
YouTubeなどの埋め込み動画<iframe>で埋め込んでいるので性質が違います。
簡単に言うと録画して保存した動画は画像と同じように表示することができるのですが、下記のように記述すると画像のように動きません

<video src="動画のURL.動画の拡張子">

さて、ここで使うのが<img>では無く、<video>と言うタグというわけで、使える拡張子は「MP4、AVI、MOV、WebM、FLV」などがあります。
どれを使うかですが、画像と同じようにそれぞれ用途がありますが、透過したいなど拡張子にそれほど特徴がなくMP4がWEB動画に最適化されていると書かれている参考サイトが多いこともあって、ほとんどMP4が使われています。
これまでの経験測からでもMP4を使っていれば問題がないです。

それで、記述すると…あれ

そのまま記述すると上記のように画像のように止まったままになります。しかも動画のサイズそのまま表示されるのでCSSで整える必要があります。（上のはCSSで小さくしています）

ここで登場するのが<video>タグで使える記述（属性）です。
この属性を使って動画を使えるようにします。

<video class="任意の名前" src="動画のURL.動画の拡張子" autoplay muted loop webkit-playsinline playsinline></video>

ご覧の通り、拡張子の後にある「 autoplay muted loop webkit-playsinline playsinline 」が、標準的な<video>タグで有効な属性でこれを使うことで動画を再生することが可能になります。

それぞれの説明は
「autoplay＝自動再生」「muted＝消音」「loop=繰り返し再生」「playsinline＝インライン要素にする（webwebkit-playsinlineは特定のブラウザに設定でChrome/Safariが該当する）」

これで録画した動画をYouTubeを経由せずにWEBサイトに埋め込むことが可能になりました。

ここで落とし穴

autoplayが付与されていないと再生されないし、mutedが付与されていないとモバイルでは再生されません。加えてplaysinlineがないと、そもそも<video>タグとして扱ってくれず、<img>と同じ扱いをされるので気を付けましょう。
mutedはモバイルで急に音が出ると周りの人に迷惑がかかるのを防止するために実装されたようです。

って、待てい！
音の無い動画ってどうよ？

これまでのは背景動画や音の無いMVに使える記述ですが、<video>には使える属性が他にも色々とあって、なかでも、これ

controls＝操作パネルが出現します。
を追記するだけでYouTubeのようにコントロールパネルが出てきて動画を再生・停止、音の調整が出来るようになります。
controlsを付与するとautoplayが効かなくなります。 mutedはスマホのみ作動するようです。 loopを外すと終了で止まるようになります。

<video class="任意の名前" src="動画のURL.動画の拡張子" controls webkit-playsinline playsinline></video>

初級編の最後は動画の表紙についてです。
二通りの方法があって、一つ目は「poster」属性を使うことで画像の表紙を設定ことができます。 <video>タグに<img>を追加する要領です。

<video class="任意の名前" src="動画のURL.動画の拡張子" controls webkit-playsinline playsinline poster="画像のURL.拡張子"></video>

二つ目は開始位置を決めて、それを表紙にする方法で、これは見せたいところを抜粋する時に使う方が良いかもしれません。
方法は動画の拡張子の直後にシャープ（#）で区切り小文字の「ｔ」で次に開始位置を秒でしていします。（１など正数）（,）で区切って終了位置も指定することも可能です。
下は２秒目から始まって4秒目で終わる設定をしています。
<video>タグに<img>を追加する要領です。

<video class="任意の名前" src="動画のURL.動画の拡張子"#t=2,4" controls webkit-playsinline playsinline></video>