< BACK TO POST
LinkedIn Facebook Twitter

Blog

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.

DEMO DOWNLOAD SOURCE FILES

<!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();
}

Responses to "Custom Html5 Video Player with HD option"

  1. Elb says:

    Good work ! Thx for sharing with web community.

  2. richie says:

    Hi,
    are the hd videos still working tested in chrome and fiirefox?

  3. richie says:

    sorry just took a while to down load – fantastic!

  4. admin says:

    Thanks guys. Enjoy the player and dont forget to visit http://videojs.com/

  5. Edwin Bradforde says:

    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.

  6. admin says:

    Never used it with wp Edwin, glad that it helped

  7. stan says:

    please for autoran.. what do it do?

  8. stan says:

    when i visit the page the movie start alone and at the end the movie go automatically in the another page

  9. Martin says:

    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?

  10. Pierre says:

    Is there any Fallback Support For IE 7/8 ?
    in IE8, I have a method error.
    Thanks again,
    Pierre

    • admin says:

      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

  11. Travis says:

    Small mod to hd.js to change SD to HD label and back…
    Thanks for posting this code~!!!

    VideoJS.setup();
    if(quality==”sd”){
    $(“.vjs-controls”).append(‘HD’);
    }else{
    $(“.vjs-controls”).append(‘SD’);
    }

  12. halı says:

    tasarımınız çok güzel

Leave a Reply