プログラムとタグを連携させる
前回は、"a-xxx"タグを使って様々なオブジェクトをVR空間に配置してみました。
今回は、これらのオブジェクトとボタンとの連携についてのお話です。
idを使ってオブジェクトにアクセスする
"a-xxx"タグのアトリビュートとして、"id"をつけていたタグが複数ありました。
この"id"を使う事で、プログラム側からアクセスする事ができます。
具体的には、"getElementById関数"を使います。(簡単ですね!!)
main.js
const オブジェクト = document.getElementById("タグに付けたID");
動画とボタンを連携させる
ではさっそく、動画とボタンにアクセスしてみます。
"a-video"に付けた"id"は"my_video01"、
"a-image"に付けた"id"は"my_btn01"でしたね。
具体的な記述は次の様になります。
main.js
const video01 = document.getElementById("my_video01");
const btn01 = document.getElementById("my_btn01");
ボタンをクリックする
ここまで来ると後は簡単です。
"btn01"オブジェクトに対して"addEventListener関数"を使い、クリックイベントを設定します。
main.js
btn01.addEventListener("click", (e)=>{
// ボタンをクリックするとこの部分が実行されます
});
動画の再生と停止
動画オブジェクト"video01"に対して再生/停止の命令を記述します。
ボタンをクリックするその都度、再生中か停止中かを判定して動画を制御します。
具体的な処理は次の様になります。
main.js
btn01.addEventListener("click", (e)=>{
if(video01.paused){// 動画が停止しているかどうかを判定
video01.play();// 動画を再生
e.target.setAttribute("src", "#img_play");// ボタンの画像を変更
}else{
video01.pause();// 動画を停止
e.target.setAttribute("src", "#img_pause");// ボタンの画像を変更
}
});
動作確認をする
最後に全体のコードを載せておきますね。(コピペでもいけますよ!!)
main.js
"use strict";
// Window
window.onload = (e)=>{
const video01 = document.getElementById("my_video01");
const btn01 = document.getElementById("my_btn01");
btn01.addEventListener("click", (e)=>{
if(video01.paused){
video01.play();
e.target.setAttribute("src", "#img_play");
}else{
video01.pause();
e.target.setAttribute("src", "#img_pause");
}
});
}
画面中央にあるカーソル(小さい黒い円です)をボタンに合わせてクリックすると、
動画が再生/停止される様になりました。(やりました!!)
次回は、音源の制御についてのお話です。