HTML5 Video Player

HTML5 Video Player

This is a pretty awesome jQuery video player. It has playlist functionality and lots of callbacks/options for customization.

The original design was created by the very talented kb.
media-box

Full list of features
-Built with jPlayer
-Choose which buttons are shown
-Built in playlist
-Heart/Like functionality
-Allows you to provide SD and HD versions of a video

Usage

$('selector').ttwVideoPlayer(playlist, options);

Full list of options

{
            autoplay:false,
            buttons:['playlist', 'hd', 'heart', 'settings' 'fullscreen'],
            width: "554px",
            height: "312px",
            hdPlaylist:[],
            autoHidePlaylist:true,
            autoHidePlaylistDelay:3000,
            playlistButtonCallback:function(){
                fires when the playlist button is clicked
            },
            hdButtonCallback:function(){
                fires when the HD button is clicked
            },
            heartButtonCallback:function(){
                fires when the heart button is clicked
            },
            settingsButtonCallback:function(){
                fires when the settings button is clicked
            },
            fullscreenButtonCallback:function(){
                fires when the fullscreen button is clicked
            },
            allowHeartIncrement:function(){
                //use this to determine if the heart count should be updated. If you only want to limit a user to
                //one click, you would enforce that requirement here. This function should always return true or false
                return true;
            }
            jPlayer:{}, //these are the jPlayer options. Use the structure defined on the jPlayer site, or leave off to use defaults
};

24 Comments

Got something to say? Feel free, I want to hear from you! Leave a Comment

  1. Kb says:

    Awesome work :) Cheers!

  2. JW says:

    Hello, great job!

    One question: any way to keep the playlist showing, on the left side of the player?

    Thanks very much.

  3. Diane says:

    Wow! this could be the answer to my prayers. I hope it is as it’s beautifully put together…

    Thanks for sharing Saleem :)

  4. Yusuf Özer says:

    fullscreenButtonCallback:function(){
    fires when the fullscreen button is clicked
    },
    function doesnt work for me…

    and in this line -> buttons:['playlist', 'hd', 'heart', 'settings' 'fullscreen'],
    you should type a comma before ‘fullscreen’

    • Saleem says: (Author)

      There is an error in the documentation, use fullscreenCallback rather than fullscreenButtonCallback.

  5. Matteo says:

    Hi,
    this is wonderful!
    But I’m having troubles getting it to work.

    This is how I implemented it:

    $(function() {

    var playlist = [
    [cut]
    ];

    $(‘#video_container’).ttwVideoPlayer(playlist, {
    debug:true,
    autoplay:false,
    buttons:['playlist', 'fullscreen'],
    width: “690px”,
    height: “400px”,
    autoHidePlaylist:true,
    autoHidePlaylistDelay:3000,
    jPlayer:{
    swfPath: “jquery-jplayer”,
    errorAlerts:true,
    warningAlerts:true
    }
    });
    });

    This is the error I get (at the last line of jPlayer options):

    TypeError: ‘undefined’ is not a function (evaluating ‘$(‘#video_container’).ttwVideoPlayer’)

    I don’t know what to do, can you help me??

    Thank you very much in advance!

  6. Matteo says:

    Ok sorry…solved…I was loading jquery two times (at the beginning and at the end of the document)

  7. 9ale7 says:

    THANKS !!

  8. Jack Whiting says:

    Great stuff, loving this will definitely put this into use on my next project.

  9. John says:

    How exactly do I create an HD Playlist? I’ve trying for hours to no avail. And the fullscreen button is always disabled. Why is that?

  10. Vitor says:

    How can I put the video current time?

  11. Tdeguara says:

    How can I not display the buttons I don’t want?

    Thanks

  12. cha says:

    Hello

    This is a great video player !
    Thanks a lot for your work, but it’s not working in IE8 ;-(

  13. vijay says:

    jPlayer 2.0.22 : id=’jp_jplayer_0′ : Error!

    jPlayer’s Flash fallback has been disabled by the browser due to the CSS rules you have used. Details: self._getMovie().fl_setVideo_m4v is not a function

    Check that you have not display:none; the jPlayer entity or any ancestor.

    Context: jquery-jplayer/Jplayer.swf

  14. vijay says:

    i am getting this error please tell how to solve it

  15. I just love this player.. damn good work man!! awesomest from all the players till now!!!!!!
    But still you are missing something and that is there are no captions to the video!!
    I have a suggestion that you sholud add the two full screen modes like youtube!!
    Well, I’m thinking of converting it into a WordPress plugin and all the player credit goes to you!!!
    Thanks man!!

  16. amidude says:

    No errors in console or Firebug but still do not see the video. All I see is the countdown numbers on the screen where the video should be. I’m using .ogg if that has any bearing.

    • Saleem says: (Author)

      Make sure you have turned on both debug options (plugin, jPlayer) and re-check the console. Also make sure your server is sending the correct mime types for ogg file.

  17. Matt says:

    Best player out there. Extremely flexible and easy to implement and style.

    Needed a player for a project with very quick turnaround, and now I can focus on other aspects and will get at least one good night’s sleep next week.

  18. Eranga says:

    i checked the demo and i want to play list appear in bottom of the player can any one explain me how can i do it?
    thanks

  19. Nachgesalzen says:

    how can I get the playlist for the HTML5 video player View permanet. many thanks for their efforts

  20. Stacey says:

    This is Fab! thank you!

    2 things I cant for the life of me get the fullscreen to work the button is there but does nothing.

    Also how can I get the playlist to be open straight away, I have got it to stay up when clicked but would like it to appear straight away.

    Then I am good to go!

    Thank you

Leave a Comment

Let us know your thoughts on this post but remember to place nicely folks!