順次・ランダム選曲 YouTube JavaScript Player API | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ 順次・ランダム選曲 YouTube JavaScript Player API


● 内容

① 順次再生・ランダム再生が可能
② 自動再生・手動再生が選択可能
③ 各動画ごとの音量と開始位置(sec)の指定が可能
④ 音量・再生/停止・経過バー表示・非表示の選択が可能
⑤ セレクトボックスによる動画選択が可能


● やり方


① 記事または、メッセージボードまたは、フリースペースまたは、フリープラグインへ
  追加する(プレイヤーを設置したい場所に追加する)
  HTMLモードで入れてください。


<div id="ytapiplayer"></div>


② セレクトボックスも入れる場合は下記の様にして入れる。
(記事または、メッセージボードまたは、フリースペースまたは、フリープラグインへ
  追加する(プレイヤーを設置したい場所に追加する))
  HTMLモードで入れてください。




<div id="ytapiplayer"></div>
<br>
<div id="videosel">
<select id="videoSelection">
<option value="none" style="background-color:#00ff00;color:#000000;">曲の選択</option>
<option value="XHdcW2axwMk,20,0" style="background-color:#ffffff;color:#000000;">【MV】ギンガムチェック / AKB48[公式]</option>
<option value="MBuJ5R2KBKo,30,0" style="background-color:#ffffff;color:#000000;">【MV】真夏のSounds good ! (Dance ver.) / AKB48[公式] </option>
<option value="WIdWXhV33vs,100,0" style="background-color:#ffffff;color:#000000;">【MV】UZA -Dance ver.- / AKB48[公式]</option>
</select>
</div>


■ option説明

value="ビデオID,音量,開始位置"


value="XHdcW2axwMk,20,0"・・・・ 20は音量、0は開始位置second(秒)

YouTubeのURLとビデオIDについて、上記のビデオIDのXHdcW2axwMk
下記のYouTubeの動画のURLの赤字部分です。

http://www.youtube.com/watch?v=XHdcW2axwMk


② フリープラグインへ追加する


<script src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("swfobject", "2.1");</script>
<script type="text/javascript">
// ● 準備開始
// ★ 動画のビデオID指定など各種設定 開始
var VideoID = ["XHdcW2axwMk","MBuJ5R2KBKo","WIdWXhV33vs"];
var VideoVolumes = [20,50,100]; // 音量の指定
var VideoPos = [0,0,0]; // 再生位置指定
var Videoseekbar = 0; // 1・・・ apiplayer(音量・再生/停止・経過バー非表示)
var index001 = 0; // 開始ビデオ指定(順次再生の場合)
var autoplaysw = 1; // 自動再生スイッチ 1・・・自動再生
var random_sw = "ON"; // 再生タイプ "ON" ・・・ランダム再生 "OFF" ・・・ 順次再生
// ★ 動画のビデオID指定など各種設定 終了
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
if(random_sw=="ON"){index001=Math.floor(Math.random()*VideoID.length);}
var embedSWF_URL;
if(Videoseekbar!=1){ // シークバー(経過バー)表示判定
embedSWF_URL = "http://www.youtube.com/v/"+VideoID[index001]+"?"; // 通常
}else{
embedSWF_URL = "http://www.youtube.com/apiplayer?"; // 音量・再生/停止・経過バー非表示
}
swfobject.embedSWF(embedSWF_URL + "enablejsapi=1&version=3&playerapiid=ytplayer",
"ytapiplayer", "400", "225", "8", null, null, params, atts); // 横 400px 縦 225px
// ● 準備はここまで

// ● 実行 ブログ表示から2秒のインターバル
$(document).ready(function(){
setTimeout('play(autoplaysw)',2000); // 順次・ランダム再生
Video_selectbox('#videoSelection') // セレクトボックス制御
});

// ● 以下は各種関数

// YouTubePlayer 監視
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
setInterval(updatePlayerInfo, 250); // プレイ時間監視間隔 0.25秒
}
// YouTubePlayer 状況把握
function updatePlayerInfo() {
if(ytplayer.getPlayerState() == 0){
if(ytplayer) {
play(autoplaysw); // 動画を再生します
}
}
}
// YouTubePlayer 再生
function play(autoplaysws) {
if (ytplayer) {
ytplayer.cueVideoById(VideoID[index001], VideoPos[index001]);
if(autoplaysws==1){
ytplayer.playVideo(); // 動画を再生します
}
ytplayer.setVolume(VideoVolumes[index001]); // 音量をセットします
if(random_sw == "ON"){
index001=Math.floor(Math.random()*VideoID.length); // ランダム選曲
}else{
index001++; // 順次再生
if(VideoID.length == index001){index001 = 0;} // 最後まできたら最初に戻る
}
}
}
// セレクトボックス制御
function Video_selectbox(selectors){
$("select"+selectors).change(function(){
var SID_Vol_Pos=""; // ビデオID ボリューム 開始位置(startSeconds)
$("select"+selectors+" option:selected").each(function(){
SID_Vol_Pos = $(this).val().split(","); // csv分割
});
if(SID_Vol_Pos[0]!= "none"){
if(ytplayer) {
ytplayer.setVolume(SID_Vol_Pos[1]); // 音量をセットします
ytplayer.loadVideoById(SID_Vol_Pos[0],SID_Vol_Pos[2]); // 動画を再生します
}
}
}).change();
}
</script>