jQuery管状加载多个实例

Question

我想在第一个管状实例播放后 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 中一样）

提前感谢您！

Answer 1

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

HTML

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

JavaScript

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

Answer 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) {
    }
});