Play Video Automatically
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 experience starts using custom code in the PRO Editor.
To add a video to the scene of your experience, you'll need to add a basic plane and attach the video playback script to it.
First of all, click on the Add button in the top bar of the PRO Editor and select Plane in the dropdown menu.
To add a video to the scene of your experience, you'll need to add a basic plane and attach the video playback script to it.
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;
/* END OF USER DATA */
/* Scene Logic */
let video, videoPromise, videoTexture, videoMaterial;
function init(
json,
init_callbacks
) {
videoPromise = init_callbacks
.loadVideo(videoLink,{
autoplay: true,
loop: true,
})
.then((v) => {
video = v;
video.volume = videoVolume;
videoTexture = new THREE.VideoTexture(video.target);
videoMaterial = new THREE.MeshBasicMaterial({map: videoTexture});
this.material = videoMaterial;
})
;
}
function mywebar_fill_init_promises(init_promises) {
init_promises.push(videoPromise);
}
function mywebar_fill_medias(medias) {
medias.push(video);
}
/**
* Start/resume playing scene
*/
function start() {
video.play();
}
/**
* End/pause playing scene
*/
function stop() {
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';
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.