完全に「思いついたからやってみた」という内容で、何に活用できそうかはこれから考えるというものなのですが...
以下の YouTube の「IFrame Player API」を使った YouTube動画の表示を、p5.js Web Editor上でやってみたというものです。
●iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google for Developers
https://developers.google.com/youtube/iframe_api_reference?hl=ja
上記のページでサンプルとして示されている内容は、以下のとおりです。
それを見た感じだと、divタグを用意して、そこに動画を表示させる形になるようです。
<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>
上記を使って、以下の動画を p5.js Web Editor上に表示させてみました。
●micro:bit でフルカラーLEDテープをレインボーに光らせる（順番に点灯したり全点灯後に色が移動する形で変化していったり） - YouTube
https://www.youtube.com/watch?v=s4auEwHEjlQ
コードは以下のとおりです。
タグの生成などの処理は、p5.js らしい書き方を使うようにしてみました。
function setup() {
createCanvas(400, 400);
const scriptTag = createElement("script");
scriptTag.attribute("src", "https://www.youtube.com/iframe_api");
scriptTag.parent(select("head"));
const playerDiv = createDiv();
playerDiv.id("player");
playerDiv.position(50, 50);
select("main").child(playerDiv);
window.onYouTubeIframeAPIReady = function () {
player = new YT.Player("player", {
height: "270",
width: "480",
videoId: "s4auEwHEjlQ",
});
};
}
function draw() {
background(220);
}
また、onYouTubeIframeAPIReady は window.onYouTubeIframeAPIReady = function () {} という形にして、p5.js で処理を扱えるようにしています。
とりあえず、冒頭に掲載したポストの画像のように、YouTube動画を表示させることができました。