javascript - Starting next video in an array after 10 seconds of ended current video in JS and HTML -
i'm building html 5 video player , got bit stuck. looking after video done playing prompt fades in right after video on displaying title of next video user click go right next video.
if user doesn't interact after 10 seconds video player automatically play next video. have js calls end of video start timer, thing cant seem wrap head around grabbing next video in list.
you can see have going on here far: http://xeroproject.com/hopkins/
any great. thanks
the code.
$(window).on('load', function() { $(function() { $("#videoarea").bind("ended", function() { /*alert('video ended!');*/ thetimer(); }); $("#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") }) }) }); function thetimer() { var timeleft = 10; var downloadtimer = setinterval(function() { timeleft--; document.getelementbyid("countdowntimer").textcontent = timeleft; if (timeleft <= 0) clearinterval(downloadtimer); nextvideo(); }, 1000); } function nextvideo() { $("#videoarea").attr({ "src": $("#playlist li").eq(+1).attr("movieurl"), }); }
#playlist { display: table; } #playlist li { cursor: pointer; padding: 8px; } #playlist li:hover { color: blue; } #videoarea { float: left; width: 100%; max-width: 1080px; height: 100%; max-height: 1920px; margin: 10px; border: 1px solid silver; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <video id="videoarea" controls poster="" src=""></video> <div class="c12"> <p> next video begin in <span id="countdowntimer">10 </span> seconds</p> </div> <ul id="playlist"> <li movieurl="https://player.vimeo.com/external/134503961.hd.mp4?s=cb119bb3aba91ce422389eaa8deb56474b2a33ae&profile_id=113">reel</li> <li movieurl="https://player.vimeo.com/external/152628566.hd.mp4?s=91d67ce6b5c2a0ba58f2b4e383d9f5111d62012d&profile_id=119">combat photogs</li> <li movieurl="https://player.vimeo.com/external/174551908.hd.mp4?s=09b9278046d28659c205f4a201eef33ba491d570&profile_id=119">runa</li> </ul>
:
Comments
Post a Comment