HTML5 video loop src change on end play function
1. HTML
2. CSS
3. jQuery
Working Demo
<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
This comment has been removed by the author.
ReplyDeleteHi, Vuthy, thanks for this. Is there any way to make this loop function work with your previous script for the visible playlist?
ReplyDelete