html5 video - Loop trough playlist - jquery - videojs -
i'm trying build simple playlist (using videojs , it's dailymotion plugin) combining code snippets. i've managed basic functionality , i'm getting close want. update auto move next item in playlist , move first item again if there's no next item in list. thought use callback when vid ended, doesn't seem work. next item seems random.
// video ended find next $("#myplayer").on("ended", function(){ if ($("#list li.selected").next("li").length > 0) { // there items left play, find next li $("#list").find("li.selected").next('li').addclass('selected').siblings().removeclass('selected'); } else { // no more items left play, start again first li $("#list").find("li:first").addclass('selected').siblings().removeclass('selected'); } playerload(); }); sample html
<div>playlist - coming up: <span id="current-tag"></span> </div> <ul id="list" class="list"> <li class="playlist-item selected first" data-id="x15xo13" class="selected"><a href="#" >item 1</a></li> <li class="playlist-item" data-id="x1b6fu"><a href="#">item 2</a></li> <li class="playlist-item" data-id="x21uwpw"><a href="#">item 3</a></li> <li class="playlist-item" data-id="x1ux5t"><a href="#">item 4</a></li> </ul> whole code far
<script> (function( $ ){ var player = videojs("myplayer"); $( "#prev, #next" ).on('click', function(e) { e.preventdefault() // find right item load prevnext(); // load player playerload(); }); $( "#list" ).on('click', 'li', function(e) { e.preventdefault() // find right item load $(this).addclass('selected').siblings().removeclass('selected'); // load player playerload(); }); function initplayer() { ("myplayer", {"techorder": ["dailymotion"]}, function(){ // player (this) initialized , ready. }); } function prevnext() { // browse through itemlist , highligh selected item var list = $('#list').find('>li'); var $new, $selected = $(".selected"); $new = (event.target.id == "prev") ? ($selected.index() == 0 ? list.last() : $selected.prev()) : ($selected.index() == list.last().index() ? list.first() : $selected.next()); $selected.removeclass("selected"); $new.addclass("selected"); $("#current-tag").text($new.attr('class') + $new.index()); } function playerload() { // load player initplayer(); // list should updated , ready either click or previous/next selected value or after ended callback var itemurl = $("#list").find("li.selected").data('id'); var baselink = "http://www.dailymotion.com/embed/video/" + itemurl + "?api=postmessage&autoplay=1&related=0&chromeless=1&controls=html&format=json&html=1&id=myplayer_dailymotion_api&info=1&logo=1&origin=http%3a%2f%2flocalhost&url=http%3a%2f%2fwww.dailymotion.com%2fvideo%2f" + itemurl + "&wmode=opaque"; player.ready(function() { $("#myplayer").removeclass("vjs-playing").addclass("vjs-paused"); $("#myplayer_dailymotion_api").hide(); $("#myplayer iframe").removeattr("src"); $("#myplayer iframe").attr("src", baselink); $(".vjs-big-play-button").css("display","none!important"); player.play(); $("#myplayer_dailymotion_api").show(); // video ended find next $("#myplayer").on("ended", function(){ if ($("#list li.selected").next("li").length > 0) { // there items left play, find next li $("#list").find("li.selected").next('li').addclass('selected').siblings().removeclass('selected'); } else { // no more items left play, start again first li $("#list").find("li:first").addclass('selected').siblings().removeclass('selected'); } playerload(); }); }); } })( jquery ); </script>
not precise answer (would have left comment don't have enough rep so) — when video end event occurs how trying locate selected item, traversing next sibling , triggering click event? this:
player.on( 'ended', function() { $('.selected').next('li').trigger('click'); }); as far looping when reach last list-item in $#list element why not use jquery's :last selector (http://api.jquery.com/last-selector/) , .trigger click event on first item using :first selector (http://api.jquery.com/first-selector/)?
pretty sure these job done you.
Comments
Post a Comment