2016-07-16 07:02:38

License: MIT License

Fork: 1

Fav: 0

View: 490

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 346 lines
HTML 49 lines
CSS 91 lines

[シャッフル機能付き] 作業用にAdele(アデル)のYoutubePV動画を連続再生

// forked from siouxcitizen's "[シャッフル機能付き] 作業用にアニソンのYoutubePV動画を連続再生" http://jsdo.it/siouxcitizen/YdOM
//
//Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。
//
//[ShuffleMVList]ボタンで再生動画の順番をシャッフルします
//[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします
//
//Adele (アデル ) のPV動画を連続再生してみました
//
//＊注
//なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです
//

//動画プレイヤー
var player = null;
//動画プレイヤー用パラメータ
var options =
    {
        width: 352,              //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット
        height: 230,             //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット
        videoId: "rYEDA3JcQqw",  //下部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": "rYEDA3JcQqw", "movieTitle": "Adele - Rolling in the Deep"},
        {"movieIndex": 1, "movieID": "YQHsXMglC9A", "movieTitle": "Adele - Hello"},
        {"movieIndex": 2, "movieID": "BW9Fzwuf43c", "movieTitle": "Adele - Hometown Glory"},
        {"movieIndex": 3, "movieID": "hLQl3WQQoQ0", "movieTitle": "Adele - Someone Like You"},
        {"movieIndex": 4, "movieID": "fk4BbF7B29w", "movieTitle": "Adele - Send My Love"},
        {"movieIndex": 5, "movieID": "0put0_a--Ng", "movieTitle": "Adele - Make You Feel My Love"},
        {"movieIndex": 6, "movieID": "08DjMT-qR9g", "movieTitle": "Adele - Chasing Pavements"},
        {"movieIndex": 7, "movieID": "DeumyOzKqgI", "movieTitle": "Adele - Skyfall"},
        {"movieIndex": 8, "movieID": "RDRwqTNLGDs", "movieTitle": "Adele - Don't You Remember (Live)"},
        {"movieIndex": 9, "movieID": "DDWKuo3gXMQ", "movieTitle": "Adele - When We Were Young (Live)"},
        {"movieIndex": 10, "movieID": "Ri7-vnrJD3k", "movieTitle": "Adele - Set Fire To The Rain (Live)"}
    ];

