YouTube TimerをGeminiに作ってもらいました。
これを公開したURLは
https://embed-ai.com/timer/
です。
デフォルト動画は
https://youtube.com/shorts/VdjDTWSAKqo
この動画です
この動画はわたしのチャンネルのものですので良かったらチャンネル登録お願いします。
使い方
使い方はYouTube動画のURLにある動画IDデフォルトの動画だと VdjDTWSAKqo この部分を入れて再生時間を指定します。
ソース
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube 自動再生タイマー</title>
<style>
body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-color: #f0f0f0; margin: 0; }
.container { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; }
input, button { margin: 10px; padding: 10px; font-size: 1rem; }
#player { margin-top: 20px; }
.status { color: #d32f2f; font-weight: bold; }
</style>
</head>
<body>
<div class="container">
<h2>YouTube 自動再生タイマー</h2>
<div>
<label>動画ID: </label>
<input type="text" id="videoId" placeholder="例：dQw4w9WgXcQ" value="dQw4w9WgXcQ">
</div>
<div>
<label>再生時刻: </label>
<input type="time" id="targetTime" step="1">
</div>
<button onclick="setTimer()">タイマーをセット</button>
<p id="message" class="status">時刻を設定してください</p>
<div id="player"></div>
</div>
<script>
let player;
let timerId = null;
// IFrame Player API の読み込み
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// APIの準備ができたら呼ばれる関数
function onYouTubeIframeAPIReady() {
// 初期状態ではプレイヤーは生成せず、タイマー発動時に生成・再生します
}
function setTimer() {
const videoId = document.getElementById('videoId').value;
const targetTime = document.getElementById('targetTime').value;
if (!targetTime) {
alert("時刻を設定してください");
return;
}
if (timerId) clearInterval(timerId);
document.getElementById('message').innerText = `${targetTime} に再生を予約しました...`;
timerId = setInterval(() => {
const now = new Date();
const currentTime =
String(now.getHours()).padStart(2, '0') + ":" +
String(now.getMinutes()).padStart(2, '0') + ":" +
String(now.getSeconds()).padStart(2, '0');
// 秒まで一致したら再生
if (currentTime === targetTime || (targetTime.length === 5 && currentTime.startsWith(targetTime))) {
clearInterval(timerId);
playVideo(videoId);
}
}, 1000);
}
function playVideo(videoId) {
document.getElementById('message').innerText = "再生中！";
// すでにプレイヤーがある場合は破棄して再作成
if (player) player.destroy();
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: videoId,
playerVars: {
'autoplay': 1,
'mute': 0, // 自動再生制限のため、ブラウザによっては1（消音）にしないと動かない場合があります
'playsinline': 1
},
events: {
'onReady': (event) => {
event.target.playVideo();
}
}
});
}
</script>
</body>
</html>
これをレンタルサーバーに貼れば出来上がり、このHTMLをローカルファイルをしておいてローカルで起動してもOKです。
商用利用したい方へ
このソースを商用利用サイトを作りたい方は、m_kawase@embed-ai.comまでご相談くださいませ。
動画IDを自動取得したり、データベース化することで個人カスタマイズ可能なものを作れます。
個人利用の方はコメント欄にサイトURLを教えてください！