JSFiddle - React, Tailwind, and code Playground

by anil001ry

HTML

<!doctype html>

<html>

<head>

    <title>JavaScript Progress Monitor</title>

    <script type="text/javascript">

        function getPercentProg() {

            var myVideo = document.getElementsByTagName('video')[0];

            var endBuf = myVideo.buffered.end(0);

            var soFar = parseInt(((endBuf / myVideo.duration) * 100));

            document.getElementById("loadStatus").innerHTML =  soFar + '%';

        }

       function myAutoPlay() {

           var myVideo = document.getElementsByTagName('video')[0];

           myVideo.play();

       }

       function addMyListeners(){

           var myVideo = document.getElementsByTagName('video')[0];

           myVideo.addEventListener('progress', getPercentProg, false);

           myVideo.addEventListener('canplaythrough', myAutoPlay, false);

       }

    </script>

</head>

<body onload="addMyListeners()">

    <div>

        <video controls

               src="http://dc7bzpb23g5rx.cloudfront.net/web_assets/ar_assets/videos/bg_video/ar_video.mp4">

        </video>

        <p id="loadStatus">MOVIE LOADING...</p>

    </div>

</body>

</html>