Detect when a video has started playing

Questions
1

Hi,

I am looking for a way to detect if a video has started playing. Most of the videos load up faster in localhost but not in a different server. Also the size of the video matters alot. So in Babylon is there a way to detect when a video has been finally loaded and has started playing? onPointerUp function works only on localhost, the video automatically starts playing on a different server. So I am not sure where the play function gets called.

var myPlane_1 = BABYLON.MeshBuilder.CreatePlane("myPlane_1", {
            width: 520,
            height: 350
        }, scene);
        myPlane_1.position.x = 770;
        myPlane_1.position.y = 150;
        myPlane_1.position.z = -1258;

        myPlane_1.rotation.x = -0.02;
        myPlane_1.rotation.y = 91.1;

        var mat_1 = new BABYLON.StandardMaterial("mat_1", scene);
        myPlane_1.material = mat_1;
        var videoTexture_1 = new BABYLON.VideoTexture("video_1", "videos/One.mp4", scene, false, false); //Loading Video Here
        videoTexture_1.level = 1;
        mat_1.diffuseTexture = videoTexture_1;
        myPlane_1.material = mat_1;

        scene.onPointerUp = function() {
        videoTexture_1.video.play(); //Playing video here
        console.log("Video is playing");}
2

As we are using HTML5 video in the video texture, you can use any of the HTML5 Media Events directly on the video element. The events can be found here:

3

No I am using the example from Babylonjs of how to add video texture to a plane and play the video.
https://www.babylonjs-playground.com/#CHQ4T#1

4

videoTexture.video is a video html element. You can add event listeners (just don’t forgot to remove them before disposing the scene).

Something like this:

https://www.babylonjs-playground.com/#CHQ4T#240

2 Likes
5

Thanks alot. Never knew these functions can be linked to HTML5. Works like charm.