Thursday, March 1, 2018

Detect when an HTML5 video finishes

<video id="myVideo" width="1349" height="758" preload="metadata" autoplay="1" controls>
<source src="http://id-cardz.com/wp-content/uploads/2016/05/upwork-damjikamran.mp4?_=1" type="video/mp4"></source>
</video>
<img id="myimg" onClick="playvid();" style="display:none;" src="image/path.jpg">
<a href="#" onClick="document.getElementById('myVideo').play();">Play video</a>
<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) { //on video stop ------------
        document.getElementById('myVideo').style.display = 'none';
        document.getElementById('myimg').style.display = 'block';
    }
    function playvid() { //on click video play ------------
    document.getElementById('myimg').style.display = 'none';
    document.getElementById('myVideo').style.display = 'block';
    document.getElementById('myVideo').play();
    }
</script>

No comments:

Post a Comment