Forked from: siouxcitizen2's 作業用に森山直太朗のYoutube動画を連続再生 View Diff (46) 作業用に秦基博のYoutube動画を連続再生 siouxcitizen Follow 2017-11-23 09:21:22 License: MIT License Fork1 Fav0 View690 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 348 lines HTML 49 lines CSS 91 lines // forked from siouxcitizen2's "作業用に森山直太朗のYoutube動画を連続再生" http://jsdo.it/siouxcitizen2/Geul Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。 [ShuffleMVList]ボタンで再生動画の順番をシャッフルします [DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします 秦基博の動画を連続再生してみました *注 なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです 作業用に秦基博の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) { 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> <!-- YouTubeプレイヤーのプレースホルダ --> <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> 作業用に秦基博の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> <!-- YouTubeプレイヤーのプレースホルダ --> <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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? // forked from siouxcitizen2's "作業用に森山直太朗のYoutube動画を連続再生" http://jsdo.it/siouxcitizen2/Geul Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。 [ShuffleMVList]ボタンで再生動画の順番をシャッフルします [DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします 秦基博の動画を連続再生してみました *注 なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author siouxcitizen2 URLhttps://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/ Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/a9qs/js"></script> AngularJS BGM HTML5 html5_elements&api Javascript Youtube YoutubeAPI YoutubePlayer 秦基博 連続再生 連続動画 連続動画再生 Discussion Questions on this code? Tags AngularJS BGM HTML5 Javascript Youtube YoutubeAPI YoutubePlayer html5_elements&api 秦基博 連続再生 連続動画 連続動画再生 Forked sort by latest page views favorite forked 作業用にスキマスイッチのYoutube動画を連続再生 siouxcitizen 10 564 356/49/91 AngularJS BGM HTML5 Javascript Youtube YoutubeAPI YoutubePlayer html5_elements&api スキマスイッチ 連続再生 連続動画 連続動画再生