BabylonJS - Video Texture

To display video in the scene, babylonjs has the video texture feature. videotexture takes an array of videos as input.

For video texture, we are going to use mp4 file. Please download an mp4 of your choice and use it in the demo below.

Syntax

video.material.diffuseTexture = new BABYLON.VideoTexture("video",
["mp4 file", "webm file"], scene, true);

Demo

<!doctype html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>BabylonJs - Basic Element-Creating Scene</title>
      <script src = "babylon.js"></script>
      <style>
         canvas {width: 100%; height: 100%;}
      </style>
   </head>
   
   <body>
      <canvas id = "renderCanvas"></canvas>
      <script type = "text/javascript">
         var canvas = document.getElementById("renderCanvas");
         var engine = new BABYLON.Engine(canvas, true);
         
         var createScene  = function() {
            var scene = new BABYLON.Scene(engine);

            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);

            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);

            // Default intensity is 1. Let's dim the light a small amount
            light.intensity = 0.7;

            // Our built-in 'sphere' shape. Params: name, subdivs, size, scene
            var ground = BABYLON.Mesh.CreateGround("ground1", 100, 50, 2, scene);

            // Move the sphere upward 1/2 its height
            ground.position.y = 1;

            var mat = new BABYLON.StandardMaterial("mat", scene);

            var videoTexture = new BABYLON.VideoTexture("video", ["sounds/video.mp4"], scene, true, true);

            mat.diffuseTexture = videoTexture;
            ground.material = mat;

            scene.onPointerUp = function () {
               videoTexture.video.play();
            }
            return scene;
         };
         var scene = createScene();
         engine.runRenderLoop(function() {
            scene.render();
         });
      </script>
   </body>
</html>

Output

The above line of code will generate the following output −

babylonjs_mesh.htm