Comments (8)
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
from jquery-tubular.
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
from jquery-tubular.
[deleted comment]
from jquery-tubular.
[deleted comment]
from jquery-tubular.
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
from jquery-tubular.
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
from jquery-tubular.
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
from jquery-tubular.
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
from jquery-tubular.
Related Issues (20)
- set player volume at start
- Video is not playing in Android device HOT 4
- Audio doesn't work in Chrome
- How do I hide the video controls
- Start position in Google Chrome is always zero.
- Top white border in both IE and Chrome HOT 1
- Start position is always zero.
- Enhancement: Disable Clicking on background
- loop from designated start and end seconds HOT 1
- Does not work
- Turning off advert show
- Can tubular play local videos ?
- file://www.youtube.com/iframe_api Failed to load resource: net::ERR_FILE_NOT_FOUND
- Can I Force HD720 playback
- Tubular does not respect Modernizr HOT 1
- tubular not appearing to work within a function
- Redirected site problem
- Video not working in chrome browser
- jquery-tubular phpbb style integration
- IE11 autoplay is not working
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-tubular.