Forked from: siouxcitizen2's 作業用に森山直太朗のYoutube動画を連続再生 View Diff (46)

作業用に秦基博のYoutube動画を連続再生

siouxcitizen

2017-11-23 09:21:22

License: MIT License

Fork: 1

Fav: 0

View: 793

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 348 lines
HTML 49 lines
CSS 91 lines

作業用に秦基博のYoutube動画を連続再生

// forked from siouxcitizen2's "作業用に森山直太朗のYoutube動画を連続再生" http://jsdo.it/siouxcitizen2/Geul
//
//Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。
//
//[ShuffleMVList]ボタンで再生動画の順番をシャッフルします
//[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします
//
//秦基博の動画を連続再生してみました
//
//＊注
//なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです
//

//動画プレイヤー
var player = null;
//動画プレイヤー用パラメータ
var options =
    {
        width: 352,              //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット
        height: 230,             //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット
        videoId: "DHdi6HhbvfQ",  //下部AngularJS部分に記述された動画ID配列($scope.movies)の先頭にある動画IDをセット
        playerVars: {
            autoplay: 1,
            controls: 1,
            autohide: 1,
            html5: 1
        },
        events: {
            onReady: onPlayerReady,
            onStateChange: onPlayerStateChange
        }
    };

//iframe apiの読込　
//iframe apiの読込完了時に onYouTubeIframeAPIReady が呼び出されて 動画Player設定→動画再生処理開始
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

//iframe apiの読込完了時に呼び出される
//Youtube Playerのパラメータ設定や、イベント処理の設定を行う
function onYouTubeIframeAPIReady() {
    
    player = new YT.Player( 'player', options );
    
}

//Youtube Playerの準備ができたら(読込完了したら？)動画再生を開始
function onPlayerReady(event) {
    //event.target.playVideo();
    player.playVideo();
}

//動画の再生が終了したら、動画IDリストから次の動画のIDを取得して再生する
function onPlayerStateChange(event) {
    
    if(event.data == YT.PlayerState.ENDED) {

//angularJSの関数を呼び出す
        var scope = angular.element(document.getElementById("movieListCtrlID")).scope();
        
        scope.$apply(function () {
            scope.playNextMovie();
        });
  
    }          
}

angular.module('movieListApp', [])
.controller('movieListController', function ($scope) {
    //動画IDの配列参照用のインデックス   
    $scope.index = 0;
    $scope.isRepeat = false;
    $scope.size = 0; // 画面サイズ　0 ～ 3

//Youtubeプレイヤーのサイズとそれに対応したボタン位置設定を保持する配列
    $scope.sizes = [
        {"sizeIndex": 0, "height": 230, "width": 352, 
         "movieListLeft": "5px", "movieListTop": "250px", "sizeBtnLeft": "290px", "sizeBtnTop": "290px",
         "previousBtnLeft": "5px", "previousBtnTop": "290px", "forwardBtnLeft": "130px", "forwardBtnTop": "290px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "330px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "330px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "370px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "370px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "410px", "twitterBtnLeft": "130px", "twitterBtnTop": "410px", "facebookBtnLeft": "245px", "facebookBtnTop": "410px"},
        
        {"sizeIndex": 1, "height": 288, "width": 512, 
         "movieListLeft": "5px", "movieListTop": "308px", "sizeBtnLeft": "290px", "sizeBtnTop": "348px",
         "previousBtnLeft": "5px", "previousBtnTop": "348px", "forwardBtnLeft": "130px", "forwardBtnTop": "348px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "388px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "388px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "428px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "428px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "468px", "twitterBtnLeft": "130px", "twitterBtnTop": "468px", "facebookBtnLeft": "245px", "facebookBtnTop": "468px"},
        
        {"sizeIndex": 2, "height": 495, "width": 704, 
         "movieListLeft": "740px", "movieListTop": "115px", "sizeBtnLeft": "1030px", "sizeBtnTop": "155px",
         "previousBtnLeft": "740px", "previousBtnTop": "155px", "forwardBtnLeft": "870px", "forwardBtnTop": "155px",
         "defaultMVListBtnLeft": "740px", "defaultMVListBtnTop": "195px", "shuffleMVListBtnLeft": "950px", "shuffleMVListBtnTop": "195px",
         "repeatStateSetBtnLeft": "740px", "repeatStateSetBtnTop": "235px", "repeatStateDispTxtLeft": "870px", "repeatStateDispTxtTop": "235px",
         "amazonBtnLeft": "740px", "amazonBtnTop": "275px", "twitterBtnLeft": "870px", "twitterBtnTop": "275px", "facebookBtnLeft": "985px", "facebookBtnTop": "275px"},
        
        
        {"sizeIndex": 3, "height": 144, "width": 256, 
         "movieListLeft": "5px", "movieListTop": "164px", "sizeBtnLeft": "290px", "sizeBtnTop": "204px",
         "previousBtnLeft": "5px", "previousBtnTop": "204px", "forwardBtnLeft": "130px", "forwardBtnTop": "204px",
         "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "244px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "244px",
         "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "284px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "284px",
         "amazonBtnLeft": "5px", "amazonBtnTop": "324px", "twitterBtnLeft": "130px", "twitterBtnTop": "324px", "facebookBtnLeft": "245px", "facebookBtnTop": "324px"}
        
    ];
    
    $scope.movies = [
        {"movieIndex": 0, "movieID": "DHdi6HhbvfQ", "movieTitle": "秦 基博 - 言ノ葉"},
        {"movieIndex": 1, "movieID": "x2WP1ZSQVlQ", "movieTitle": "秦 基博 - 鱗"},
        {"movieIndex": 2, "movieID": "VTXxBW-w-Os", "movieTitle": "秦 基博 - 風景"},
        {"movieIndex": 3, "movieID": "-qy9W5YWro0", "movieTitle": "秦 基博 - ひまわりの約束(Short Ver.)"},
        {"movieIndex": 4, "movieID": "TX_RiI-SXAg", "movieTitle": "秦 基博 - 朝が来る前に"},
        {"movieIndex": 5, "movieID": "1cVkpohd8o4", "movieTitle": "秦 基博 - ひまわりの約束(弾き語りVer.)"},
        {"movieIndex": 6, "movieID": "qakPRLJTV2E", "movieTitle": "秦 基博 - シンクロ (Live)"},
        {"movieIndex": 7, "movieID": "EbFYGE4goxU", "movieTitle": "秦 基博 - Girl (Live)"},
        {"movieIndex": 8, "movieID": "yfqy9pJ_OAI", "movieTitle": "秦 基博 - 新しい歌 (Live)"},
        {"movieIndex": 9, "movieID": "S-1e8yrh_fA", "movieTitle": "秦 基博 - アイ (Live)"},
        {"movieIndex": 10, "movieID": "2kSJ9QWQEnE", "movieTitle": "秦 基博 - 虹が消えた日 (Live)"},
        {"movieIndex": 11, "movieID": "gwPEz648yHU", "movieTitle": "秦 基博 - グッバイ・アイザック (Live)"}
    ];

$scope.defaultMovies = [
        {"movieIndex": 0, "movieID": "DHdi6HhbvfQ", "movieTitle": "秦 基博 - 言ノ葉"},
        {"movieIndex": 1, "movieID": "x2WP1ZSQVlQ", "movieTitle": "秦 基博 - 鱗"},
        {"movieIndex": 2, "movieID": "VTXxBW-w-Os", "movieTitle": "秦 基博 - 風景"},
        {"movieIndex": 3, "movieID": "-qy9W5YWro0", "movieTitle": "秦 基博 - ひまわりの約束(Short Ver.)"},
        {"movieIndex": 4, "movieID": "TX_RiI-SXAg", "movieTitle": "秦 基博 - 朝が来る前に"},
        {"movieIndex": 5, "movieID": "1cVkpohd8o4", "movieTitle": "秦 基博 - ひまわりの約束(弾き語りVer.)"},
        {"movieIndex": 6, "movieID": "qakPRLJTV2E", "movieTitle": "秦 基博 - シンクロ (Live)"},
        {"movieIndex": 7, "movieID": "EbFYGE4goxU", "movieTitle": "秦 基博 - Girl (Live)"},
        {"movieIndex": 8, "movieID": "yfqy9pJ_OAI", "movieTitle": "秦 基博 - 新しい歌 (Live)"},
        {"movieIndex": 9, "movieID": "S-1e8yrh_fA", "movieTitle": "秦 基博 - アイ (Live)"},
        {"movieIndex": 10, "movieID": "2kSJ9QWQEnE", "movieTitle": "秦 基博 - 虹が消えた日 (Live)"},
        {"movieIndex": 11, "movieID": "gwPEz648yHU", "movieTitle": "秦 基博 - グッバイ・アイザック (Live)"}
    ];

$scope.tempMovies = [
    ];
    $scope.destMovies = [
    ];
    
    $scope.movie = $scope.movies[0];

$scope.onSelectChange = function() {
        player.loadVideoById($scope.movie.movieID);
        $scope.index = $scope.movie.movieIndex;
        
    };

$scope.previous = function() {
        if ($scope.index - 1 >= 0) {
            //1つ前の動画インデックスに戻す
            $scope.index = $scope.index - 1; 
            //戻したインデックスをもとに動画リストから動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);
            //戻したインデックスを動画セレクトボックスにも反映
            $scope.movie = $scope.movies[$scope.index];
        //Repeat設定がONの場合は、最初の動画のインデックスから最後の動画のインデックスへ変更してから同じ処理    
        } else if ( ($scope.index - 1) < 0 && $scope.isRepeat) { 
            $scope.index = $scope.movies.length - 1;
            player.loadVideoById($scope.movies[$scope.index].movieID);
            $scope.movie = $scope.movies[$scope.index];
        }
    };
    
    $scope.forward = function() {
        if ($scope.index + 1 < $scope.movies.length) {
            //1つ後の動画インデックスに進める
            $scope.index = $scope.index + 1;
            //進めたインデックスをもとに動画リストから動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);
            //進めたインデックスを動画セレクトボックスにも反映
            $scope.movie = $scope.movies[$scope.index];
        //Repeat設定がONの場合は、最後の動画のインデックスから最初の動画のインデックスへ変更してから同じ処理        
        } else if ( ( $scope.index + 1 ) == $scope.movies.length && $scope.isRepeat) {
            $scope.index =  0;
            player.loadVideoById($scope.movies[$scope.index].movieID);
            $scope.movie = $scope.movies[$scope.index];
        }
    };

//再生動画リストをデフォルトのものに設定
    $scope.defaultMVList = function() {
        
        //デフォルトの再生動画リストをセットし、
        //その他項目を初期化してリスト先頭の動画から再生しなおす        
        $scope.movies = $scope.defaultMovies.slice();
        $scope.index = 0;
        $scope.movie = $scope.movies[0];
        player.loadVideoById($scope.movies[$scope.index].movieID);
        
    };
    
    //再生動画リストをシャッフル
    $scope.shuffleMVList = function() {
        
        $scope.tempMovies = $scope.movies.slice();
        $scope.destMovies = [];
        var destIndex = 0;
        
        while($scope.tempMovies.length > 0) {

//REPEAT設定のON・OFFを行う　REPEAT設定は画面のテキストボックスに反映される
    $scope.playNextMovie = function() {

//動画IDリストの最後のIDになるまで動画を再生する
        if ( ($scope.index + 1) < $scope.movies.length) {

//動画IDリストのインデックスを進める
            $scope.index = $scope.index + 1;

//画面のSELECTリストに反映させる
            $scope.movie = $scope.movies[$scope.index];

//動画IDリストより動画IDを指定して動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);

//REPEAT ON の場合に動画IDリスト最後の動画が終了した場合は
        //動画IDリストの最初のIDに戻って動画を再生する    
        } else if ( ($scope.index + 1) ==$scope.movies.length && $scope.isRepeat) {

$scope.index = 0;

//画面のSELECTリストに反映させる;
            $scope.movie = $scope.movies[$scope.index];

//動画IDリストより動画IDを指定して動画再生
            player.loadVideoById($scope.movies[$scope.index].movieID);

}

};

//YoutubePlayerのサイズを変更する
    $scope.changePlayerSize = function() {

$scope.size = $scope.size + 1;
        //サイズ保持配列からYoutubePlayerのサイズを取得して変更する
        if ($scope.size < $scope.sizes.length) {
            player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height);

} else {
            $scope.size = 0;
            player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height);
            
        }
        //ボタンの座標を設定
	    var element = document.getElementById("movieList"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].movieListLeft; 
	    element.style.top  = $scope.sizes[$scope.size].movieListTop; 
	                
	    element = document.getElementById("sizeBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].sizeBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].sizeBtnTop; 
	    
	    element = document.getElementById("previousBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].previousBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].previousBtnTop;
	    
	    element = document.getElementById("forwardBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].forwardBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].forwardBtnTop;

element = document.getElementById("defaultMVListBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].defaultMVListBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].defaultMVListBtnTop;
	    
	    element = document.getElementById("shuffleMVListBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].shuffleMVListBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].shuffleMVListBtnTop;
	    
	    element = document.getElementById("repeatStateSetBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].repeatStateSetBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].repeatStateSetBtnTop;
	    
	    element = document.getElementById("repeatStateDispTxt"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].repeatStateDispTxtLeft; 
	    element.style.top  = $scope.sizes[$scope.size].repeatStateDispTxtTop;

element = document.getElementById("amazonBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].amazonBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].amazonBtnTop;
	    
	    element = document.getElementById("twitterBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].twitterBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].twitterBtnTop;

element = document.getElementById("facebookBtn"); 
	    //element.style.position = 'absolute'; 
	    element.style.left = $scope.sizes[$scope.size].facebookBtnLeft; 
	    element.style.top  = $scope.sizes[$scope.size].facebookBtnTop;

};
    
});

<!DOCTYPE html>
<html>
    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<body>

<div id="player"></div>
        
        <div ng-app="movieListApp">
        
            <div id = "movieListCtrlID" ng-controller="movieListController">
      
                <select id="movieList" ng-model="movie" ng-options="movie.movieTitle for movie in movies" ng-change="onSelectChange()" style="position: absolute; left: 5px; top: 250px">
                </select>                
                
                <br>
                             
                <button id="previousBtn" ng-click="previous()" style="position: absolute; left: 5px; top: 290px">Previous</button>  
                <button id="forwardBtn" ng-click="forward()" style="position: absolute; left: 130px; top: 290px">Forward</button>  
                <button id="sizeBtn" ng-click="changePlayerSize()"  style="position: absolute; left: 290px; top: 290px">Size</button>

<br>
                             
                <button id="defaultMVListBtn" ng-click="defaultMVList()" style="position: absolute; left: 5px; top: 330px">DefaultMVList</button>  
                <button id="shuffleMVListBtn" ng-click="shuffleMVList()" style="position: absolute; left: 200px; top: 330px">ShuffleMVList</button>  
                               
                <br>
                
                <form name="txtForm">
                    <button id="repeatStateSetBtn" ng-click="setRepeatState()" style="position: absolute; left: 5px; top: 370px">Repeat</button>
                    <input  id="repeatStateDispTxt" type="text" name="repeatState" size="11" maxlength="10" value="REPEAT OFF" readonly="readonly" style="position: absolute; left: 130px; top: 370px"> 
                </form>
                <br>

<a href="http://www.amazon.co.jp/gp/search?ie=UTF8&keywords=秦基博&tag=myinteresting-22&index=aps&linkCode=ur2&camp=247&creative=1211"  id="amazonBtn" rel="nofollow" target="_blank" style="position: absolute; left: 5px; top: 410px">Amazon</a>
                <a href="http://twitter.com/share?url=http://jsdo.it/siouxcitizen/a9qs&amp;text=作業用に秦基博のYoutube動画を連続再生"  id="twitterBtn" rel="nofollow" target="_blank" style="position: absolute; left: 130px; top: 410px">Twitter</a>
                <a href="http://www.facebook.com/sharer.php?u=http://jsdo.it/siouxcitizen/a9qs" id="facebookBtn" rel="nofollow" target="_blank" style="position: absolute; left: 245px; top: 410px">Facebook</a>

</div>
            
        </div>
        
    </body>
    
</html>

作業用に秦基博のYoutube動画を連続再生

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  padding: 10px;
  background: #5088ff;
  font: 1.0em sans-serif;
  font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
}

select {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #333333;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;

}

a {
    background-color: #4099FF;
    color: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 2em;
    text-decoration: none;
    font-style: none;
}

a:hover {
  background-color: #fff;
  color: #7f8c8d;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

button {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #3B5998;
    color: #fff;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 25px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;

}

button:hover {
  background-color: #fff;
  color: #7f8c8d;
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

input[type="text"] {
    font: 1.0em sans-serif;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #333333;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    display: inline-block;
    padding: 5px 15px;
    transition: all 0.15s ease;
    margin-bottom: 0.5em;
}

// forked from siouxcitizen2's "作業用に森山直太朗のYoutube動画を連続再生" http://jsdo.it/siouxcitizen2/Geul Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。 [ShuffleMVList]ボタンで再生動画の順番をシャッフルします [DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします秦基博の動画を連続再生してみました＊注なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです // forked from siouxcitizen2's "作業用に森山直太朗のYoutube動画を連続再生" http://jsdo.it/siouxcitizen2/Geul // //Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。 // //[ShuffleMVList]ボタンで再生動画の順番をシャッフルします //[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします // //秦基博の動画を連続再生してみました // //＊注 //なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです // //動画プレイヤー var player = null; //動画プレイヤー用パラメータ var options = { width: 352, //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット height: 230, //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット videoId: "DHdi6HhbvfQ", //下部AngularJS部分に記述された動画ID配列($scope.movies)の先頭にある動画IDをセット playerVars: { autoplay: 1, controls: 1, autohide: 1, html5: 1 }, events: { onReady: onPlayerReady, onStateChange: onPlayerStateChange } }; //iframe apiの読込　 //iframe apiの読込完了時に onYouTubeIframeAPIReady が呼び出されて動画Player設定→動画再生処理開始 var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); //iframe apiの読込完了時に呼び出される //Youtube Playerのパラメータ設定や、イベント処理の設定を行う function onYouTubeIframeAPIReady() { player = new YT.Player( 'player', options ); } //Youtube Playerの準備ができたら(読込完了したら？)動画再生を開始 function onPlayerReady(event) { //event.target.playVideo(); player.playVideo(); } //動画の再生が終了したら、動画IDリストから次の動画のIDを取得して再生する function onPlayerStateChange(event) { if(event.data == YT.PlayerState.ENDED) { //angularJSの関数を呼び出す var scope = angular.element(document.getElementById("movieListCtrlID")).scope(); scope.$apply(function () { scope.playNextMovie(); }); } } angular.module('movieListApp', []) .controller('movieListController', function ($scope) { //動画IDの配列参照用のインデックス $scope.index = 0; $scope.isRepeat = false; $scope.size = 0; // 画面サイズ　0 ～ 3 //Youtubeプレイヤーのサイズとそれに対応したボタン位置設定を保持する配列 $scope.sizes = [ {"sizeIndex": 0, "height": 230, "width": 352, "movieListLeft": "5px", "movieListTop": "250px", "sizeBtnLeft": "290px", "sizeBtnTop": "290px", "previousBtnLeft": "5px", "previousBtnTop": "290px", "forwardBtnLeft": "130px", "forwardBtnTop": "290px", "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "330px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "330px", "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "370px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "370px", "amazonBtnLeft": "5px", "amazonBtnTop": "410px", "twitterBtnLeft": "130px", "twitterBtnTop": "410px", "facebookBtnLeft": "245px", "facebookBtnTop": "410px"}, {"sizeIndex": 1, "height": 288, "width": 512, "movieListLeft": "5px", "movieListTop": "308px", "sizeBtnLeft": "290px", "sizeBtnTop": "348px", "previousBtnLeft": "5px", "previousBtnTop": "348px", "forwardBtnLeft": "130px", "forwardBtnTop": "348px", "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "388px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "388px", "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "428px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "428px", "amazonBtnLeft": "5px", "amazonBtnTop": "468px", "twitterBtnLeft": "130px", "twitterBtnTop": "468px", "facebookBtnLeft": "245px", "facebookBtnTop": "468px"}, {"sizeIndex": 2, "height": 495, "width": 704, "movieListLeft": "740px", "movieListTop": "115px", "sizeBtnLeft": "1030px", "sizeBtnTop": "155px", "previousBtnLeft": "740px", "previousBtnTop": "155px", "forwardBtnLeft": "870px", "forwardBtnTop": "155px", "defaultMVListBtnLeft": "740px", "defaultMVListBtnTop": "195px", "shuffleMVListBtnLeft": "950px", "shuffleMVListBtnTop": "195px", "repeatStateSetBtnLeft": "740px", "repeatStateSetBtnTop": "235px", "repeatStateDispTxtLeft": "870px", "repeatStateDispTxtTop": "235px", "amazonBtnLeft": "740px", "amazonBtnTop": "275px", "twitterBtnLeft": "870px", "twitterBtnTop": "275px", "facebookBtnLeft": "985px", "facebookBtnTop": "275px"}, {"sizeIndex": 3, "height": 144, "width": 256, "movieListLeft": "5px", "movieListTop": "164px", "sizeBtnLeft": "290px", "sizeBtnTop": "204px", "previousBtnLeft": "5px", "previousBtnTop": "204px", "forwardBtnLeft": "130px", "forwardBtnTop": "204px", "defaultMVListBtnLeft": "5px", "defaultMVListBtnTop": "244px", "shuffleMVListBtnLeft": "200px", "shuffleMVListBtnTop": "244px", "repeatStateSetBtnLeft": "5px", "repeatStateSetBtnTop": "284px", "repeatStateDispTxtLeft": "130px", "repeatStateDispTxtTop": "284px", "amazonBtnLeft": "5px", "amazonBtnTop": "324px", "twitterBtnLeft": "130px", "twitterBtnTop": "324px", "facebookBtnLeft": "245px", "facebookBtnTop": "324px"} ]; $scope.movies = [ {"movieIndex": 0, "movieID": "DHdi6HhbvfQ", "movieTitle": "秦基博 - 言ノ葉"}, {"movieIndex": 1, "movieID": "x2WP1ZSQVlQ", "movieTitle": "秦基博 - 鱗"}, {"movieIndex": 2, "movieID": "VTXxBW-w-Os", "movieTitle": "秦基博 - 風景"}, {"movieIndex": 3, "movieID": "-qy9W5YWro0", "movieTitle": "秦基博 - ひまわりの約束(Short Ver.)"}, {"movieIndex": 4, "movieID": "TX_RiI-SXAg", "movieTitle": "秦基博 - 朝が来る前に"}, {"movieIndex": 5, "movieID": "1cVkpohd8o4", "movieTitle": "秦基博 - ひまわりの約束(弾き語りVer.)"}, {"movieIndex": 6, "movieID": "qakPRLJTV2E", "movieTitle": "秦基博 - シンクロ (Live)"}, {"movieIndex": 7, "movieID": "EbFYGE4goxU", "movieTitle": "秦基博 - Girl (Live)"}, {"movieIndex": 8, "movieID": "yfqy9pJ_OAI", "movieTitle": "秦基博 - 新しい歌 (Live)"}, {"movieIndex": 9, "movieID": "S-1e8yrh_fA", "movieTitle": "秦基博 - アイ (Live)"}, {"movieIndex": 10, "movieID": "2kSJ9QWQEnE", "movieTitle": "秦基博 - 虹が消えた日 (Live)"}, {"movieIndex": 11, "movieID": "gwPEz648yHU", "movieTitle": "秦基博 - グッバイ・アイザック (Live)"} ]; $scope.defaultMovies = [ {"movieIndex": 0, "movieID": "DHdi6HhbvfQ", "movieTitle": "秦基博 - 言ノ葉"}, {"movieIndex": 1, "movieID": "x2WP1ZSQVlQ", "movieTitle": "秦基博 - 鱗"}, {"movieIndex": 2, "movieID": "VTXxBW-w-Os", "movieTitle": "秦基博 - 風景"}, {"movieIndex": 3, "movieID": "-qy9W5YWro0", "movieTitle": "秦基博 - ひまわりの約束(Short Ver.)"}, {"movieIndex": 4, "movieID": "TX_RiI-SXAg", "movieTitle": "秦基博 - 朝が来る前に"}, {"movieIndex": 5, "movieID": "1cVkpohd8o4", "movieTitle": "秦基博 - ひまわりの約束(弾き語りVer.)"}, {"movieIndex": 6, "movieID": "qakPRLJTV2E", "movieTitle": "秦基博 - シンクロ (Live)"}, {"movieIndex": 7, "movieID": "EbFYGE4goxU", "movieTitle": "秦基博 - Girl (Live)"}, {"movieIndex": 8, "movieID": "yfqy9pJ_OAI", "movieTitle": "秦基博 - 新しい歌 (Live)"}, {"movieIndex": 9, "movieID": "S-1e8yrh_fA", "movieTitle": "秦基博 - アイ (Live)"}, {"movieIndex": 10, "movieID": "2kSJ9QWQEnE", "movieTitle": "秦基博 - 虹が消えた日 (Live)"}, {"movieIndex": 11, "movieID": "gwPEz648yHU", "movieTitle": "秦基博 - グッバイ・アイザック (Live)"} ]; $scope.tempMovies = [ ]; $scope.destMovies = [ ]; $scope.movie = $scope.movies[0]; $scope.onSelectChange = function() { player.loadVideoById($scope.movie.movieID); $scope.index = $scope.movie.movieIndex; }; $scope.previous = function() { if ($scope.index - 1 >= 0) { //1つ前の動画インデックスに戻す $scope.index = $scope.index - 1; //戻したインデックスをもとに動画リストから動画再生 player.loadVideoById($scope.movies[$scope.index].movieID); //戻したインデックスを動画セレクトボックスにも反映 $scope.movie = $scope.movies[$scope.index]; //Repeat設定がONの場合は、最初の動画のインデックスから最後の動画のインデックスへ変更してから同じ処理 } else if ( ($scope.index - 1) < 0 && $scope.isRepeat) { $scope.index = $scope.movies.length - 1; player.loadVideoById($scope.movies[$scope.index].movieID); $scope.movie = $scope.movies[$scope.index]; } }; $scope.forward = function() { if ($scope.index + 1 < $scope.movies.length) { //1つ後の動画インデックスに進める $scope.index = $scope.index + 1; //進めたインデックスをもとに動画リストから動画再生 player.loadVideoById($scope.movies[$scope.index].movieID); //進めたインデックスを動画セレクトボックスにも反映 $scope.movie = $scope.movies[$scope.index]; //Repeat設定がONの場合は、最後の動画のインデックスから最初の動画のインデックスへ変更してから同じ処理 } else if ( ( $scope.index + 1 ) == $scope.movies.length && $scope.isRepeat) { $scope.index = 0; player.loadVideoById($scope.movies[$scope.index].movieID); $scope.movie = $scope.movies[$scope.index]; } }; //再生動画リストをデフォルトのものに設定 $scope.defaultMVList = function() { //デフォルトの再生動画リストをセットし、 //その他項目を初期化してリスト先頭の動画から再生しなおす $scope.movies = $scope.defaultMovies.slice(); $scope.index = 0; $scope.movie = $scope.movies[0]; player.loadVideoById($scope.movies[$scope.index].movieID); }; //再生動画リストをシャッフル $scope.shuffleMVList = function() { $scope.tempMovies = $scope.movies.slice(); $scope.destMovies = []; var destIndex = 0; while($scope.tempMovies.length > 0) { var tempIndex = Math.floor(Math.random() * $scope.tempMovies.length); //alert(tempIndex); //alert($scope.tempMovies[tempIndex].movieIndex); $scope.tempMovies[tempIndex].movieIndex = destIndex; $scope.destMovies.push($scope.tempMovies[tempIndex]); $scope.tempMovies.splice(tempIndex, 1); destIndex = destIndex + 1; } //シャフルされた再生動画リストをセットし、 //その他項目を初期化してリスト先頭の動画から再生しなおす $scope.movies = $scope.destMovies; $scope.index = 0; $scope.movie = $scope.movies[0]; player.loadVideoById($scope.movies[$scope.index].movieID); }; //REPEAT設定のON・OFFを行う　REPEAT設定は画面のテキストボックスに反映される $scope.setRepeatState = function() { if($scope.isRepeat) { //isRepeat = false; $scope.isRepeat = false; document.txtForm.repeatState.value = "REPEAT OFF"; } else { //isRepeat = true; $scope.isRepeat = true; document.txtForm.repeatState.value = "REPEAT ON"; } }; //REPEAT設定のON・OFFを行う　REPEAT設定は画面のテキストボックスに反映される $scope.playNextMovie = function() { //動画IDリストの最後のIDになるまで動画を再生する if ( ($scope.index + 1) < $scope.movies.length) { //動画IDリストのインデックスを進める $scope.index = $scope.index + 1; //画面のSELECTリストに反映させる $scope.movie = $scope.movies[$scope.index]; //動画IDリストより動画IDを指定して動画再生 player.loadVideoById($scope.movies[$scope.index].movieID); //REPEAT ON の場合に動画IDリスト最後の動画が終了した場合は //動画IDリストの最初のIDに戻って動画を再生する } else if ( ($scope.index + 1) ==$scope.movies.length && $scope.isRepeat) { $scope.index = 0; //画面のSELECTリストに反映させる; $scope.movie = $scope.movies[$scope.index]; //動画IDリストより動画IDを指定して動画再生 player.loadVideoById($scope.movies[$scope.index].movieID); } }; //YoutubePlayerのサイズを変更する $scope.changePlayerSize = function() { $scope.size = $scope.size + 1; //サイズ保持配列からYoutubePlayerのサイズを取得して変更する if ($scope.size < $scope.sizes.length) { player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height); } else { $scope.size = 0; player.setSize($scope.sizes[$scope.size].width, $scope.sizes[$scope.size].height); } //ボタンの座標を設定 var element = document.getElementById("movieList"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].movieListLeft; element.style.top = $scope.sizes[$scope.size].movieListTop; element = document.getElementById("sizeBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].sizeBtnLeft; element.style.top = $scope.sizes[$scope.size].sizeBtnTop; element = document.getElementById("previousBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].previousBtnLeft; element.style.top = $scope.sizes[$scope.size].previousBtnTop; element = document.getElementById("forwardBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].forwardBtnLeft; element.style.top = $scope.sizes[$scope.size].forwardBtnTop; element = document.getElementById("defaultMVListBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].defaultMVListBtnLeft; element.style.top = $scope.sizes[$scope.size].defaultMVListBtnTop; element = document.getElementById("shuffleMVListBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].shuffleMVListBtnLeft; element.style.top = $scope.sizes[$scope.size].shuffleMVListBtnTop; element = document.getElementById("repeatStateSetBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].repeatStateSetBtnLeft; element.style.top = $scope.sizes[$scope.size].repeatStateSetBtnTop; element = document.getElementById("repeatStateDispTxt"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].repeatStateDispTxtLeft; element.style.top = $scope.sizes[$scope.size].repeatStateDispTxtTop; element = document.getElementById("amazonBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].amazonBtnLeft; element.style.top = $scope.sizes[$scope.size].amazonBtnTop; element = document.getElementById("twitterBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].twitterBtnLeft; element.style.top = $scope.sizes[$scope.size].twitterBtnTop; element = document.getElementById("facebookBtn"); //element.style.position = 'absolute'; element.style.left = $scope.sizes[$scope.size].facebookBtnLeft; element.style.top = $scope.sizes[$scope.size].facebookBtnTop; }; }); <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> <body>  <div id="player"></div> <div ng-app="movieListApp"> <div id = "movieListCtrlID" ng-controller="movieListController"> <select id="movieList" ng-model="movie" ng-options="movie.movieTitle for movie in movies" ng-change="onSelectChange()" style="position: absolute; left: 5px; top: 250px"> </select> <br> <button id="previousBtn" ng-click="previous()" style="position: absolute; left: 5px; top: 290px">Previous</button> <button id="forwardBtn" ng-click="forward()" style="position: absolute; left: 130px; top: 290px">Forward</button> <button id="sizeBtn" ng-click="changePlayerSize()" style="position: absolute; left: 290px; top: 290px">Size</button> <br> <button id="defaultMVListBtn" ng-click="defaultMVList()" style="position: absolute; left: 5px; top: 330px">DefaultMVList</button> <button id="shuffleMVListBtn" ng-click="shuffleMVList()" style="position: absolute; left: 200px; top: 330px">ShuffleMVList</button> <br> <form name="txtForm"> <button id="repeatStateSetBtn" ng-click="setRepeatState()" style="position: absolute; left: 5px; top: 370px">Repeat</button> <input id="repeatStateDispTxt" type="text" name="repeatState" size="11" maxlength="10" value="REPEAT OFF" readonly="readonly" style="position: absolute; left: 130px; top: 370px"> </form> <br> <a href="http://www.amazon.co.jp/gp/search?ie=UTF8&keywords=秦基博&tag=myinteresting-22&index=aps&linkCode=ur2&camp=247&creative=1211" id="amazonBtn" rel="nofollow" target="_blank" style="position: absolute; left: 5px; top: 410px">Amazon</a> <a href="http://twitter.com/share?url=http://jsdo.it/siouxcitizen/a9qs&text=作業用に秦基博のYoutube動画を連続再生" id="twitterBtn" rel="nofollow" target="_blank" style="position: absolute; left: 130px; top: 410px">Twitter</a> <a href="http://www.facebook.com/sharer.php?u=http://jsdo.it/siouxcitizen/a9qs" id="facebookBtn" rel="nofollow" target="_blank" style="position: absolute; left: 245px; top: 410px">Facebook</a> </div> </div> </body> </html>* { margin: 0; padding: 0; border: 0; } body { padding: 10px; background: #5088ff; font: 1.0em sans-serif; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } select { font: 1.0em sans-serif; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; background-color: #fff; color: #333333; letter-spacing: 0.1em; border: 1px solid #fff; display: inline-block; padding: 5px 15px; border-radius: 25px; transition: all 0.15s ease; margin-bottom: 0.5em; } a { background-color: #4099FF; color: #fff; letter-spacing: 0.1em; border: 1px solid #fff; display: inline-block; padding: 5px 15px; border-radius: 25px; transition: all 0.15s ease; margin-bottom: 2em; text-decoration: none; font-style: none; } a:hover { background-color: #fff; color: #7f8c8d; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } button { font: 1.0em sans-serif; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; background-color: #3B5998; color: #fff; letter-spacing: 0.1em; border: 1px solid #fff; display: inline-block; padding: 5px 15px; border-radius: 25px; transition: all 0.15s ease; margin-bottom: 0.5em; } button:hover { background-color: #fff; color: #7f8c8d; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } input[type="text"] { font: 1.0em sans-serif; font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; background-color: #fff; color: #333333; letter-spacing: 0.1em; border: 1px solid #fff; display: inline-block; padding: 5px 15px; transition: all 0.15s ease; margin-bottom: 0.5em; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

siouxcitizen2

URL
https://twitter.com/siouxcitizen

Yahoo Open ID が機能しなくなったのでjsdo.itの第二アカウント作成しました

jsdo.itの第一アカウント http://jsdo.it/siouxcitizen

第一アカウントも含めて混沌としてきたので、投稿コードを以下のようにまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

作業用BGMにYoutube動画を連続再生するプログラムもまとめてみました直リンク : http://matome.naver.jp/odai/2143666226200730001 アーティスト別の再生動画の一覧付きリスト : http://matome.naver.jp/odai/2142630899820574901

ブログ : http://oreorekaihatsu.blogspot.jp/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/a9qs/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

作業用にスキマスイッチのYoutube動画を連続再生

siouxcitizen

356/49/91

作業用に秦基博のYoutube動画を連続再生

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked