Buggy videoDome.videoTexture.video.currentTime assignment operation

MatthewMill · October 21, 2019, 11:22pm

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(
       "videoDome",
        ["videos/sessionTest/output-BACK.mp4"],
        {
            poster: "images/XRiLoadScreen.jpg",
            resolution: 32,
            clickToPlay: false
        },
        scene1
    );

    return scene1;
};

RenderLoop:

engine1.runRenderLoop(function() {
    scene1.render();
});

CurrentTime Assignment:

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

Console Output:
currentTimeAssignmentBug

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:

https://www.babylonjs-playground.com/#SQ5UC1#65

Deltakosh · October 21, 2019, 11:36pm

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

MatthewMill · October 21, 2019, 11:43pm

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.

src=“https://cdn.babylonjs.com/babylon.js”

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

Deltakosh · October 21, 2019, 11:53pm

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

MatthewMill · October 22, 2019, 4:28am

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?

Javascript:

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(
        "videoDome",
        // You'll need to put a video here.
        ["videos/eagle_360.mp4"],
        {
            resolution: 32,
            clickToPlay: true
        },
        scene
    );
    scene.onPointerUp = function (){
        videoDome.videoTexture.video.currentTime = 2.05;
        console.log(videoDome.videoTexture.video.currentTime);
    };
    return scene;
};

var scene = createScene();

engine.runRenderLoop(function() {
    scene.render();
});

window.addEventListener('resize', function() {
    engine.resize();
});
});

HTML:

<head>
    <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">
    <title>Editor</title>

    <!-- 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>
    <style>
    canvas {
        background-color: blue; 
        width: 100%;
        height: auto;
    }
    </style>
</head>

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

Deltakosh · October 22, 2019, 8:53pm

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

MatthewMill · October 22, 2019, 9:26pm

@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).

https://codepen.io/MatthewMill/pen/vYYxLaV?editors=1111

Deltakosh · October 22, 2019, 10:31pm

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

MatthewMill · October 22, 2019, 10:38pm

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

Here is what I am seeing in an incognito window:

https://codepen.io/MatthewMill/pen/vYYxLaV?editors=1111

Deltakosh · October 22, 2019, 11:00pm

this is what I get:

MatthewMill · October 23, 2019, 1:05am

@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.
https://codepen.io/MatthewMill/pen/vYYxLaV?editors=1011

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.

Deltakosh · October 23, 2019, 11:35am

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?

MatthewMill · October 24, 2019, 6:58pm

@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:
https://codepen.io/MatthewMill/pen/yLLbPQQ?editors=1111

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.

Deltakosh · October 25, 2019, 9:24am

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

MatthewMill · October 26, 2019, 9:22pm

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:
https://bugs.chromium.org/p/chromium/issues/detail?id=1018533&can=2&q=video.currentTime

Thank you for being engaged!

Topic		Replies	Views
Mismatch between video and video current time Questions	5	402	September 28, 2023
videoTexture - duration Attribute? Questions	2	601	August 9, 2020
Video texture go to timeframe Questions	2	481	May 11, 2021
videoDome How to determine the time spent on each step of creating a videoDome Questions	4	30	January 23, 2025
How to release video texture memory? Questions material	5	284	December 6, 2021

Buggy videoDome.videoTexture.video.currentTime assignment operation

Related topics