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.
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
};




Awesome work
Cheers!
Thanks! You too
Hello, great job!
One question: any way to keep the playlist showing, on the left side of the player?
Thanks very much.
Yes. Set autoHidePlaylist to false.
Wow! this could be the answer to my prayers. I hope it is as it’s beautifully put together…
Thanks for sharing Saleem
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’
There is an error in the documentation, use fullscreenCallback rather than fullscreenButtonCallback.
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!
Ok sorry…solved…I was loading jquery two times (at the beginning and at the end of the document)
THANKS !!
Great stuff, loving this will definitely put this into use on my next project.
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?
How can I put the video current time?
How can I not display the buttons I don’t want?
Thanks
Hello
This is a great video player !
Thanks a lot for your work, but it’s not working in IE8 ;-(
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
i am getting this error please tell how to solve it
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!!
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.
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.
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.
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
how can I get the playlist for the HTML5 video player View permanet. many thanks for their efforts
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