- 更新日: 2017年03月14日
- 公開日: 2015年10月22日
Webの動画デザインに役立つJQueryプラグイン10選
JavaScriptとCSSの活用することで、Webで動画をオシャレに再生させることができます。イチからコーディングしていく方法もありますが、今回は手っ取り早くオシャレな機能を搭載できるjQueryの動画系プラグインについてフォーカスしてみたいと思います。ニーズの高い動画背景に役立つプラグインから動画コンテンツに役立つプラグインまで幅広くピックアップしてみました。
気になるプラグインを比較して、Webデザインにご活用頂ければ幸いです。
目次
- Webの動画デザインに役立つ！jQueryプラグイン10選
- 利用者の多い「BIGVIDEO.JS」
- 動画の個別設定なら「VIDE」
- プレ・ロード設定にこだわった「jQuery Video Background plugin」
- 軽さを極めた「CoverVid」
- 動画on動画もできる「jQuery.VideoBG」
- YouTubeで背景をデザインする「tubular」
- 定番プラグイン「VIDEO.JS」
- 動画の多いブログなら「Embed」
- YouTubeを美しくする「PrettyEmbed.js」
- 古いブラウザにも<video>を対応させるなら「html5media」
- おまけ／<video>を極めた「popcorn-js」
- まとめ
Webの動画デザインに役立つ！jQueryプラグイン10選
利用者の多い「BIGVIDEO.JS」
フルスクリーンで動画背景や動画の再生リストを作成できるプラグインになります。国内外でユーザーが多く、数多くの実験例を拝見することができます。デモは、公式ページやこちらのサイトから拝見することができます。
設定要素／自動再生、コントロール表示、ループ、表示場所の指定（'body’ など）、リサイズ、プレイリスト
Video.js 62.5KB（BIGVIDEO内蔵バージョン 4.6.4）、Bigvideo.js 12.1 KB
動画の個別設定なら「VIDE」
<div>ブロックを使って動画指定することで、動画毎に再生速度や音声有無を設定することができます。
設定要素／音量、再生速度、消音、ループ、自動再生、ポジション、動画のキャプチャ画像、リサイズ
jquery.vide.js 11.3 KB
プレ・ロード設定にこだわった「jQuery Video Background plugin」
jQuery Video Background plugin、サンプル
プレ・ロード時の細かい設定をできるプラグインになります。
設定要素／動画のキャプチャ画像、自動再生、プレ・ロード、ループ、コントロールのポジション、コントロールの表示文字、リサイズ、HTMLのプレロード、プレロードが開始された時のアクション設定、プレロード中のアクション設定、消音 jquery.videobackground.js 12.8 KB
軽さを極めた「CoverVid」
800バイトのJavaScriptで動画背景を設定できる、超軽量かつシンプルなプラグインになります。
設定要素／HTML5の<video>タグ同様
Covervid.js 4.33 KB
動画on動画もできる「jQuery.VideoBG」
動画背景に加えて<div>要素で動画設定もできるプラグインになります。こちらのサンプル・サイトが参考になると思います。
設定要素／動画のキャプチャ画像、自動再生、ループ、目盛、ポジション、透明度、文字の置換、z-index、サイズ jquery.videoBG.js 7.87 KB
YouTubeで背景をデザインする「tubular」
YouTubeの動画を使って、簡単に動画背景をデザインできるプラグインになります。
設定要素／画面比率、消音、ループ、z-index、再生ボタン、ポーズボタン、消音ボタン、ボリュームUPボタン、ボリュームDOWNボタン、ボリュームボタン操作時の上下幅、スタート・ポジション
jquery.tubular.1.0.js 5.87 KB
定番プラグイン「VIDEO.JS」
その結果、他のプラグインに比べると軽量なライブラリーで、ページ・サイズの軽量化にも貢献してくれます。現在10万以上のWebサイトで利用されている実力派プラグインになります。またVIDEO.JSをベースに派生プラグインも14種類ほど開発されています。
設定要素／自動再生、コントロール表示、プレ・ロード、動画のキャプチャ画像、ループ、幅・高さの指定、字幕設定（vtt ファイル形式）
設定要素の詳細情報
Video.js 115KB（バージョン 4.12.11）
動画の多いブログなら「Embed」
YouTubeやVimeo、PDFやツイッターなどのリンク・アドレスを記述しておくと、自動的に投稿画面下部に動画や画像ファイルの概要が出力されるプラグインです。ブログ系のWebデザインに活かせそうなプラグインです。
設定要素／YouTubeの場合、お気に入り数や閲覧数のカウンター表示、スタイルはembed.js内のCSSで調整 jquery.embed.js 67 KB、jquery.embed.css 70.2 KB
YouTubeを美しくする「PrettyEmbed.js」
Webページ内に表示するYouTubeのトップ画像をキレイにレイアウトできるプラグインです。
設定要素／プレビュー・サイズ、プレビュー画像、動画のインフォメーション（トップバー）、コントロール、ループ、タイトル表示、翻訳、色調整、動画終了後の関連動画表示設定、全画面の有無、FitVids.jsの使用 jquery.prettyembed.js 16.1 KB
古いブラウザにも
HTML5に対応していないIE8などのブラウザでも、このプラグインを使用すると<video>タグが有効になり、動画を表示できるようになるプラグインです。ループや自動再生などの要素は、HTML5の<video>タグと同様になります。
設定要素／ ―
html5media.js 14.5 KB
おまけ／
動画と文字、動画とFacebook、動画と画像、動画と地図など動画と連携してコンテンツを時系列で発信できるプラグインになります。Mozillaがプロデュースしているだけあって、多機能な仕様となっています。ただし、レイアウトの調整は必要となってきます。
サンプル／Facebook との連携、GML（地理マークアップ言語）との連携、Last.fm（音楽サイト）との連携など
設定要素／autoplay、buffered、compose、controls、cue、currentTime、defaults、destroy、disable、duration、emit、enable、exec、listen、load、loop、mute、muted、off、on、pause、paused、play、playbackRate、played、position、preload、readyState、roundTime、seekable、seeking、toggle、trigger、unlisten、unmute、volume （要素の詳細情報）
popcorn.js 77.2 KB、popcorn.facebook.js 9.14 KB など
**Mozillaの動画プロジェクト「PopcornMaker」
＼Webサイト担当者としてのスキルが身に付く／
まとめ
いかがでしたでしょうか？HTML5の<video>タグ機能も充実していますが、今回ご紹介したようなjQueryプラグインを活用すると、動画の表現方法も幅が広がると思います。尚、今回はJavaScriptにフォーカスして動画の表現方法をピックアップしましたが、CSSを使って背景に動画を設定する方法もあります。JavaScriptがCPU処理で、CSSはCPU+GPUの処理など違いはありますが、動画に与えるアニメーションの幅はJavaScriptの方が広いように思います。
とりあえず気になるプラグインがあればダウンロードして、デモ・ファイルを開いてみて下さい。ファイルによってローカル環境で起動するモノと、サーバーにアップロードしないと起動しないモノがありますのでご注意ください。
- この記事を書いた人
- オシママサラ
