JSFiddle - React, Tailwind, and code Playground

by TastyBytes

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.4/video-js.css">
<script src="http://vjs.zencdn.net/4.4/video.js"></script>
<video id="my_video_1" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg"
 data-setup="{}">
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'>
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
</video>
     
     <div class="test" id="test" data-instep="hello"></div>     

     
     <div id="output"></div>

CSS

#test {
    background: #f00;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
}

JavaScript

videojs('my_video_1').on('timeupdate', function( e ) { 
    //console.log( e );
    document.getElementById('output').innerHTML += "<br /> Time: " + this.currentTime(); 
});

var el = document.getElementById('test');
function test() {
    
    console.log( el.style.top ) //, ( el.style.top ) + "px" );
    el.style.top = ( (parseInt( el.style.top ) + 1) || 0 ) + "px";
   // console.log ( el.style.top );
    var foo = requestAnimationFrame( test );
}

//requestAnimationFrame( test );