>  >  >  > 

Webサイトに動画を導入する場合の2つの実装方法

Webサイトに動画を導入する場合の2つの実装方法

こんにちは、ポケモンGOとりあえずやってみたけど即行辞めてしまったウラカワです。

ミドルロースペックのAndroidで格安運用しているのでバッテリー消費が致命的すぎました・・・。

さて、今回は動画を導入しているWebサイトでよく見かける2つの実装方法をご紹介します。

動画を背景で表示する

動画を背景で表示させるプラグインは色々ありますが、やってることは今回紹介している方法と同じなので、あえてプラグインを使う必要は特に無さそうです。

特に音声や再生・停止を操作したいならプラグイン使わない方がやりやすいと思います。

単純に動画を表示させるだけなら以下で可能です。
(古いブラウザも対応必要であれば代替画像も設定してください。)

あとはcssで画面いっぱいに表示するだけです。簡単!!

レスポンシブの場合、動画を再生させないこともあると思うので、画面サイズで再生・停止を行ってみます。

これでスマホサイズのときは動画が停止します。

非表示にしても裏で再生し続けることは無くなりました。開いたとき一瞬動いてしまう!っていう時はautoplayを外して下さい。

あとは代替画像を表示しておくと良いと思います。

ついでに音声と再生・停止を行いたい場合は以下のような感じです。

他にも色々操作できますが、背景として使う分にはこのぐらいで事足りるんじゃないでしょうか。

動画を埋め込む(ライトボックスで表示する)

youtubeを使うのであれば、特に環境を意識せずに埋め込んだり、youtubeに対応しているライトボックス系のプラグインを使えば良いだけですが、今回はサーバー上のmp4のファイルを表示させたいと思います。

使用するプラグインは以下2つ。

最近のブラウザならmp4埋め込めばそのまま表示してくれるのですが、古いブラウザになってくるとそうもいきません。

埋め込んだりライトボックスで表示する場合、背景動画と違ってちゃんと観てもらうのが目的なので、動画にプレイヤー機能をつけて表示してくれるvideo.jsを使います。

使用方法は特に難しいこともなく、video.jsのファイルを読み込み、videoタグにちょっと指定するだけです。最低限必要なものは、data-setup=”{}”とclassのvideo-jsだけですが、vjs-fluidとvjs-big-play-centeredも設定しておいた方が良いと思います。

data-setup=”{}”って何やねんって感じですが、videoタグで属性を設定しない場合とかvideo.jsのオプション設定する場合このカッコ内に記述するようです。正直videoタグの属性で事足りるので使うことはないでしょう・・・

  • vjs-fluid : 縦横が可変するようになる
  • vjs-default-skin : スキンの指定(無くてもOK)
  • vjs-big-play-centered : 未再生状態時の再生ボタンを真ん中に置く(指定なしだと左上)

単純にサイトに埋め込むだけなら上記だけでOKです。

ライトボックスで表示する場合は、上記ページをそのままMagnific Popupのiframeモードで読み込みます。

inlineモードでも表示自体は問題ないのですが、非表示のとき再生自体は続くので、そのあたりの処理を考えるとiframeモードの方が良いかと思います。

開いた時に自動再生させる場合もiframeモードならiframe内の動画にautoplayを設定しておくだけです。

最後に

動画を効果的に使ったWebサイトって何か良いですよね。動画の出来次第っていうのは分かってるんですが・・・

vimeoとかを観てると、ここまで作れたら色々やれて楽しいだろうなぁと思います。

ちょっと気になってるのは4k動画の行方ですね。ファイル大きすぎてWebでは流行りきれないまま終わりそうな気もします。

超優秀なコーデックが出てくればあるいは・・・って感じですかねぇ

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング