javascript - I need help in creating an HTML5 Video Player with an Playlist that automatically plays all videos in the Playlist -
first of all, i'm not programmer, have basic knowledge in html , css when comes javascript i'm pretty lost. found jsfiddle: http://jsfiddle.net/jzs6b/655/ html5 player playlist, there possibility upgrade player, begins automatically play first video in playlist once player loaded, second when first 1 ended , on until videos in playlist have been played top bottom?
here relevant javascript code:
$(function() { $("#playlist li").on("click", function() { $("#videoarea").attr({ "src": $(this).attr("movieurl"), "poster": "", "autoplay": "autoplay" }) }) $("#videoarea").attr({ "src": $("#playlist li").eq(0).attr("movieurl"), "poster": $("#playlist li").eq(0).attr("moviesposter") }) })
try this
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>mouseover demo</title> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <style> #videoarea { float:left; width:640px; height:480px; margin:10px; border:1px solid silver; } </style> <script type="text/javascript"> var = 0; var totalvideos = 2; //have added 3 videos source 0 - 2 var myarray1 = new array( "http://html5videoformatconverter.com/data/images/happyfit2.mp4", "http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4", "http://html5example.net/static/video/html5_video_vp8.webm"); var = 0; $(function () { $("#videoarea").attr({ "src": myarray1[0] }) }); function next(e) { += 1; $("#videoarea").attr({ "src": myarray1[i] }); if (i == totalvideos ) { = 0; } } </script> </head> <body> <div id="anchorholder" style="width:50%; height:50%;"> <video id="videoarea" onended="next(this)" controls="controls" poster="" src="" autoplay></video> </div> <button onclick='submitform()'> save</button> </body> </html>
explanation: 1)store videos source array. 2)set counter = 0 , number of files 3)on onend of video change src next object in array , , set counter gives 0 after last video played.
hope helps. let me know if need more help. , accept if answer solves issue.
Comments
Post a Comment