jQuery管状加载多个实例
Posted
技术标签:
【中文标题】jQuery管状加载多个实例【英文标题】：Jquery tubular load multiple instances 【发布时间】：2016-02-15 12:17:06 【问题描述】：我想在第一个管状实例播放后 x 秒启动第二个管状实例。
我正在使用 2 个 div 将播放器附加到
<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
这里是修改后的tubing JS的链接：
http://nopaste.linux-dev.org/?833101
这一切都在现场直播：
http://www.realhardstyle.tv
我怎样才能设法在第二个实例（以及更多）中加载 youtube iframe，最终结果应该是不间断地播放 youtube 视频流。对于每个已经开始的视频，应该出现一个“正在播放”的 div（就像在 jquery.rhtv.init.js 中一样）
提前感谢您！
【问题讨论】：
【参考方案1】：您遇到的问题是由于您是如何初始化管状的。如果您希望两个播放器使用相同的选项，您需要向播放器添加一个类并使用该类名称初始化管状体。对于这个例子，让我们将类名tubular-player 添加到我们的容器中，并为每个存在的类初始化tubing。
HTML
<div id="player1" class="tubular-player"></div>
<div id="player2" class="tubular-player"></div>
JavaScript
$('.tubular-player').tubular(options);
【讨论】：
【参考方案2】：Tubular 库默认不支持重新加载不同的视频。 我做了一些调整，以便可以完成。
以下是有效的 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)
);
【讨论】：
但是可以动态加载新的视频ID吗？这样如果第一个视频结束 -> 第二个视频开始 -> 第一个视频容器获得一个新的 youtube ID -> 第二个视频结束 -> 第一个视频开始等等。 您还没有想要显示为网站背景的视频 ID？如果您已经拥有它们并且不想在 HTML 或 js 中打印整个列表，那么您始终可以使用 Ajax 从服务器加载 nextId。 在服务器上运行了一个模仿“播放器”的脚本，所以每次有人访问我的网站时，它都应该加载当前正在播放的视频的视频 ID，以及它应该从开始播放多少秒. （直播效果）因此，每当曲目完成时，它应该从“播放器”脚本接收一个新的视频 ID，以便继续播放。是否有可能实现这一点？ 是的，我已经做了一些修改，以使其通过管状本身成为可能。查看更改和新的 jsfiddle 链接。我希望这是你需要的。 它正在初始化，它也在播放动态加载的que！我们可以编辑小脚本吗，所以 nextvideo 将在间隔而不是 videostate 开始，并且在它开始的那一刻开始。它还应该执行另一个函数吗？以上是关于jQuery管状加载多个实例的主要内容，如果未能解决你的问题，请参考以下文章