Buggy videoDome.videoTexture.video.currentTime assignment operation

UPDATE: 10/22/19 - It works in Microsoft Edge, but not Chrome. So, it’s an issue with chrome (Version 77.0.3865.120 (Official Build) (64-bit)).
Bonus Info: It doesn’t work in Chrome Canary or the new Chromium-based Microsoft Edge (beta).

Buggy Expression: videoDome.videoTexture.video.currentTime = 5;

I am attempting to manipulate the underlying HTMLVideoElement (video) which belongs to videoDome.
However, when I attempt to adjust the video’s currentTime by assigning an integer to video.currentTime the result is always a currentTime of zero.

Note, the logic works in a playground, but not in my code.

Here are the relevant code snippets:

VideoDome Scene:

var createScene1 = function () {
var scene1 = new BABYLON.Scene(engine1);

var camera1 = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2,  Math.PI / 2, 5, 
BABYLON.Vector3.Zero(), scene1);

camera1.attachControl(canvas1, true);

 videoDome1 = new BABYLON.VideoDome(
            poster: "images/XRiLoadScreen.jpg",
            resolution: 32,
            clickToPlay: false

    return scene1;


engine1.runRenderLoop(function() {

CurrentTime Assignment:

scene1.onPointerUp = function (){
    videoDome1.videoTexture.video.currentTime = 2;
    //videoDome2.videoTexture.video.currentTime = 3;

Console Output:

Notice, the currentTime is being reset to zero and then being printed to the console whenever the onPointerUp() action is taken.

It seems that any attempt to adjust the video’s currentTime results in currentTime resetting to 0.

Working Playground Example:


As this is working in the PG, I assume you may not be on the same version of babylon.js on your code?

UPDATE: 10/22/19 - It works in Microsoft Edge, but not Chrome. So, it’s an issue with chrome.

@Deltakosh Yeah, I was thinking the same thing. But, I am bringing babylon.js into scope with the CDN and thought this was current.


So, is this working in the playground a clear indicator that the problem is elsewhere?

You should get it from playground.babylonjs.com which is the latest

UPDATE: 10/22/19 - It works in Microsoft Edge, but not Chrome. So, it’s an issue with chrome (Version 77.0.3865.120 (Official Build) (64-bit)).
Bonus Info: It doesn’t work in Chrome Canary or the new Chromium-based Microsoft Edge (beta).

@Deltakosh So, I am not sure how to source playground.babylon.js… But I’ve tried it with a few different versions (4.1.x) and the preview distribution, but nothing has worked.

I created a simple test example which mirrors the working playground-example.

Could you kindly see if it’ll work for you?


window.addEventListener('DOMContentLoaded', function() {
var canvas = document.getElementById('renderCam1');

var engine = new BABYLON.Engine(canvas, true);

var createScene = function () {

    var scene = new BABYLON.Scene(engine);
    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2,  Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    var videoDome = new BABYLON.VideoDome(
        // You'll need to put a video here.
            resolution: 32,
            clickToPlay: true
    scene.onPointerUp = function (){
        videoDome.videoTexture.video.currentTime = 2.05;
    return scene;

var scene = createScene();

engine.runRenderLoop(function() {

window.addEventListener('resize', function() {


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Babylon.js -->
    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>
    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>
    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
    <script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
    <script src="js/vidElemCntr.js"></script>
    canvas {
        background-color: blue; 
        width: 100%;
        height: auto;

    <div class="container-fluid">
            <h1>Video Editor</h1>
        <div class="row">
            <div class="col-sm">
                <p>Camera 1 (FL)</p>
                <canvas id="renderCam1"></canvas>

Your code definitely looks correct to me
Can you repro the problem on codepen?

@Deltakosh So, this is very weird… I was not, initially, able to reproduce the issue on codepen during an unsaved, live session.

However, after saving the sketch, so that I might share it with you, it no longer works as expect (currentTime defaults to 0).

Also, note, I’ve had this issue with chrome-based browsers on two different machines (linux/windows).


Hum I see 403 errors in the console. Is it expected?

@Deltakosh I haven’t seen any 403 errors, so not expected.

Here is what I am seeing in an incognito window:


this is what I get:

@Deltakosh okay, I removed the extraneous call to vidElemCntr.js (local to my machine). Code pen results are spotty, sometimes it works, sometimes not. However, it was working for a moment, so I copied the HTML and JS (verbatim) and served them on localhost… Same results though, Chrome resets currentTime to zero, Edge works fine.

Here is newly saved codepen.

Here are my consoles and codepen sketch id:

I am heading home for the day.

If you’re interested, I can make a screen recording tomorrow. I’d like to fix this issue because so many of my video controls rely on manipulating the currentTime attribute.

I’m oof for the week (I’m presenting a session about babylon.js at Code.Talks 2019 :))

But can you make sure the problem is related to bjs? What if you try to do the same manipulation over a simple video element?

@Deltakosh the problem is in-fact not an issue with bjs. The unexpected behavior occurs with a simple HTMLVideoElement (absent bjs). Still, the issue occurs in Chrome, but not Edge.

I wrote a simple test function which checks if the video.currentTime > 5 and, if so, reassigns video.currentTime to 2 (jump back). Else, if less than 5, jump forward to currentTime equals 6.

Here is a codepen with the code I used to test:

It appears to be working in the codepen, but still doesn’t work in Chrome:

Here it is working in Edge:

So, should I open a ticket with Google’s Chrome team?

PS. I looked up the code.talks 2019. Very cool.

Ha thanks! Were you there?

Yes this is definitely a bug you need to file on Chromium database

Please keep us posted as this will evolve

No, unfortunately, I couldn’t make it. However, I believe my team’s project has a conference budget, so I am definitely going to try for future events.

Note, I filed this bug on the chromium database. It seems other people are having some issues with the HTMLVideoElement.

Here is a link to the bug report I filed:

Thank you for being engaged!

1 Like