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

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -