Jquery管状加载多个实例

我想在第一个弹出的秒钟后启动第二个管状实例。Jquery管状加载多个实例

我使用2个格对玩家重视

<div id="player1"></div> 
<div id="player2"></div>

我有2个脚本，启动管。

var options = { 
      videoId: ytid, 
      start: diffInSeconds, 
      mute: false, 
      width: $(window).width(), 
      height:$(window).height(), 
      playercount: 1 
      }; 

$('#player' + options.playercount).tubular(options);

它成功地启动了第一个管状实例。当第二个实例playercount: 2应该启动时，它只能附加管状容器和护罩，而不是iframe。

我已经添加控制台日志来监视是否实例越来越加载。

这里的jquery.rhtv.init.js（此调用肾小管功能）的链接。

http://nopaste.linux-dev.org/?833094

下面是修改后的管状JS链接：

http://nopaste.linux-dev.org/?833101

这是所有活运行：

http://www.realhardstyle.tv

我怎么能设法得到在第二个实例中加载的youtube iframe（以及继续），最终结果sh应该是一个不间断的YouTube视频播放流。在哪里为每个视频已经开始一个'正在播放'的div应该出现（就像在jquery.rhtv.init.js中一样）

谢谢你提前！

来源

2015-11-13 Sjef92

管库默认不支持不同的视频重新加载。我做了一些调整，以便它可以完成。

以下是工作的jsfiddle链接：

*编辑

继库现在支持videoFinshed回调，并多次调用管状

http://jsfiddle.net/j1t9zwx6/3/

有电影预告片打背靠背。

而且，这里安装的代码进行备份

修改管库：

/* jQuery tubular plugin 
|* by Sean McCambridge 
|* http://www.seanmccambridge.com/tubular 
|* version: 1.0 
|* updated: October 1, 2012 
|* since 2010 
|* licensed under the MIT License 
|* Enjoy. 
|* 
|* Thanks, 
|* Sean */ 

//modified tubular library, to support multiple calls to tubular and videoFinished callback // 
(function ($, window) { 

    // test for feature support and return if failure 

    // defaults 
    var defaults = { 
     ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed 
     videoId: 'ZCAnLxRvNNc', // toy robot in space is a good default, no? 
     mute: true, 
     repeat: true, 
     width: $(window).width(), 
     wrapperZIndex: 99, 
     playButtonClass: 'tubular-play', 
     pauseButtonClass: 'tubular-pause', 
     muteButtonClass: 'tubular-mute', 
     volumeUpClass: 'tubular-volume-up', 
     volumeDownClass: 'tubular-volume-down', 
     increaseVolumeBy: 10, 
     start: 0, 
     playercount: 1, 
     videoFinished: function() {} 
    }; 
    // methods 

    var options = null; // options 
    var tubularOnceCalled = false; 
    window.player = null; 

    var tubular = function(node, paramOptions) {  // should be called on the wrapper div 
     options = $.extend({}, defaults, paramOptions), 
      $body = $(node) // cache body node 
      $node = $(node); // cache wrapper node 

     // set up iframe player, use global scope so YT api can talk 
     var loadAVideo = function() { 
      player && player.destroy(); 
      player = new YT.Player('tubular-player' + options.playercount , { 
       width: options.width, 
       height: Math.ceil(options.width/options.ratio), 
       videoId: options.videoId, 
       playerVars: { 
        iv_load_policy: 3, 
        controls: 0, 
        showinfo: 0, 
        modestbranding: 1, 
        wmode: 'transparent' 
       }, 
       events: { 
        'onReady': onPlayerReady, 
        'onStateChange': onPlayerStateChange 
       } 
      }); 
     } 

     if(tubularOnceCalled) { 
      loadAVideo(); 
      return; 
     } 

     tubularOnceCalled = true; 
     // build container 
     var tubularContainer = '<div id="tubular-container' + options.playercount + '" style="overflow: hidden; position: fixed; z-index: 1; width: 100%; height: 100%"><div id="tubular-player' + options.playercount + '" style="position: absolute"></div></div><div id="tubular-shield' + options.playercount + '" style="width: 100%; height: 100%; z-index: 2; position: absolute; left: 0; top: 0;"></div>'; 

     // set up css prereq's, inject tubular container and set up wrapper defaults 
     $('html,body').css({'width': '100%', 'height': '100%'}); 
     $body.prepend(tubularContainer); 
     $node.css({position: 'relative', 'z-index': options.wrapperZIndex}); 

     window.onYouTubeIframeAPIReady = loadAVideo; 
     console.log('Player ' + options.playercount + ' is initiating') 
     window.onPlayerReady = function(e) { 
      resize(); 
      if (options.mute) e.target.mute(); 
      e.target.seekTo(options.start); 
      e.target.playVideo(); 
      $('#loadcontainer').delay(1000).fadeOut('slow'); 
      $('html').delay(3000).rhtvinit(); 
      console.log('Player ' + options.playercount + ' has started')  
     } 

     window.onPlayerStateChange = function(state) { 
      if (state.data === 0 && options.repeat) { // video ended and repeat option is set true 
       player.seekTo(options.start); // restart 
      } 
      if(state.data === 0) { 
       options.videoFinished(state, player); 
      } 
     } 

     var playdetect = 0; 

     // resize handler updates width, height and offset of player after resize/init 
     var resize = function() { 
      var width = $(window).width(), 
       pWidth, // player width, to be defined 
       height = $(window).height(), 
       pHeight, // player height, tbd 
       $tubularPlayer = $('#tubular-player' + options.playercount); 

      // when screen aspect ratio differs from video, video must center and underlay one dimension 

      if (width/options.ratio < height) { // if new video height < window height (gap underneath) 
       pWidth = Math.ceil(height * options.ratio); // get new player width 
       $tubularPlayer.width(pWidth).height(height).css({left: (width - pWidth)/2, top: 0}); // player width is greater, offset left; reset top 
      } else { // new video width < window width (gap to right) 
       pHeight = Math.ceil(width/options.ratio); // get new player height 
       $tubularPlayer.width(width).height(pHeight).css({left: 0, top: (height - pHeight)/2}); // player height is greater, offset top; reset left 
      } 

     } 

     // events 
     $(window).on('resize.tubular', function() { 
      resize(); 
     }) 

     $('body').on('click','.' + options.playButtonClass, function(e) { // play button 
      e.preventDefault(); 
      player.playVideo(); 
     }).on('click', '.' + options.pauseButtonClass, function(e) { // pause button 
      e.preventDefault(); 
      player.pauseVideo(); 
     }).on('click', '.' + options.muteButtonClass, function(e) { // mute button 
      e.preventDefault(); 
      (player.isMuted()) ? player.unMute() : player.mute(); 
     }).on('click', '.' + options.volumeDownClass, function(e) { // volume down button 
      e.preventDefault(); 
      var currentVolume = player.getVolume(); 
      if (currentVolume < options.increaseVolumeBy) currentVolume = options.increaseVolumeBy; 
      player.setVolume(currentVolume - options.increaseVolumeBy); 
     }).on('click', '.' + options.volumeUpClass, function(e) { // volume up button 
      e.preventDefault(); 
      if (player.isMuted()) player.unMute(); // if mute is on, unmute 
      var currentVolume = player.getVolume(); 
      if (currentVolume > 100 - options.increaseVolumeBy) currentVolume = 100 - options.increaseVolumeBy; 
      player.setVolume(currentVolume + options.increaseVolumeBy); 
     }) 
    } 

    // load yt iframe js api 

    var tag = document.createElement('script'); 
    tag.src = "http://www.youtube.com/iframe_api"; 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

    // create plugin 

    $.fn.tubular = function (options) { 
     return this.each(function() { 
       $.data(this, tubular(this, options)); 
       console.log('Player: ' + options.playercount + ' is initiated!') 
     }); 
    } 

})(jQuery, window);

使用范例来加载视频背靠背

$(function() { 
    var videoArr = ["InqU8CLwbPg", "owgrkAQ-Log", "UgBWSPD6MUU"]; 
    var vidI = 0; 

    try { 
     $('#wrapper').tubular({ 
      videoId: videoArr[vidI], 
      mute: false, 
      videoFinished: function (state, player) { 
       vidI++; 
       vidI %= videoArr.length; 
       var nextVideo = videoArr[vidI];/* it can directly be loaded from server */ 
       player.loadVideoById(nextVideo); 
      } 
     }); 
    } catch(e) { 
    } 
});

来源

2015-11-23 05:11:30 11thdimension

但是，它可以动态加载新的视频ID？因此，如果第一个视频结束 - >第二个视频开始 - >第一个视频容器获得新的YouTube管理员ID - >第二个视频结束 - >第一个视频开始等等。 – Sjef92

您还没有要显示为网站背景的视频ID？如果您已经拥有了它们，并且您不想在HTML或js中打印整个列表，那么您始终可以使用Ajax从服务器加载nextId。 – 11thdimension

服务器上有一个模拟“播放器”的脚本，所以每次有人进入我的网站时，它应该加载当前播放视频的视频ID以及它应该从播放开始的多少秒。（直播效果）因此，每当一首曲目完成时，它应该从“播放器”脚本接收新的视频ID以继续播放。是否有可能实现这一点？ – Sjef92

您遇到的问题是由于您如何初始化管状。如果你希望两个玩家使用相同的选项，你需要添加一个类给玩家，并使用该类名称初始化管状。对于这个例子，让我们将类名称tubular-player添加到我们的容器中，并为每个存在的类别初始化管状。

HTML

<div id="player1" class="tubular-player"></div> 
<div id="player2" class="tubular-player"></div>

的JavaScript

$('.tubular-player').tubular(options);

来源

2015-11-20 16:57:15 anthonysmothers

Jquery管状加载多个实例

回答

相关问题