はじめに
このプレーヤーは、ページの片隅にひっそりと存在するプレーヤーです。また、ページにはほかに何もなく、ひっそりしています。
ただ、ひたすら、youtube音楽を聴くことに徹しています。
使い方としては、バックミュージックとしての活用が考えられます。
ページイメージ
ページのイメージとしては、以下のような表示になります。
プレーヤー以外には何もありません。このページでは、ただ、youtube音楽を聴くことだけです。唯一、youtube音楽を選択できることがあります。画面で、マウスボタンをクリックすると、ランダムで別の動画に切り替わります。何もしなければ、繰り返し再生します。
リンク
リンク(https://iframe.tecoyan.net/corner/index.php)
特長
これといった特長はありませんが、しいて言えば、何もないのが特徴かもしれません。
コード
このプレーヤーのhtmlファイルは、以下になります。
には、プレーヤーを挿入するif_player要素しかありません。(1)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で行っています。
'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;
}
}
あとがき
このタブは、バックミュージック用として残しておき、別のページで、本来の作業を行うイメージです。リラックスしながら、作業を行えることを志向しています。
今後も改良は行って行く予定ですが、シンプルさは残したいと思います。