コーナープレーヤー

# はじめに
このプレーヤーは、ページの片隅にひっそりと存在するプレーヤーです。また、ページにはほかに何もなく、ひっそりしています。
ただ、ひたすら、youtube音楽を聴くことに徹しています。
使い方としては、バックミュージックとしての活用が考えられます。

# ページイメージ
ページのイメージとしては、以下のような表示になります。

![コーナープレーヤー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/198006/d38559c8-99a0-422b-a23f-19349808dc61.png)
プレーヤー以外には何もありません。このページでは、ただ、youtube音楽を聴くことだけです。唯一、youtube音楽を選択できることがあります。画面で、マウスボタンをクリックすると、ランダムで別の動画に切り替わります。何もしなければ、繰り返し再生します。






# リンク 
[リンク(https://iframe.tecoyan.net/corner/index.php)](https://iframe.tecoyan.net/corner/index.php)

# 特長
これといった特長はありませんが、しいて言えば、何もないのが特徴かもしれません。
# コード
このプレーヤーのhtmlファイルは、以下になります。
<body>には、プレーヤーを挿入するif_player要素しかありません。



### (1)htmlファイル

```html
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Access-Control-Allow-Origin" content="*" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="サムネイルプレーヤ,プラグイン"/>
<meta name="description" content="イージーリスニングには最適です。"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>「サムネイルプレイヤー()」</title>
<link rel="shortcut icon" href="https://iframe.tecoyan.net/favicon.ico" type="image/vnd.microsoft.icon">     
<link rel="canonical" href="https://iframe.tecoyan.net">
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="./js/thumbnail_player_single_limit.js"></script>
</head>
<body id=bodybg onload="auto_start();">
<!--ここに、YT.player('if_player')で、生成-->    
<div id="if_player" class="clearfix" ></div>
</body>
</html>

```
### (2)javascriptファイル
再生処理は、`<script src="thumbnail_player_single_limit.js"></script>`で定義しているjavascriptで行っています。

```js
'use strict';
var vid;
var nplayer;                    //■playerオブジェクト
//ランダムにひとつのvidを取得して、再生
$(document).on('click',()=>{
        var data = $.ajax({
            url: 'https://iframe.tecoyan.net/get_random_vid.php',
            type: 'GET',
            dataType: 'html',
            cache: false,
            //data:params,
            async: false
        }).responseText;
          
        vid = $.trim(data);
        nplayer.loadVideoById(vid);                 
});
//********************************************************
//auto_start()
//********************************************************
function auto_start(vid) {
        console.log("auto_start()");
//#########################################################
//ロード時に、以下のjavascriptコードを順に実行。function、
//イベント処理は、各処理がコールされた時に実行
//ここで、youtubeプレーヤのためのiframe要素のスクリプトを生成
//########################################################
            var tag = document.createElement('script');                         //■
            tag.src = "https://www.youtube.com/iframe_api";                     //■
            var firstScriptTag = document.getElementsByTagName('script')[0];    //■
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);        //■

}
//*******************************************************
//
//*******************************************************
    function onYouTubeIframeAPIReady(){        
             try {
                    //プレーヤーオブジェクト生成
                    console.log("index_thumbnail_player.phpでnplayerを生成");
                    console.log("YTオブジェクト　= "+YT);
                    
                    nplayer = new YT.Player('if_player', {
                        width: "220",
                        height: "160",
                        videoId: "Tr8zD5RQKSY", //ビデオId
                        playerVars: {'autoplay': 1,'loop':1}, //自動再生、ループ
                        events: {
                            'onReady': onYouTubePlayerReady, //イベント関数コール
                            'onStateChange': onytplayerStateChange,
                            'onError': onYouTubePlayerError
                        }
                    });
                } catch (e) {
                    alert("new YT.Playerエラー " + vid);
                    return;
                }
             
             
}      
//********************************************************
//プレーヤーの準備完了
//********************************************************
function onYouTubePlayerReady(e){
        var dd;
        nplayer.setVolume(100);
}
//*******************************************************
//
//*******************************************************
function onYouTubePlayerError(e){
    
           var data = $.ajax({
            url: 'https://iframe.tecoyan.net/get_random_vid.php',
            type: 'GET',
            dataType: 'html',
            cache: false,
            //data:params,
            async: false
        }).responseText;
         
        vid = $.trim(data);
        nplayer.loadVideoById(vid); 
}
//********************************************************
//再生終了他イベント
//********************************************************
function onytplayerStateChange(e){
        console.log("プレーヤーステート　"+e.data);
        switch(e.data){
            case 0:
                //繰り返し
                nplayer.loadVideoById(vid);

                break;
            case 1:
                break;    
        }
}

```



あとがき
このタブは、バックミュージック用として残しておき、別のページで、本来の作業を行うイメージです。リラックスしながら、作業を行えることを志向しています。
今後も改良は行って行く予定ですが、シンプルさは残したいと思います。