$scope.defaultMovies = [
        {"movieIndex": 0, "movieID": "rYEDA3JcQqw", "movieTitle": "Adele - Rolling in the Deep"},
        {"movieIndex": 1, "movieID": "YQHsXMglC9A", "movieTitle": "Adele - Hello"},
        {"movieIndex": 2, "movieID": "BW9Fzwuf43c", "movieTitle": "Adele - Hometown Glory"},
        {"movieIndex": 3, "movieID": "hLQl3WQQoQ0", "movieTitle": "Adele - Someone Like You"},
        {"movieIndex": 4, "movieID": "fk4BbF7B29w", "movieTitle": "Adele - Send My Love"},
        {"movieIndex": 5, "movieID": "0put0_a--Ng", "movieTitle": "Adele - Make You Feel My Love"},
        {"movieIndex": 6, "movieID": "08DjMT-qR9g", "movieTitle": "Adele - Chasing Pavements"},
        {"movieIndex": 7, "movieID": "DeumyOzKqgI", "movieTitle": "Adele - Skyfall"},
        {"movieIndex": 8, "movieID": "RDRwqTNLGDs", "movieTitle": "Adele - Don't You Remember (Live)"},
        {"movieIndex": 9, "movieID": "DDWKuo3gXMQ", "movieTitle": "Adele - When We Were Young (Live)"},
        {"movieIndex": 10, "movieID": "Ri7-vnrJD3k", "movieTitle": "Adele - Set Fire To The Rain (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=Adele&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/s5Wr&amp;text=[シャッフル機能付き] 作業用にAdele(アデル)のYoutubePV動画を連続再生"  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/s5Wr" id="facebookBtn" rel="nofollow" target="_blank" style="position: absolute; left: 245px; top: 410px">Facebook</a>

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

[シャッフル機能付き] 作業用にAdele(アデル)のYoutubePV動画を連続再生

* {
  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 siouxcitizen's "[シャッフル機能付き] 作業用にアニソンのYoutubePV動画を連続再生" http://jsdo.it/siouxcitizen/YdOM Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。 [ShuffleMVList]ボタンで再生動画の順番をシャッフルします [DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします Adele (アデル ) のPV動画を連続再生してみました＊注なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです // forked from siouxcitizen's "[シャッフル機能付き] 作業用にアニソンのYoutubePV動画を連続再生" http://jsdo.it/siouxcitizen/YdOM // //Youtube動画再生の機能に動画再生の順番をシャッフルする機能を追加してみました。 // //[ShuffleMVList]ボタンで再生動画の順番をシャッフルします //[DefaultMVList]ボタンでデフォルトの動画再生の順番にもどします // //Adele (アデル ) のPV動画を連続再生してみました // //＊注 //なぜかセーブするときにHTMLエディタの先頭を1段落落とさないとCSSがうまく機能しないです // //動画プレイヤー var player = null; //動画プレイヤー用パラメータ var options = { width: 352, //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるwidthをセット height: 230, //下部AngularJS部分に記述された動画プレイヤーサイズ配列($scope.sizes)の先頭にあるheightをセット videoId: "rYEDA3JcQqw", //下部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": "rYEDA3JcQqw", "movieTitle": "Adele - Rolling in the Deep"}, {"movieIndex": 1, "movieID": "YQHsXMglC9A", "movieTitle": "Adele - Hello"}, {"movieIndex": 2, "movieID": "BW9Fzwuf43c", "movieTitle": "Adele - Hometown Glory"}, {"movieIndex": 3, "movieID": "hLQl3WQQoQ0", "movieTitle": "Adele - Someone Like You"}, {"movieIndex": 4, "movieID": "fk4BbF7B29w", "movieTitle": "Adele - Send My Love"}, {"movieIndex": 5, "movieID": "0put0_a--Ng", "movieTitle": "Adele - Make You Feel My Love"}, {"movieIndex": 6, "movieID": "08DjMT-qR9g", "movieTitle": "Adele - Chasing Pavements"}, {"movieIndex": 7, "movieID": "DeumyOzKqgI", "movieTitle": "Adele - Skyfall"}, {"movieIndex": 8, "movieID": "RDRwqTNLGDs", "movieTitle": "Adele - Don't You Remember (Live)"}, {"movieIndex": 9, "movieID": "DDWKuo3gXMQ", "movieTitle": "Adele - When We Were Young (Live)"}, {"movieIndex": 10, "movieID": "Ri7-vnrJD3k", "movieTitle": "Adele - Set Fire To The Rain (Live)"} ]; $scope.defaultMovies = [ {"movieIndex": 0, "movieID": "rYEDA3JcQqw", "movieTitle": "Adele - Rolling in the Deep"}, {"movieIndex": 1, "movieID": "YQHsXMglC9A", "movieTitle": "Adele - Hello"}, {"movieIndex": 2, "movieID": "BW9Fzwuf43c", "movieTitle": "Adele - Hometown Glory"}, {"movieIndex": 3, "movieID": "hLQl3WQQoQ0", "movieTitle": "Adele - Someone Like You"}, {"movieIndex": 4, "movieID": "fk4BbF7B29w", "movieTitle": "Adele - Send My Love"}, {"movieIndex": 5, "movieID": "0put0_a--Ng", "movieTitle": "Adele - Make You Feel My Love"}, {"movieIndex": 6, "movieID": "08DjMT-qR9g", "movieTitle": "Adele - Chasing Pavements"}, {"movieIndex": 7, "movieID": "DeumyOzKqgI", "movieTitle": "Adele - Skyfall"}, {"movieIndex": 8, "movieID": "RDRwqTNLGDs", "movieTitle": "Adele - Don't You Remember (Live)"}, {"movieIndex": 9, "movieID": "DDWKuo3gXMQ", "movieTitle": "Adele - When We Were Young (Live)"}, {"movieIndex": 10, "movieID": "Ri7-vnrJD3k", "movieTitle": "Adele - Set Fire To The Rain (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=Adele&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/s5Wr&text=[シャッフル機能付き] 作業用にAdele(アデル)のYoutubePV動画を連続再生" 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/s5Wr" 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

siouxcitizen

URL
http://twitter.com/siouxcitizen/

混沌としてきたので投稿コードをまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

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

旧ブログ : http://oretaikan.blog20.fc2.com 作りかけ新ブログ : http://oreorekaihatsu.blogspot.jp/

Size

Width: px
Height: px

code

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

QR Code

Discussion

Questions on this code?

Forked

sort by

[シャッフル機能付き] 作業用にMetallica(メタリカ

siouxcitizen

362/49/91

[シャッフル機能付き] 作業用にAdele(アデル)のYoutubePV動画を連続再生

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked