HTML5 video loop src change on end play function

1. HTML


<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<ul>
    <li>http://www.w3schools.com/html/mov_bbb.mp4</li>
    <li>http://www.w3schools.com/html/movie.mp4</li>
</ul>


2. CSS

<style type='text/css'>

    ul {

        display:none;

    }

  </style>


3. jQuery

<script type="text/javascript">

video_count = 0;

videoPlayer = document.getElementById("homevideo");



function run(){

   video_count++;

    var countVideo = $('li').length;

    

    if (video_count == countVideo) video_count = 0;    

    var nextVideo = $('li').eq(video_count).text();

    

    videoPlayer.src = nextVideo;

    videoPlayer.play();

        

};

</script>


Working Demo

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi, Vuthy, thanks for this. Is there any way to make this loop function work with your previous script for the visible playlist?

    ReplyDelete

Post a Comment

Popular posts from this blog

PHP: Date Difference for PHP 5.2

Custom OpenCart 2.3.0.2 theme