YouTube APIで動画を制御する方法

Question

Javaベースのprocessing、YouTube APIで動画を制御する方法

Javaベースのprocessing（https://processing.org/）
で動画の再生やスキップなどの制御が行えるシステムを開発しています。

現在は、mp4ファイルの動画で制御可能な状態ですが、
YouTube APIを用いて実際のYouTube動画を制御させることが難しく困っています。

YouTube動画はJavaScriptでは制御出来ました

<div id="player">
</div>
<div id="video_status">
</div>

<div id="plya_btn">play</div>
<div id="pause_btn">stop</div>
<div id="fw_btn">30m skipping</div>
<div id="re_btn">30m rewind</div>
<div id="next_btn">next</div>
<div id="pre_btn">previous</div>


<script>
    //IFrame Player API用のJavaScriptを呼び込んで、ページの<script>タグとして埋め込みます
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    //上記のJavaScriptの読み込みが完了すると実行され、再生用のプレイヤーが準備されます
    //ここでは、高さ315px、幅560pxでvideoIdがZxnRp4p9SGkの動画をセットするようになっています
    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '315',
            width: '560',
            videoId: 'ZxnRp4p9SGk',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    //上記の記述でプレイヤーの準備が整うと実行されます
    //ここでは、プレイヤーの準備が整えば再生を開始するようになっています
    function onPlayerReady(event) {
        //  event.target.playVideo();
        //  event.target.seekTo(60);
    }


    //再生される・されている動画の情報を取得してプレイヤーサイズを調整する
    function onPlayerStateChange(event) {
        var status = event.data;

        var names = {
            '-1': 'mikaishi',
            '0': 'off',
            '1': 'play',
            '2': 'stop',
            '3': 'buffering',
            '5': 'cue'
        };

        //プレイやの現在の状態を取得
        var PalyStatus = names[status];

        var targetId = document.getElementById("video_status");
        targetId.innerHTML = PalyStatus;




        //ステータスコードによって処理をかける(文字色を変更する)
        if (status == 1) {
            //再生中の処理
            targetId.style.color = "#FF0000";
        } else if (status == 2) {
            //停止された時の処理
            targetId.style.color = "#000000";
        } else if (status == 3) {
            //バッファリング中の処理
            targetId.style.color = "#0000FF";
        } else if (status == 0) {
            //再生が終了した時の処理
            targetId.style.color = "#FFFF00";
        }
    }


    //プレイヤー操作ボタン押下時の動作
    //再生
    var clickElement = document.getElementById("plya_btn");
    clickElement.addEventListener("click", function(event) {
        player.playVideo();
    }, false);

    //一時停止
    var clickElement = document.getElementById("pause_btn");
    clickElement.addEventListener("click", function(event) {
        player.pauseVideo();
    }, false);

    //30秒先へ
    var clickElement = document.getElementById("fw_btn");
    clickElement.addEventListener("click", function(event) {
        var getCurrentTime = player.getCurrentTime();
        var seekTo_time = getCurrentTime + 30;
        player.seekTo(seekTo_time);
    }, false);

    //30秒前へ
    var clickElement = document.getElementById("re_btn");
    clickElement.addEventListener("click", function(event) {
        var getCurrentTime = player.getCurrentTime();
        var seekTo_time = getCurrentTime - 30;
        player.seekTo(seekTo_time);
    }, false);

    //次へ
    var clickElement = document.getElementById("next_btn");
    clickElement.addEventListener("click", function(event) {
        player.nextVideo();
    }, false);

    //前へ
    var clickElement = document.getElementById("pre_btn");
    clickElement.addEventListener("click", function(event) {
        player.previousVideo();
    }, false);

</script>

ここまでは出来ましたが、この制御をJavaベースのprocessingに書き換える方法が分からずに困っております。

###Javaではマウスが円にふれると動画再生する以下のコードが出来ています

import processing.video.*;//videoライブラリを使う

Movie movie1, movie2, movie3; // Movieオブジェクトのインスタンス
boolean movie1_on, movie2_on, movie3_on; // 各movieが再生中かどうかを保存する変数(true:再生中, false:停止中）

void setup() {
  size(800, 600);
  imageMode(CENTER);
  movie1 = new Movie(this, "domo1.mp4");//動画1を読み込み
  movie2 = new Movie(this, "niku.mp4");//動画2を読み込み
  movie3 = new Movie(this, "zou.mp4");//動画3を読み込み
  movie1_on = false; // 初期は停止(初期化)
  movie2_on = false; // 初期は停止(初期化)
  movie3_on = false; // 初期は停止(初期化)
} 

