Playlist
GoogleCodeExporter opened this issue · comments
What steps will reproduce the problem?
1. How can I make a playlist playing in the background? I did a search for
hours on the internet but I didn't find anything that works. Can you maybe help
me ?
Original issue reported on code.google.com by tombalfo...@gmail.com
on 24 Mar 2013 at 6:54
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 catherin...@gmail.com
on 2 Apr 2013 at 10:57
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 tombalfo...@gmail.com
on 2 Apr 2013 at 6:47
[deleted comment]
[deleted comment]
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 catherin...@gmail.com
on 3 Apr 2013 at 4:58
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 catherin...@gmail.com
on 4 Apr 2013 at 2:59
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 tombalfo...@gmail.com
on 7 Apr 2013 at 2:49
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 chamel...@gmail.com
on 24 Jul 2013 at 2:42