Play a Video on Button Click
You can download the sample scene and import it into the PRO Editor to use it as a template
Download JSON↓
Download JSON↓
In this guide you'll learn how to make a video play once the user taps on an on-screen button using custom code in the PRO Editor.
First of all, click on the Add button in the top bar of the PRO Editor and select Plane in the dropdown menu.
First of all, click on the Add button in the top bar of the PRO Editor and select Plane in the dropdown menu.
Once the plane appears on the scene, you'll need to adjust its size to match the aspect ratio of the video you're going to play.
You can use the following values for the most common aspect ratios:
16:9 - 1.770 x 1.000 x 1.000
9:16 - 1.000 x 1.770 x 1.000
4:3 - 1.300 x 1.000 x 1.000
3:4 - 1.000 x 1.300 x 1.000
16:9 - 1.770 x 1.000 x 1.000
9:16 - 1.000 x 1.770 x 1.000
4:3 - 1.300 x 1.000 x 1.000
3:4 - 1.000 x 1.300 x 1.000
Select the plane on the layers panel on the right, then go to the Object tab on the left panel and adjust the values next to the Scale attribute.
Once the aspect ration is set, you'll need to add the script that will play your video.
Click on the NEW button under the SCRIPT section to assign a new script to the plane.
Set the name of your script and click EDIT to open the code editor.
Click on the NEW button under the SCRIPT section to assign a new script to the plane.
Set the name of your script and click EDIT to open the code editor.
Paste the following code into the code editor window:
/* USER DATA */
const videoLink = "https://threejs.org/examples/textures/sintel.mp4";
const videoVolume = 1 ;
const buttonLink = "https://mywebar-a.akamaihd.net/examples2022/Images/*Stickers/WOW_blue_red_yellow.png";
/* END OF USER DATA */
let video, videoPromise, videoTexture, videoMaterial;
let buttonContainer, buttonBlock, buttonFlag;
function init(
json,
init_callbacks
) {
videoPromise = init_callbacks
.loadVideo(videoLink,{
autoplay: false,
loop: false,
})
.then((v) => {
video = v;
video.volume = videoVolume;
videoTexture = new THREE.VideoTexture(video.target);
videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
this.material = videoMaterial;
})
;
}
/**
* Push promises created in init() into 'init_promises'
* to wait before call start()
* @param {array} init_promises
*/
function mywebar_fill_init_promises(init_promises) {
init_promises.push(videoPromise);
}
/**
* Push HTMLMediaElements loaded in init() into 'medias'
* to properly handle pause/resume events of AR Viewer
* @param {array} medias
*/
function mywebar_fill_medias(medias) {
medias.push(video);
}
/**
* Animate a frame
*/
function update( event ) {
let {
time, // elapsed time from start
delta, // delta time from last frame
time_multiplier, // 'time' and 'delta' multiplier (1000 for milliseconds)
} = event;
time /= time_multiplier; // in seconds
delta /= time_multiplier; // in seconds
this.rotation.y = Math.cos(time) * Math.PI/16;
}
/**
* Start/resume playing scene
*/
function start() {
buttonContainer = document.createElement("div");
buttonContainer.style.cssText = `
height: 150px;
position: absolute;
bottom: 10%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
`;
buttonBlock = document.createElement("div");
buttonBlock.style.cssText = `
background-image: url(${buttonLink});
background-size: contain;
background-repeat: no-repeat;
width: 150px;
height: 150px;
`;
buttonContainer.appendChild(buttonBlock);
buttonBlock.addEventListener('click', btnClick);
document.body.appendChild(buttonContainer);
}
/**
* End/pause playing scene
*/
function stop() {
video.pause();
buttonContainer.remove();
buttonBlock.removeEventListener('click', btnClick);
}
/**
* Mouse/single touch start event
*/
function btnClick( event ) {
console.log("C");
buttonFlag = !buttonFlag;
if (buttonFlag) video.play();
else video.pause();
}
/**
* Unload event, free up memory
*/
function mywebar_destroy() {
video.destroy();
videoTexture.dispose();
}
You can use your own video by replacing the sample video link with a link to your video file:
const videoLink = 'https://threejs.org/examples/textures/sintel.mp4';
You can set your own image as a button by changing the link in the following line:
const buttonLink = "https://mywebar-a.akamaihd.net/examples2022/Images/*Stickers/WOW_blue_red_yellow.png";
The size and layout of the on-screen button can be customized using the following attributes:
buttonBlock.style.cssText = `
background-image: url(${buttonLink});
background-size: contain;
background-repeat: no-repeat;
width: 150px;
height: 150px;
Once your scene is complete, you need to export your scene from the PRO Editor. You can do it by clicking on the File option on the top bar, then selecting Export.
A .zip archive will be downloaded on your computer. Extract it into any folder and find the app.json file inside.
Go back to your MyWebAR dashboard, create a new project or open an existing one and find the JSON MAE object type on the left panel.
Click on the + icon next to it and select the app.json file you've extracted from the archive to import it into your project.