void draw() {
  background(255);
  
  // 動画をONにするスイッチの丸1（赤）
  noStroke();
  fill(255, 0, 0, 128);
  ellipse(100, height-30, 30, 30);
  
  // 動画をONにするスイッチの丸2（緑）
  noStroke();
  fill(0, 255, 0, 128);
  ellipse(width/2, height-30, 30, 30);
  
  // 動画をONにするスイッチの丸3（青）
  noStroke();
  fill(0, 0, 255, 128);
  ellipse(width-100, height-30, 30, 30);
  
  // マウスポインタを中心に描く丸（黒）
  fill(0, 128);
  ellipse(mouseX, mouseY, 30, 30);
  
  // 丸1とマウスの円が重なっている
  if (overlapon(100, height-30, 15, mouseX, mouseY, 15)){
    println("円1と重なっている");
    movie1.play(); // movie1を再生
    movie1.jump(0); //movie1の先頭へ
    movie2.stop(); // movie2を停止
    movie3.stop(); // movie3を停止
    //movie_onは状態を保存する変数(これがないと重なる時だけ再生)
    movie1_on = true; // movie1の再生中
    movie2_on = false; // movie1の停止中
    movie3_on = false; // movie3の停止中（以下同）
  }
  // 丸2とマウスの円が重なっている
  else if (overlapon(width/2, height-30, 15, mouseX, mouseY, 15)){
    println("円2と重なっている");
    movie2.play();
    movie2.jump(0);
    movie1.stop();
    movie3.stop();
    movie1_on = false;
    movie2_on = true;
    movie3_on = false;
  }
  // 丸3とマウスの円が重なっている
  else if (overlapon(width-100, height-30, 15, mouseX, mouseY, 15)){
    println("円3と重なっている");
    movie3.play();
    movie3.jump(0);
    movie1.stop();
    movie2.stop();
    movie1_on = false;
    movie2_on = false;
    movie3_on = true;
  }
  
  // どのMovieが再生中かによってどのMovieを再生するかを切り替える
  //動画を再生し続けるために、draw()関数内で、image関数を呼び出す
  if (movie1_on) { // movie1を再生中
    // movie1をimageで表示させる（以下同）
    image(movie1, width/2, height/2, width*0.6, height*0.6);
  } else if (movie2_on) {
    image(movie2, width/2, height/2, width*0.6, height*0.6);
  } else if (movie3_on) {
    image(movie3, width/2, height/2, width*0.6, height*0.6);
  }
}


boolean overlapon(float a1, float b1, float c1, float a2, float b2, float c2) {//重なったかのon変数
  float distance = dist(a1, b1, a2, b2);// dist関数で、2点間の距離を調べる
  if (distance<c1+c2) {//半径が重なっていたら
    return true;//重なる
  } else {
    return false;//重ならない
  }
}

//映像フレーム毎に自動呼び出しされるイベント
void movieEvent( Movie m ) {//映像フレームを呼び出す時m引数が呼ばれる
  m.read();//カレント位置の画像を取得
  // 実際に動画の画像を表示させるimage関数はdraw()関数内に記述するので以下はコメントアウト
  //image( movie, width/2, height/2, width/2, height/2);//動画２を表示する
}

ヒントでも、どんなことでも大丈夫ですのでよろしくお願いいたします。

参考サイト

YouTube Player APIを使って色々やってみる ｜ Tips Note by TAM
https://search.yahoo.co.jp/amp/s/www.tam-tam.co.jp/tipsnote/javascript/post6217.html/amp%3Fusqp%3Dmq331AQOKAGYAbqnvfnZj9bV4wE%253D

Comments

[mattari_panda]

確認なのですが、Java内の `new Movie(this, "domo1.mp4");` の「domo1.mp4」の部分を、Youtubeにアップされている動画にしたいということでしょうか？

[8739popcorn]

その通りです！

Answer 1

基本的には無理だと思います

自分はJavaやProcessingの専門家ではないので、断定的な回答でないことをご了承ください。
またここまでご自身でコードを書けているので、基本的な知識は大丈夫だと思いますが以下でわからないことがあったらご質問ください。

---

Youtube APIというのはJavaScriptなどで使われるためのもので、クライアントサイド（つまりブラウザ）上でYoutubeの動画をコントロールするために提供されているものです。

かたやJavaベースのProcessingはコンパイルをともなうサーバーサイド言語で、そのままではブラウザで動かすことは出来ません。
そのためブラウザで動かすためにProcessing.jsというJavaScriptに移植したものがあります。

JavaベースのProcessingで扱う動画は同じサーバーにあることが前提のはずです。
（動画をホスティングしているサーバーの設定によっては同じサーバーでなくても良いですが）
.mp4 という拡張子の動画を再生するかしないか、またそのエフェクト等が出来るというものでしょうか。

Youtubeの動画は単純に .mp4 の動画をダウンロードして再生しているわけではないので
Processingはそのままでは再生出来ないですし、Youtube側もそういった処理を許可していません。

解決方法としては

★JavaベースのProcessingを使うことが必須の場合
・なんとかして動画をダウンロードして同じ環境に置く（自分に著作権がないものはNG）

★Youtube APIを使うことが必須の場合

1. Processing.jsを使う（やってみたわけではないですが出来るはず）
2. 他のJSライブラリ等でエフェクトを再現

要件として、何が必須かがわかればもう少し具体的なアドバイスが出来るかもしれません。

Comments

[8739popcorn]

大変分かりやすい説明をありがとうございます。
現在は、とりあえず著作権の問題は一切考えられていないですが、
YouTubeの動画を画面録画してmp4ファイルで張り付けました。

おっしゃってくださったようProcessing.jsも使用してみましたが、
ライブラリを使用していないコードでは動いたものの、
Javaベースprocessingのvideoライブラリを使用しているためか動いてくれません。
このあたりについてもし少しでもアドバイスがありましたら教えていただきたいです。

しかし、今回の質問の問題については理解できました。
ありがとうございました。