簡単!youTubeの動画を全画面背景に配置し自動再生やループ再生を実現する jQuery Plugin【YTPlayer】の実装方法
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんにちは。Toshikuraです。今回のTipsは【簡単!youTubeの動画を全画面背景に配置し自動再生やループ再生を実現するjQuery Plugin【YTPlayer】の実装方法】です。このところ動画を扱うことが続いたのでメモしておきます。動画を背景にフルスクリーンに指定するプラグインは数々こざいますが、色々試した結果【YTPlayer】という素晴らしいプラグインに落ち着きました。本プラグインはループや自動再生が容易で且つループのつなぎが自然、さらには特定要素にFIXする事も可能で再生・停止ボタンや再生バー関連のカスタマイズも容易とかなり有用です。もし機会があればお試しください。
実装方法 > DOWNLOAD
シンプルに実装する場合の例です。この他にも再生/停止の非表示やループを停止に関する設定が行えます。
HTML
<a id="bgndVideo" class="player" data-property="{videoURL:’ここにYOUTUBEのリンク’,containment:’body’,autoPlay:true, mute:false}"></a>
JS
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
<script type="text/javascript">
$(function(){
$(".player").mb_YTPlayer();
});
</script>
設定について
自動再生やループの停止、再生ボタンの表示非表示、読み込み完了後の動作等細かい所まで設定が可能です。個人的に今後も使うだろうと思いましたのでJS内を読んでオプションの役割を書き出してみました(若干自信はないですが…)。この他にも様々な設定値が存在するようです。
<a id="bgndVideo" class="player"
data-property="{
videoURL:’ここにYOUTUBEのリンク’,
containment:’body’,
autoPlay:true,
mute:false,
startAt:0,
opacity:1,
loop:true,
showControls:true,
printUrl:true,
onReady:function(){console.log(‘START’)}
}"
></a>
オプション | 設定値 | 概要 |
videoURL | http://www.youtube.com/watch?v=xteoc9zrC2w | YOUTUBEのリンク |
autoPlay | true / false | 自動再生の有無 |
mute | true / false | 音声の有無 |
startAt | 0 ~ 1 | 最初の透明度 |
opacity | 0 ~ 1 | ロード後の透明度 |
loop | true / false | ループ再生の有無 |
showControls | true / false | 再生・停止ボタンの表示非表示 |
printUrl | true / false | 動画ページへのリンク |
onReady | onReady:function(){console.log(‘START’)} | 動画再生準備が完了した段階で何らかの操作を実装 |
再生ボタンや再生バーの設定について
再生ボタンや停止ボタン、再生バーの表示はプラグイン設定時に下記のHTMLが自動的に挿入されますのでカスタマイズを施す場合には下記に対してCSSの記述を行います。再生バーに関してはclass=”mb_YTVPLoaded”がローディング状況を示しclass=”mb_YTVTime”が現在の再生時間を示しいるようです。この再生バーは本家youtubeのようにクリックで再生位置の指定が行えます。
<span id="controlBar_bgndVideo" class="mb_YTVPBar">
<div class="buttonBar">
<span class="mb_YTVPPlaypause">PAUSE </span>
<span class="mb_YTVPMuteUnmute">MUTE </span>
<span class="mb_YTVPTime">01 : 01 / 02 : 29</span>
<span class="mb_YTVPUrl"></span>
<span class="mb_OnlyYT"></span>
</div>
<div class="mb_YTVPProgress" style="position: absolute;">
<div class="mb_YTVPLoaded" style="position: absolute; left: 0px; width: 10%;"></div>
<div class="mb_YTVTime" style="position: absolute; left: 0px; width: 5%;"></div>
</div>
</span>