こんにちは。
自作の動画を自分のサイトに埋め込む作業をしましたので備忘録としてブログに書き残したいと思います。
動画埋め込みといったらYouTubeだけど
動画をサイトに埋め込む必要がでた時に一番最初に浮かんだ方法は「YouTube」で埋め込む方法でした。
YouTubeに動画をアップし、埋め込みコードを自分のサイトに記述するといった作業になります。
もっともポピュラーで簡単な方法だと思います。
HTMLの知識もほぼ必要ないですから。
しかし、今回はYouTube以外の方法で埋め込む方法で動画を埋め込みました。
理由は特になく、ただなんとなくなんですが、しいて上げるならイメージ的なところです。
コーポレートサイトに商品の使用方法を紹介する動画を埋め込むので、YouTubeじゃない方がスマートな感じがしたのです。
HTMLコードで動画を埋め込む方法
まったく難しくなく簡単に動画を埋め込むことができます。
コードがわからなくてもコピペでいけます。
HTML5からvideoタグが実装されています。
このvideoタグでは「loop」とか「autoplay」といった機能も実装できます。
それでは videoタグを使った実際のHTMLコードを下記に書きます。
| <!DOCTYPE html>
<html> <head> <meta charset=”utf-8″> <title>sample</title> </head> <body> <video controls><source src=”ama.mp4″></video> </body> </html> |
上記の「ama.mp4」の部分を自分のビデオファイルと同じ名前に変更して下さい。
動画の保存場所は、HTMLファイルと同じ階層においてください。
上記コード内
<video controls><source src=”ama.mp4″ /></video>
の部分を自サイトの埋め込みたい場所にコピペするだけです。
動画のサイズ・ループ再生・オート再生の実装方法
<video controls autoplay loop width=”300px”><source src=”ama.mp4″ /></video>
上記のコードの
・aoutoplay=オート再生
・loop＝ループ再生
・width=動画の横幅
オート再生やループ再生はユーザビリティ上使わない方が良いかもしれません。
サイト閲覧していて急に動画が再生されるのって嫌じゃないですか？
Facebookでアップされた動画がオート再生されると凄い迷惑です（笑）
まとめ
<iframe>タグを使って動画のを埋め込む方法もあります。
ただサイトによっては<iframe>が使用できないところもあるようです。
今後は<iframe>から<video>が主流になっていくようですね。
動画を埋め込むことでサイトの印象もまた変わってきますのでこの方法ならば凄く簡単にできますよ！
何かの役に立てば嬉しいです。
