Custom Html5 Video Player with HD option

26,07,2010 at 22:09 12 yorum

<![CDATA[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 skin on http://videojs.com/skins.html and downloaded zip version . Then added a custom css file for HD button on the player. Finally added javascript functions for HD property.

http://www.goksel.se/lib/html5player/

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

]]>

Reklamlar

Entry filed under: Cool Stuff, Css3, Html5, Jquery, Video.

Auto-Update SVN on DreamHost Building Custom WordPress Theme

12 Yorum Add your own

  • 1. Anonim  |  05,08,2010, 21:40

    Cevapla
  • 2. Heff  |  05,08,2010, 21:40

    Very cool!

    Cevapla
  • 3. Anonim  |  05,08,2010, 21:40

    Cevapla
  • 4. Anonim  |  04,09,2010, 11:05

    Cevapla
  • 5. Elb  |  04,09,2010, 11:05

    Good work ! Thx for sharing with web community.

    Cevapla
  • 6. Anonim  |  04,09,2010, 11:05

    Cevapla
  • 7. Anonim  |  28,09,2010, 14:30

    Cevapla
  • 8. richie  |  28,09,2010, 14:30

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

    Cevapla
  • 9. Anonim  |  28,09,2010, 14:30

    Cevapla
  • 10. Anonim  |  28,09,2010, 14:31

    Cevapla
  • 11. richie  |  28,09,2010, 14:31

    sorry just took a while to down load – fantastic!

    Cevapla
  • 12. Anonim  |  28,09,2010, 14:31

    Cevapla
  • 13. Anonim  |  28,09,2010, 16:12

    Cevapla
  • 14. richie  |  28,09,2010, 16:12

    hoe to I edit the HD bit

    Cevapla
  • 15. Anonim  |  28,09,2010, 16:12

    Cevapla
  • 16. Anonim  |  02,11,2010, 15:18

    Cevapla
  • 17. admin  |  02,11,2010, 15:18

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

    Cevapla
  • 18. Anonim  |  02,11,2010, 15:18

    Cevapla

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Google+ fotoğrafı

Google+ hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap / Değiştir )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Takvim

Temmuz 2010
P S Ç P C C P
« Haz   Ağu »
 1234
567891011
12131415161718
19202122232425
262728293031  

Most Recent Posts


%d blogcu bunu beğendi: