Playlist about jquery-tubular

[GoogleCodeExporter]

Firstly, love tubular, does everything it says it does.

Tom I think you should try testing for a loop? then play the next video. As for 
playlist support: yes please.

To get around this I downloaded 4 or so videos and uploaded them as one video 
to make it work for me.

Regards

OJ

Original comment by [email protected] on 2 Apr 2013 at 10:57

[GoogleCodeExporter]

Hello OJ. Thank you for the reply. Cant I use a playlist code for the player ? 
I wanna play some videoclips in the background. 

It to much work to create one long video. But Thank you for the tip. 

There isnt a way to play a playlist with your code ?

Original comment by [email protected] on 2 Apr 2013 at 6:47

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Ok I was wrong. Tubular makes a jquery YouTube player object that uses 
YouTube's iframe api. Which only receives the video id to fetch the video and 
display the iframe (that all happens on YouTube's side). So after some googling 
and trial and error, either use json callback on YouTube's playlist api and 
build your own id array to then change out the video id when 'player state' === 
0 //ends or use a diff custom plugin that does this for you.

Just because I like how tubular builds the nice div's for me ill do the first 
option and post results.

OJ

Original comment by [email protected] on 3 Apr 2013 at 4:58

[GoogleCodeExporter]

Hi,

Because I don't need a lot of video's i cheated and made my own array. However 
in theory you can query the gdata.youtube.com/feeds/ of the playlist "list" 
code, like this guy does here: 
http://stackoverflow.com/questions/6560311/how-to-get-a-youtube-playlist-using-j
avascript-api-and-json
*then build the array of ID's from there.

I wanted to mix up the video backgrounds randomly so its different all the time 
so this is what I did. I hacked the tubular js file:

...

    // set the default video array (gets replaced by array object passed by options.videoId
    var defaultVideoArray = new Array();
    defaultVideoArray[0] = 'eS4rAYrRHWc'; // default at [0]

    // defaults
    var defaults = {
        ratio: 16/9, // usually either 4/3 or 16/9 -- tweak as needed
        videoId: defaultVideoArray, // CHANGED TO ARRAY OBJECT
        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
    };

...

        var randomIdStart = 0; // set randomstart
        var randomIdEnd = 0; // set total in set (end)

        if( Object.prototype.toString.call( options.videoId ) === '[object Array]' ) { // check if options.videoId is an array
            randomIdEnd = options.videoId.length; // get object array count
        } else {
            alert ('videoId is not a legal object array, please give me an array'); //tell them its not
            return false; // stop trying
        }

        var randomId = (Math.floor(Math.random()*randomIdEnd)); //set the random videoId

...

        // set up iframe player, use global scope so YT api can talk
        window.player;
        window.onYouTubeIframeAPIReady = function() {
            player = new YT.Player('tubular-player', {
                width: options.width,
                height: Math.ceil(options.width / options.ratio),
                videoId: options.videoId[randomId], //CHANGED TO ARRAY[randomId]
                playerVars: {
                    controls: 0,
                    showinfo: 0,
                    modestbranding: 1,
                    wmode: 'transparent'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

...
        window.onPlayerStateChange = function(state) {
            if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
                player.seekTo(options.start); // restart
            } else if (state.data === 0) { // CHANGED TO IF NOT REPEAT THEN DO THIS
                var randomId = (Math.floor(Math.random()*randomIdEnd)); //get a new random ID
                player.loadVideoById({videoId: options.videoId[randomId], startSeconds: options.start}); // load and play the ID 
            }
        }

...

Then I had the array object built and passed to tubular in the html like this:

<script>
$(document).ready(function(){
                var videoIdArray = new Array();
                videoIdArray[0] = 'hX0p0irEOls';
                videoIdArray[1] = 'eS4rAYrRHWc';
                videoIdArray[2] = 'kED11aGobUk';
                videoIdArray[3] = 'Uc0Xx3MZ4I4';
                $('#youtube-background').tubular({videoId: videoIdArray, start: 9, repeat: false});
});
</script>

My wrapper class is "youtube-background". Hope this helps someone. The better 
thing is for tubular version 1.1 could have a playlist var that does the JSON 
look up and builds array and then plays through each. That would be awesome.

OJ

Original comment by [email protected] on 4 Apr 2013 at 2:59

[GoogleCodeExporter]

Hello OJ !

Is there a place where I can see the 'hacked' script ?

Sorry for the late reply. Had some others things to do. 

Original comment by [email protected] on 7 Apr 2013 at 2:49

[GoogleCodeExporter]

hi, the playlist code looks cool but i can't get it to work!
i just get the message "An error occured ..." that is shown instead of the 
actual video.
please, i need your help

S

Original comment by [email protected] on 24 Jul 2013 at 2:42