Weird behaviour b/w static and dynamic HTML element

Ask us anything
1

I have an HTML element to render a Mux video and use JS to track when the video is paused.

The JS works fine when the HTML is hardcoded/static but not when the HTML is bound to a variable. The pause is correctly logged in the console for static HTML, but the same doesn’t happen when the video is paused for dynamic one. What could be the issue?

JS to track pause time (on mounted)

const muxPlayer = document.querySelector("mux-player");

// Function to handle the pause event

function handlePause() {

const currentTime = muxPlayer.currentTime; // Get the current time

return currentTime; // Return the pause time

}

// Event listener for pause event

muxPlayer.addEventListener("pause", function() {

const pausedTime = handlePause(); // Call the function to get the paused time

console.log('Video paused at:', pausedTime);

wwLib.wwVariable.updateValue("1b758d39-9c2e-4d50-bf30-1e2d79679068",pausedTime);

// You can also use pausedTime for other purposes here

});

The Mux script


<script src="https://cdn.jsdelivr.net/npm/@mux/mux-player"></script>
<mux-player playback-id="HdRjNaSRjdjIDW8O02ot7tTOuCxrfbIo73DmnydvvSU8" metadata-video-title="Viewline"
  metadata-viewer-user-id="user-id-007">
</mux-player>
2

Update:

I felt there was a delay between the video pause code and the player getting ready.

So, I changed the trigger of the video pause code from ‘on mounted’ to ‘on click’, and it worked.