Sync motion of graphics with video in Javascript

Question

I would like to build a small application running on browser ( using Chrome ) that synchronizes an embedded video with some graphics. I took inspiration from here https://www.youtube.com/watch?v=_AD2ciZ-0UI for a small test.

Here I am trying to play the video and "move" the position of a rectangle accordingly, in a synced way:

<!DOCTYPE html> 
<html> 
<body> 
<video id="myvideo" width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
</video>
<svg id="myrect" viewBox="0 0 200 200" > <rect  x=10 y=8 width=5 height=20 
        fill-opacity=0.0 
        style="stroke-width:0.5;stroke:rgb(0,0,0)"/> </svg>
<script>
  var m = 10 ;
  var myvideo = document.getElementById('myvideo')
  var rect = document.getElementById('myrect');
  myvideo.addEventListener('play', function() {
    timerID=window.setInterval(function (){
         m=parseInt(myvideo.currentTime);
         console.log(m);
         rect.setAttribute('x',m);
    },100)
  })
  </script>
</body> 
</html>

Unluckily, when running this I see that the variable "m" gets incremented correctly (looking at the values in the Console), but the rectangle is not moving. What am I doing wrong ?

VC.One VC.One · Accepted Answer · 2022-04-09T00:55:49

Consider giving the <rect> element its own unique ID to directly access it.
Use the Video API's timeupdate event to move the shape against video time.

Try something like this (ps: notice the rect id="myrect" vs svg id="mysvgrect") :

<!DOCTYPE html> 
<html> 
<body> 
<video id="myvideo" width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
</video>
<svg id="mysvgrect" viewBox="0 0 200 200" > <rect id="myrect" x=10 y=8 width=5 height=20 
        fill-opacity=0.0 
        style="stroke-width:0.5;stroke:rgb(0,0,0)"/> </svg>
<script>

var timerID;
var m = 10;
var speed = 0;
const rect = document.getElementById('myrect');

const myvideo = document.getElementById('myvideo');
myvideo.addEventListener('timeupdate', function() { moveShape() } );
myvideo.addEventListener('play', function() { handle_Play() } );


function moveShape()
{
   speed = 9.8;
    m = 10 + ( speed * (myvideo.currentTime) );
    rect.style.x = m; //# direct access to "x" Style
    //rect.setAttribute('x', m); //# alt way to access same "x" Style
}

function handle_Play()
{
    //# if needed (may clog the console with constant messages every 100 ms)
    //timerID = window.setInterval( doTimer(), 100);
}

function doTimer()
{
    m = parseInt( myvideo.currentTime );
    console.log("video secs : " + m);
}
  
</script>

</body> 
</html>

Sync motion of graphics with video in Javascript

1 Answers