Friday, February 21, 2014

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

2 comments:

Clubhouse Tours said...
This comment has been removed by the author.
Marc S. Lamb said...

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

Post a Comment