Javaベースのprocessing、YouTube APIで動画を制御する方法
Javaベースのprocessing(https://processing.org/)
で動画の再生やスキップなどの制御が行えるシステムを開発しています。
現在は、mp4ファイルの動画で制御可能な状態ですが、
YouTube APIを用いて実際のYouTube動画を制御させることが難しく困っています。
YouTube動画はJavaScriptでは制御出来ました
JavaScript
1<div id="player"> 2</div> 3<div id="video_status"> 4</div> 5 6<div id="plya_btn">play</div> 7<div id="pause_btn">stop</div> 8<div id="fw_btn">30m skipping</div> 9<div id="re_btn">30m rewind</div> 10<div id="next_btn">next</div> 11<div id="pre_btn">previous</div> 12 13 14<script> 15 //IFrame Player API用のJavaScriptを呼び込んで、ページの<script>タグとして埋め込みます 16 var tag = document.createElement('script'); 17 tag.src = "https://www.youtube.com/iframe_api"; 18 var firstScriptTag = document.getElementsByTagName('script')[0]; 19 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 20 21 //上記のJavaScriptの読み込みが完了すると実行され、再生用のプレイヤーが準備されます 22 //ここでは、高さ315px、幅560pxでvideoIdがZxnRp4p9SGkの動画をセットするようになっています 23 var player; 24 25 function onYouTubeIframeAPIReady() { 26 player = new YT.Player('player', { 27 height: '315', 28 width: '560', 29 videoId: 'ZxnRp4p9SGk', 30 events: { 31 'onReady': onPlayerReady, 32 'onStateChange': onPlayerStateChange 33 } 34 }); 35 } 36 37 //上記の記述でプレイヤーの準備が整うと実行されます 38 //ここでは、プレイヤーの準備が整えば再生を開始するようになっています 39 function onPlayerReady(event) { 40 // event.target.playVideo(); 41 // event.target.seekTo(60); 42 } 43 44 45 //再生される・されている動画の情報を取得してプレイヤーサイズを調整する 46 function onPlayerStateChange(event) { 47 var status = event.data; 48 49 var names = { 50 '-1': 'mikaishi', 51 '0': 'off', 52 '1': 'play', 53 '2': 'stop', 54 '3': 'buffering', 55 '5': 'cue' 56 }; 57 58 //プレイやの現在の状態を取得 59 var PalyStatus = names[status]; 60 61 var targetId = document.getElementById("video_status"); 62 targetId.innerHTML = PalyStatus; 63 64 65 66 67 //ステータスコードによって処理をかける(文字色を変更する) 68 if (status == 1) { 69 //再生中の処理 70 targetId.style.color = "#FF0000"; 71 } else if (status == 2) { 72 //停止された時の処理 73 targetId.style.color = "#000000"; 74 } else if (status == 3) { 75 //バッファリング中の処理 76 targetId.style.color = "#0000FF"; 77 } else if (status == 0) { 78 //再生が終了した時の処理 79 targetId.style.color = "#FFFF00"; 80 } 81 } 82 83 84 //プレイヤー操作ボタン押下時の動作 85 //再生 86 var clickElement = document.getElementById("plya_btn"); 87 clickElement.addEventListener("click", function(event) { 88 player.playVideo(); 89 }, false); 90 91 //一時停止 92 var clickElement = document.getElementById("pause_btn"); 93 clickElement.addEventListener("click", function(event) { 94 player.pauseVideo(); 95 }, false); 96 97 //30秒先へ 98 var clickElement = document.getElementById("fw_btn"); 99 clickElement.addEventListener("click", function(event) { 100 var getCurrentTime = player.getCurrentTime(); 101 var seekTo_time = getCurrentTime + 30; 102 player.seekTo(seekTo_time); 103 }, false); 104 105 //30秒前へ 106 var clickElement = document.getElementById("re_btn"); 107 clickElement.addEventListener("click", function(event) { 108 var getCurrentTime = player.getCurrentTime(); 109 var seekTo_time = getCurrentTime - 30; 110 player.seekTo(seekTo_time); 111 }, false); 112 113 //次へ 114 var clickElement = document.getElementById("next_btn"); 115 clickElement.addEventListener("click", function(event) { 116 player.nextVideo(); 117 }, false); 118 119 //前へ 120 var clickElement = document.getElementById("pre_btn"); 121 clickElement.addEventListener("click", function(event) { 122 player.previousVideo(); 123 }, false); 124 125</script> 126
ここまでは出来ましたが、この制御をJavaベースのprocessingに書き換える方法が分からずに困っております。
###Javaではマウスが円にふれると動画再生する以下のコードが出来ています
Java
1import processing.video.*;//videoライブラリを使う 2 3Movie movie1, movie2, movie3; // Movieオブジェクトのインスタンス 4boolean movie1_on, movie2_on, movie3_on; // 各movieが再生中かどうかを保存する変数(true:再生中, false:停止中) 5 6void setup() { 7 size(800, 600); 8 imageMode(CENTER); 9 movie1 = new Movie(this, "domo1.mp4");//動画1を読み込み 10 movie2 = new Movie(this, "niku.mp4");//動画2を読み込み 11 movie3 = new Movie(this, "zou.mp4");//動画3を読み込み 12 movie1_on = false; // 初期は停止(初期化) 13 movie2_on = false; // 初期は停止(初期化) 14 movie3_on = false; // 初期は停止(初期化) 15} 16 17void draw() { 18 background(255); 19 20 // 動画をONにするスイッチの丸1(赤) 21 noStroke(); 22 fill(255, 0, 0, 128); 23 ellipse(100, height-30, 30, 30); 24 25 // 動画をONにするスイッチの丸2(緑) 26 noStroke(); 27 fill(0, 255, 0, 128); 28 ellipse(width/2, height-30, 30, 30); 29 30 // 動画をONにするスイッチの丸3(青) 31 noStroke(); 32 fill(0, 0, 255, 128); 33 ellipse(width-100, height-30, 30, 30); 34 35 // マウスポインタを中心に描く丸(黒) 36 fill(0, 128); 37 ellipse(mouseX, mouseY, 30, 30); 38 39 // 丸1とマウスの円が重なっている 40 if (overlapon(100, height-30, 15, mouseX, mouseY, 15)){ 41 println("円1と重なっている"); 42 movie1.play(); // movie1を再生 43 movie1.jump(0); //movie1の先頭へ 44 movie2.stop(); // movie2を停止 45 movie3.stop(); // movie3を停止 46 //movie_onは状態を保存する変数(これがないと重なる時だけ再生) 47 movie1_on = true; // movie1の再生中 48 movie2_on = false; // movie1の停止中 49 movie3_on = false; // movie3の停止中(以下同) 50 } 51 // 丸2とマウスの円が重なっている 52 else if (overlapon(width/2, height-30, 15, mouseX, mouseY, 15)){ 53 println("円2と重なっている"); 54 movie2.play(); 55 movie2.jump(0); 56 movie1.stop(); 57 movie3.stop(); 58 movie1_on = false; 59 movie2_on = true; 60 movie3_on = false; 61 } 62 // 丸3とマウスの円が重なっている 63 else if (overlapon(width-100, height-30, 15, mouseX, mouseY, 15)){ 64 println("円3と重なっている"); 65 movie3.play(); 66 movie3.jump(0); 67 movie1.stop(); 68 movie2.stop(); 69 movie1_on = false; 70 movie2_on = false; 71 movie3_on = true; 72 } 73 74 // どのMovieが再生中かによってどのMovieを再生するかを切り替える 75 //動画を再生し続けるために、draw()関数内で、image関数を呼び出す 76 if (movie1_on) { // movie1を再生中 77 // movie1をimageで表示させる(以下同) 78 image(movie1, width/2, height/2, width*0.6, height*0.6); 79 } else if (movie2_on) { 80 image(movie2, width/2, height/2, width*0.6, height*0.6); 81 } else if (movie3_on) { 82 image(movie3, width/2, height/2, width*0.6, height*0.6); 83 } 84} 85 86 87boolean overlapon(float a1, float b1, float c1, float a2, float b2, float c2) {//重なったかのon変数 88 float distance = dist(a1, b1, a2, b2);// dist関数で、2点間の距離を調べる 89 if (distance<c1+c2) {//半径が重なっていたら 90 return true;//重なる 91 } else { 92 return false;//重ならない 93 } 94} 95 96//映像フレーム毎に自動呼び出しされるイベント 97void movieEvent( Movie m ) {//映像フレームを呼び出す時m引数が呼ばれる 98 m.read();//カレント位置の画像を取得 99 // 実際に動画の画像を表示させるimage関数はdraw()関数内に記述するので以下はコメントアウト 100 //image( movie, width/2, height/2, width/2, height/2);//動画2を表示する 101}
ヒントでも、どんなことでも大丈夫ですのでよろしくお願いいたします。
参考サイト
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
回答1件
あなたの回答
tips
プレビュー