Pickupニュース

YouTubeをGIFアニメーションっぽく表示する方法
コラム

YouTubeをGIFアニメーションっぽく表示する方法

jquery.mb.YTPlayerでYouTubeを制御
本サイトでは、ソフトウェアやWebアプリを紹介する際に、YouTube動画を挿入していますが、ただ普通に挿入するのではなく、ぱッと見ではループ再生しているGIFアニメーションのような手法を取っています。今回はその設定方法のご紹介です。

YouTubeのループ再生

YouTubeをループ再生で挿入するためには、jquery.mb.YTPlayerを利用します。
これは、指定した要素(主に<body>を指定)の背景にYouTubeを再生するjQueryプラグインです。

jquery.mb.YTPlayerの詳細な導入方法はこちらをご確認下さい。

jquery.mb.YTPlayer

背景にYouTubeをループして表示するjQueryプラグイン
Webページの背景にYouTube動画をループして表示させることが出来るjQueryプラグインです。

jquery.mb.YTPlayerの設定

jquery.mb.YTPlayerで以下のような設定をすると、要素に対してGIFアニメーションっぽくループ再生する動画を掲載することが出来ます。

HTMLマークアップ

HTMLCopy
<div class="bgVideo" data-property="{ videoURL: 'https://www.youtube.com/watch?v=jJhQTVLHrh0', mute: true, showControls: false, containment: 'self', quality: 'hd720', optimizeDisplay: false }">jquery.mb.YTPlayer</div>

スタイルシートの設定

CSSCopy
.bgVideo{ width: 640px; height: 360px; }

JavaScriptの設定

JavaScriptCopy
$("#bgVideo").YTPlayer();

See the Pen jquery.mb.YTPlayer GIFアニメっぽく by JaSTIN (@JaSTIN) on CodePen.24295



さらに、jquery.mb.YTPlayerはstartAtstopAtを指定することで、任意のシーンをループ再生させることが出来るので、1つのYouTube動画を分割して表示することも出来ます。

HTMLマークアップ

HTMLCopy
<div class="bgVideo" data-property="{ videoURL: 'https://www.youtube.com/watch?v=jJhQTVLHrh0', mute: true, showControls: false, containment: 'self', quality: 'hd720', optimizeDisplay: false, startAt: 0, stopAt: 5 }">jquery.mb.YTPlayer</div> <br> <div class="bgVideo" data-property="{ videoURL: 'https://www.youtube.com/watch?v=jJhQTVLHrh0', mute: true, showControls: false, containment: 'self', quality: 'hd720', optimizeDisplay: false, startAt: 5, stopAt: 13 }">jquery.mb.YTPlayer</div>

See the Pen jquery.mb.YTPlayer GIFアニメっぽく:ループ1 by JaSTIN (@JaSTIN) on CodePen.24295

なぜGIFアニメーションにしなかったのか?

そもそも、なぜわざわざYouTubeをGIFアニメーションっぽく表示する必要があるのか?最初からGIFアニメーションにしておけば良かったのでは無いか?と問われるならば、GIFアニメーション。確かに便利なのだけど、PCの広い画面で表示する程度の大きさで作成すると、(同じサイズ、再生時間のMP4ファイルと較べても)どうしても容量が大きくなってしまうためです。さらにあくまでGIF画像には色数に制限があるため、とてもじゃないけど高画質とは言えないのです。
そう言ったわけで、YouTubeをGIFアニメーションっぽく表示することにしたのでした。

jquery.mb.YTPlayerの問題点

唯一無二のjquery.mb.YTPlayerの問題。それはスマートフォンでは使えないのです。
元々YouTubeやHTML動画は、スマートフォンでは自動再生が出来ない仕様になっているためかと思われます。
そのため、本サイトでは、スマートフォンでの閲覧時には、jquery.mb.YTPlayerではなく、通常のYouTube動画を表示するように設定しています。いずれここは修正してスマートフォン閲覧時では、スマートフォンの画面サイズに合わせた低用量のGIFアニメーションが表示されるように変更しようと思っています。

コメントを残す

This site uses Akismet to reduce spam. Learn how your comment data is processed.

記事ランキング