I’m trying to implement a video player using VideoJS that can play both YouTube videos and locally-uploaded MP4s within a playlist object / array. I’m trying to do all this within Drupal 7.x and I’ve come pretty close to having it working but at the moment, I can’t seem to make the YouTube videos work with the playlist code.
Here’s where I am right now…
1.) I’m currently loading the following JavaScript library / code in the following order:
- jQuery 1.4.x
- VideoJS 4.3.x
- media.youtube.js (YouTube “wrapper” API, version unspecified.)
- videojs-playlists.min.js (The VideoJS playlist library, verion 0.1.)
- The player initialization code itself that is responsible for loading the player with the videos / playlists / options, etc.
The jQuery is loaded in the head but everything else is down at the bottom of the markup.
2.) I’m using the following markup for the player itself:
<video id=“video” class=“video-js vjs-default-skin video_url” controls data-setup=“” width=“640” height=“360”></video>';
<button type=“button” data-action=“prev”>Previous</button>
<button type=“button” data-action=“next”>Next</button>
3.) I’m trying to make the player use two objects / arrays:
- options.
- videos (playlist).
The “options” array / object contains the player types and their respective order of use (i.e. - YouTube, HTML5, or Flash). The “videos” is just the playlist array / object that contains video specifics, such as the src of the video, the poster, and title.
Here’s the code:
(function ($) {
var playlistIndex = 0;
var videos = [
{
src : [
'https://www.youtube.com/watch?v=GaMcsKtBDwE',
],
poster : 'http://flowplayer.org/media/img/demos/minimalist.jpg',
title : 'Video 1'
},
{
src : [
'http://stream.flowplayer.org/bauhaus/624x260.webm',
'http://stream.flowplayer.org/bauhaus/624x260.mp4',
'http://stream.flowplayer.org/bauhaus/624x260.ogv'
],
poster : 'http://flowplayer.org/media/img/demos/minimalist.jpg',
title : 'Video 1'
},
{
src : [
'http://stream.flowplayer.org/night3/640x360.webm',
'http://stream.flowplayer.org/night3/640x360.mp4',
'http://stream.flowplayer.org/night3/640x360.ogv'
],
poster : 'http://flowplayer.org/media/img/demos/playlist/railway_station.jpg',
title : 'Video 2'
},
{
src : [
'http://stream.flowplayer.org/functional/624x260.webm',
'http://stream.flowplayer.org/functional/624x260.mp4',
'http://stream.flowplayer.org/functional/624x260.ogv'
],
poster : 'http://flowplayer.org/media/img/demos/functional.jpg',
title : 'Video 3'
}
];
var options = { "techOrder": ["youtube", "html5", "flash"] }; //Works w/ playlist (but fails w/ YouTube).
//var options = { "techOrder": ["youtube"] , "src" : "https://www.youtube.com/watch?v=GaMcsKtBDwE"}; //Fails w/ playlist (but works w/ YouTube).
var player = videojs('video', options);
player.playList(videos, {
getVideoSource: function(vid, cb) {
cb(vid.src, vid.poster);
}
});
$('[data-action=prev]').bind('click', function(e) {
player.prev();
});
$('[data-action=next]').bind('click', function(e) {
player.next();
});
})(jQuery)
Right now, I’m able to get videos to play, but the “Previous” and “Next” buttons seem to have problems when I include a YouTube video inside the “videos” playlist array / object. What happens is that the YouTube video basically gets loaded but a brief VideoJS error message in the uppermost area of the video player screen indicates that no compatible player was found–this eventually disappears with the YouTube video getting loaded up anyway, which makes the video playable. Obviously this isn’t ideal.
Beyond this, the YouTube video does play and if I click on the “Next” button, that same error message appears for locally-served MP4 videos on the web server, but I’m still able to play them if I click on the video screen. Once the video is serving local MP4s from the playlist, the “Previous” and “Next” buttons seem to work, but if I keep pressing “Previous” to get back to the YouTube video from the playlist, it won’t work: it will go back to the first locally-served video in the playlist but won’t go past that to the first video, which is a YouTube video.
Any insight into this is appreciated. It’s pretty complex, but surely I’m not the first who’s worked on something like this. I’ve tried to search for complete information about implementing a video player with VideoJS that can handle both MP4s (local files, I mean) and YouTube videos within playlist data structures, but I haven’t been able to find anything that “ties it all together.”
