Custom Html5 Video Player with HD option
July 26th, 2010 | Cool Stuff , Css3 , Html5 , Jquery , Video
I have been looking for an Html5 Player for mindwork3d project but could not find one with HD option. Finally I decided to add that by myself to my player.
First thing I did was to find a cool player skin. I found a vimeo-like skin on http://videojs.com/skins and downloaded zip version . Then added a custom css file for HD button on the player. Finally added javascript functions for HD property.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/video-js.css"/> <link rel="stylesheet" href="css/vim.css"/> <link rel="stylesheet" href="css/hd.css"/> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/video.js"></script> <script type="text/javascript" src="js/hd.js"></script> <style type="text/css"> </style> <title>video</title> </head> <body onLoad="ready();"> <div id="video_holder">Loading Video...</div> </body> </html>
<?
$quality = $_POST["quality"];
if($quality=="sd"){
$src = "415x205";
if(strpos($_SERVER['HTTP_USER_AGENT'],"iPhone") || strpos($_SERVER['HTTP_USER_AGENT'],"iPod")) $src = "640x480";
?>
<div class="video-js-box vim-css"><video class="video-js" width="415" height="205" controls preload><source src="/video/415x205.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="/video/<?=$src;?>.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video></div>
<? }else{?>
<div class="video-js-box vim-css"><video class="video-js" width="415" height="205" controls preload><source src="/video/640x316.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="/video/640x480.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video></div>
<? }?>
.video-js-box{}
.video-js-box ul{float:none;}
.vjs-controls{padding-left:50px!important;padding-right:175px!important;}
.vjs-controls>li{font-size:10px!important;}
.vjs-controls>li>span{font-family:Georgia, "Times New Roman", Times, serif!important;}
.vjs-play-control{width:32px!important;height:32px!important;border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;bottom:10px!important;}
.vjs-play-control:hover{background:#0066ff!important;}
.vjs-play span{border-top-width:7px!important;border-left-width:7px!important;border-bottom-width:7px!important;margin:9px 0 0 13px!important;}
.vjs-pause span{width:2px!important;height:14px!important;margin:9px 0 0 10px!important;}
.vjs-progress-control,.vjs-progress-holder,.vjs-play-progress,.vjs-load-progress,.vjs-fullscreen-control{border-radius:0!important;-webkit-border-radius:0!important;-moz-border-radius:0!important;}
.vjs-progress-holder{margin-right:10px!important;}
.vjs-progress-control .vjs-play-progress{background:#0066ff!important;}
.vjs-time-control{width:70px!important;right:105px!important;}
.vjs-volume-control{right:70px!important;width:35px!important;}
.vjs-volume-control ul{margin-left:0!important;}
.vjs-volume-control ul .vjs-volume-level-on{border-color:#0066ff!important;}
.vjs-fullscreen-control{width:20px!important;right:40px!important;padding:0 2px 0 8px!important;}
.vim-css .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(4), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(2){border-bottom-color:#0066ff!important;}
.vim-css .vjs-fullscreen-control:hover ul li:nth-child(1), .vim-css .vjs-fullscreen-control:hover ul li:nth-child(2), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(3), .vim-css.vjs-fullscreen .vjs-fullscreen-control:hover ul li:nth-child(4){border-top-color:#0066ff!important;}
.vjs-hd-control{width:25px!important;right:10px;line-height:32px;padding-right:5px!important;font-size:11px!important;cursor:pointer!important;}
.vjs-hd-control span{display:block!important;width:20px!important;height:12px!important;float:left;color:#fff;margin-top:0px;font-weight:bold;font-size:14px;}
.vjs-hd-control span:hover{color:#0066ff;}
.vjs-hd-control .hd_on{color:#0066ff;}
function ready(){
load_showreel("sd");
}
function load_showreel(quality){
$('#video_holder').html("Loading Video...");
$('#video_holder').show();
$.ajax({
type: "POST",
url: "video.php",
data: "quality="+quality,
success: function(msg){
$('#video_holder').html(msg);
VideoJS.setup();
$(".vjs-controls").append('<li class="vjs-hd-control" title="Switch to High Definition"><span>HD</span></li>');
var hd = $(".vjs-hd-control span");
if(quality=="sd"){
hd.removeClass("hd_on");hd.attr("title","Switch to High Definition");
}else{
hd.addClass("hd_on");hd.attr("title","Switch to Low Definition");
}
$(".vjs-hd-control").click(function(){pauseVideo();if(quality=="sd") load_showreel("hd"); else load_showreel("sd");});
$(".vjs-fullscreen-control").attr("title","Fullscreen/Standart View");
if(window.played_before) playVideo();
window.played_before=1;
}
});
}
function playVideo(){
v = $("video")[0];
v.play();
}
function pauseVideo(hide){
v = $("video")[0];
v.src="";
v.load();
v.pause();
}
Very cool!
Good work ! Thx for sharing with web community.
Hi,
are the hd videos still working tested in chrome and fiirefox?
sorry just took a while to down load – fantastic!
Thanks guys. Enjoy the player and dont forget to visit http://videojs.com/
I didn’t know this code existed until recently, exactly what I was looking for and the only thing stopping me from using videoJS until now. Getting it to work within WordPress was a nightmare though, I had to make several edits and I’m not a developer so it wasn’t easy to bugfix.
The most difficult problem turned out to be the jQuery.ajax call. WordPress will not accept “url: video.php”. There are several fixes but the easiest to start with is to use the *full* URL. e.g. “url: http://mywebsite.com/path/to/video.php“.
I got it working late last night, thanks for the code and for sharing it, its a life saver.
Never used it with wp Edwin, glad that it helped
please for autoran.. what do it do?
Stan, what do you mean with Autoran?
when i visit the page the movie start alone and at the end the movie go automatically in the another page
Exactly what I was looking for. But cant get it to work with videojs. When using the video.js file in this doc the player disapears and the regular html5 player is shown. . How come youve change to list element. Why not using ‘s to set up the controlls?
Martin, did you try to download the source files?
Is there any Fallback Support For IE 7/8 ?
in IE8, I have a method error.
Thanks again,
Pierre
Hey Pierre, this code is very old. I dont support this script anymore. there are plenty of cool tools man. I would suggest you to use them