SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    VideoJS, YouTube & Local MP4s, and Playlist

    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:

    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."

  2. #2
    SitePoint Member
    Join Date
    Aug 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey did u solve the problem? i also having the same problem ..i unable to switch video from vimeo to local mp4 video using video.js..

  3. #3
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ksonia90 View Post
    hey did u solve the problem? i also having the same problem ..i unable to switch video from vimeo to local mp4 video using video.js..
    Yes, I solved it but it required a lot of work... Depending on your setup, you'll need to find a plugin / extension that ties into VideoJS that can handle Vimeo URLs. Once you've found one, figure out what form the payload needs to be in for your players per-source (i.e. - if MP4, then put the dimensions here, if Vimeo, then put the dimensions there, etc.). Finally, once you've isolated the players like this and understand what pieces of data go where, all you'll need to do it write the logic responsible for generating each player payload received. It can be a pain figuring out where the dependencies are between the payloads' elements but once you do this, you've essentially parsed what the players consume. It's time consuming and requires a lot of testing but it's not impossible, either.

    VideoJS is about the best resource for doing this at the moment from what I can tell (at least, it was for the requirements I had where I needed a single player for both local MP4s and YouTube URLs). After doing all this though, I managed to get it to work... Works well, too!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •