这篇文章将为大家详细讲解有关如何利用HTML5制作一个好看的视频播放器，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
一、视频的格式
目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：
H.264(个人不看好)：这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。在编码及传输过程中的任何部分都可能需要收取专利费。因此Safari（苹果的浏览器）和Intenet Explorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。
Theora:这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。Chrome、Firefox以及Opera支持该编码器。
VP8：该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。Chrome、Firefox以及Opera支持该编码器。
AAC:音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和Internet Explorer支持该音频编码器。
MP3：也是一个专利技术，Safari、Chrome和Internet Explorer支持该音频编码器。
PCM:存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和Internet Explorer支持该音频编码器。
Vorbis:文件扩展名为.ogg，有时候也被称为Ogg Vorbis,该音频编码器不受专利保护，因此版权免费。支持的浏览器包括Chrome、Firefox和Opera.
主流浏览器和设备支持的视频和音频
二、HTML5中的属性
在html5中可以使用或者标签播放html5媒体，使用方式如下
video标签中有很多属性，例如controls属性可以控制是否有控制台。
浏览器不支持HTML5的视频播放功能
从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。
三、制作视频播放器
index.html
Custom HTML5 Video Controls with jQuery
BACK TO ARTICLE »
Visit inWebson.com »
Demo 1
Custom HTML5 Video Controls
Your browser does not support the video tag.
This is HTML5 video with custom controls
/
Speed:
x1
x3
© 2011 inWebson.com.
Design by Kenny Ooi.
Powered by HTML5 and
jQuery.
style.css
/* video container */
.videoContainer{
width:600px;
height:350px;
position:relative;
overflow:hidden;
background:#000;
color:#ccc;
}
/* video caption css */
.caption{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
padding:10px;
color:#ccc;
font-size:20px;
font-weight:bold;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
background: #1F1F1F; /* fallback */
background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}
/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control{
background:#333;
color:#ccc;
position:absolute;
bottom:0;
left:0;
width:100%;
z-index:5;
display:none;
}
/* control top part */
.topControl{
height:11px;
border-bottom:1px solid #404040;
padding:1px 5px;
background:#1F1F1F; /* fallback */
background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}
/* control bottom part */
.btmControl{
clear:both;
background: #1F1F1F; /* fallback */
background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);
}
.control p.btn {
float:left;
width:34px;
height:30px;
padding:0 5px;
border-right:1px solid #404040;
cursor:pointer;
}
.control p.text{
font-size:12px;
font-weight:bold;
line-height:30px;
text-align:center;
font-family:verdana;
width:20px;
border:none;
color:#777;
}
.control p.btnPlay{
background:url(control.png) no-repeat 0 0;
border-left:1px solid #404040;
}
.control p.paused{
background:url(control.png) no-repeat 0 -30px;
}
.control p.btnStop{
background:url(control.png) no-repeat 0 -60px;
}
.control p.spdText{
border:none;
font-size:14px;
line-height:30px;
font-style:italic;
}
.control p.selected{
font-size:15px;
color:#ccc;
}
.control p.sound{
background:url(control.png) no-repeat -88px -30px;
border:none;
float:right;
}
.control p.sound2{
background:url(control.png) no-repeat -88px -60px !important;
}
.control p.muted{
background:url(control.png) no-repeat -88px 0 !important;
}
.control p.btnFS{
background:url(control.png) no-repeat -44px 0;
float:right;
}
.control p.btnLight{
background:url(control.png) no-repeat -44px -60px;
border-left:1px solid #404040;
float:right;
}
.control p.lighton{
background:url(control.png) no-repeat -44px -30px !important;
}
/* PROGRESS BAR CSS */
/* Progress bar */
.progress {
width:85%;
height:10px;
position:relative;
float:left;
cursor:pointer;
background: #444; /* fallback */
background:-moz-linear-gradient(top,#666,#333);
background:-webkit-linear-gradient(top,#666,#333);
background:-o-linear-gradient(top,#666,#333);
box-shadow:0 2px 3px #333 inset;
-moz-box-shadow:0 2px 3px #333 inset;
-webkit-box-shadow:0 2px 3px #333 inset;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.progress span {
height:100%;
position:absolute;
top:0;
left:0;
display:block;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.timeBar{
z-index:10;
width:0;
background: #3FB7FC; /* fallback */
background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);
box-shadow:0 0 1px #fff;
-moz-box-shadow:0 0 1px #fff;
-webkit-box-shadow:0 0 1px #fff;
}
.bufferBar{
z-index:5;
width:0;
background: #777;
background:-moz-linear-gradient(top,#999,#666);
background:-webkit-linear-gradient(top,#999,#666);
background:-o-linear-gradient(top,#999,#666);
box-shadow:2px 0 5px #333;
-moz-box-shadow:2px 0 5px #333;
-webkit-box-shadow:2px 0 5px #333;
}
/* time and duration */
.time{
width:15%;
float:right;
text-align:center;
font-size:11px;
line-height:12px;
}
/* VOLUME BAR CSS */
/* volume bar */
.volume{
position:relative;
cursor:pointer;
width:70px;
height:10px;
float:right;
margin-top:10px;
margin-right:10px;
}
.volumeBar{
display:block;
height:100%;
position:absolute;
top:0;
left:0;
background-color:#eee;
z-index:10;
}
/* OTHERS CSS */
/* video screen cover */
.loading, #init{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(loading.gif) no-repeat 50% 50%;
z-index:2;
display:none;
}
#init{
background:url(bigplay.png) no-repeat 50% 50% !important;
cursor:pointer;
} video.js
$(document).ready(function(){
//INITIALIZE
var video = $(&＃39;#myVideo&＃39;);
//remove default control when JS loaded
video[0].removeAttribute("controls");
$(&＃39;.control&＃39;).show().css({&＃39;bottom&＃39;:-45});
$(&＃39;.loading&＃39;).fadeIn(500);
$(&＃39;.caption&＃39;).fadeIn(500);
//before everything get started
video.on(&＃39;loadedmetadata&＃39;, function() {
$(&＃39;.caption&＃39;).animate({&＃39;top&＃39;:-45},300);
//set video properties
$(&＃39;.current&＃39;).text(timeFormat(0));
$(&＃39;.duration&＃39;).text(timeFormat(video[0].duration));
updateVolume(0, 0.7);
//start to get video buffering data
setTimeout(startBuffer, 150);
//bind video events
$(&＃39;.videoContainer&＃39;)
.append(&＃39;&＃39;)
.hover(function() {
$(&＃39;.control&＃39;).stop().animate({&＃39;bottom&＃39;:0}, 500);
$(&＃39;.caption&＃39;).stop().animate({&＃39;top&＃39;:0}, 500);
}, function() {
if(!volumeDrag && !timeDrag){
$(&＃39;.control&＃39;).stop().animate({&＃39;bottom&＃39;:-45}, 500);
$(&＃39;.caption&＃39;).stop().animate({&＃39;top&＃39;:-45}, 500);
}
})
.on(&＃39;click&＃39;, function() {
$(&＃39;#init&＃39;).remove();
$(&＃39;.btnPlay&＃39;).addClass(&＃39;paused&＃39;);
$(this).unbind(&＃39;click&＃39;);
video[0].play();
});
$(&＃39;#init&＃39;).fadeIn(200);
});
//display video buffering bar
var startBuffer = function() {
var currentBuffer = video[0].buffered.end(0);
var maxduration = video[0].duration;
var perc = 100 * currentBuffer / maxduration;
$(&＃39;.bufferBar&＃39;).css(&＃39;width&＃39;,perc+&＃39;%&＃39;);
if(currentBuffer < maxduration) {
setTimeout(startBuffer, 500);
}
};
//display current video play time
video.on(&＃39;timeupdate&＃39;, function() {
var currentPos = video[0].currentTime;
var maxduration = video[0].duration;
var perc = 100 * currentPos / maxduration;
$(&＃39;.timeBar&＃39;).css(&＃39;width&＃39;,perc+&＃39;%&＃39;);
$(&＃39;.current&＃39;).text(timeFormat(currentPos));
});
//CONTROLS EVENTS
//video screen and play button clicked
video.on(&＃39;click&＃39;, function() { playpause(); } );
$(&＃39;.btnPlay&＃39;).on(&＃39;click&＃39;, function() { playpause(); } );
var playpause = function() {
if(video[0].paused || video[0].ended) {
$(&＃39;.btnPlay&＃39;).addClass(&＃39;paused&＃39;);
video[0].play();
}
else {
$(&＃39;.btnPlay&＃39;).removeClass(&＃39;paused&＃39;);
video[0].pause();
}
};
//speed text clicked
$(&＃39;.btnx1&＃39;).on(&＃39;click&＃39;, function() { fastfowrd(this, 1); });
$(&＃39;.btnx3&＃39;).on(&＃39;click&＃39;, function() { fastfowrd(this, 3); });
var fastfowrd = function(obj, spd) {
$(&＃39;.text&＃39;).removeClass(&＃39;selected&＃39;);
$(obj).addClass(&＃39;selected&＃39;);
video[0].playbackRate = spd;
video[0].play();
};
//stop button clicked
$(&＃39;.btnStop&＃39;).on(&＃39;click&＃39;, function() {
$(&＃39;.btnPlay&＃39;).removeClass(&＃39;paused&＃39;);
updatebar($(&＃39;.progress&＃39;).offset().left);
video[0].pause();
});
//fullscreen button clicked
$(&＃39;.btnFS&＃39;).on(&＃39;click&＃39;, function() {
if($.isFunction(video[0].webkitEnterFullscreen)) {
video[0].webkitEnterFullscreen();
}
else if ($.isFunction(video[0].mozRequestFullScreen)) {
video[0].mozRequestFullScreen();
}
else {
alert(&＃39;Your browsers doesn\&＃39;t support fullscreen&＃39;);
}
});
//light bulb button clicked
$(&＃39;.btnLight&＃39;).click(function() {
$(this).toggleClass(&＃39;lighton&＃39;);
//if lightoff, create an overlay
if(!$(this).hasClass(&＃39;lighton&＃39;)) {
$(&＃39;body&＃39;).append(&＃39;&＃39;);
$(&＃39;.overlay&＃39;).css({
&＃39;position&＃39;:&＃39;absolute&＃39;,
&＃39;width&＃39;:100+&＃39;%&＃39;,
&＃39;height&＃39;:$(document).height(),
&＃39;background&＃39;:&＃39;#000&＃39;,
&＃39;opacity&＃39;:0.9,
&＃39;top&＃39;:0,
&＃39;left&＃39;:0,
&＃39;z-index&＃39;:999
});
$(&＃39;.videoContainer&＃39;).css({
&＃39;z-index&＃39;:1000
});
}
//if lighton, remove overlay
else {
$(&＃39;.overlay&＃39;).remove();
}
});
//sound button clicked
$(&＃39;.sound&＃39;).click(function() {
video[0].muted = !video[0].muted;
$(this).toggleClass(&＃39;muted&＃39;);
if(video[0].muted) {
$(&＃39;.volumeBar&＃39;).css(&＃39;width&＃39;,0);
}
else{
$(&＃39;.volumeBar&＃39;).css(&＃39;width&＃39;, video[0].volume*100+&＃39;%&＃39;);
}
});
//VIDEO EVENTS
//video canplay event
video.on(&＃39;canplay&＃39;, function() {
$(&＃39;.loading&＃39;).fadeOut(100);
});
//video canplaythrough event
//solve Chrome cache issue
var completeloaded = false;
video.on(&＃39;canplaythrough&＃39;, function() {
completeloaded = true;
});
//video ended event
video.on(&＃39;ended&＃39;, function() {
$(&＃39;.btnPlay&＃39;).removeClass(&＃39;paused&＃39;);
video[0].pause();
});
//video seeking event
video.on(&＃39;seeking&＃39;, function() {
//if video fully loaded, ignore loading screen
if(!completeloaded) {
$(&＃39;.loading&＃39;).fadeIn(200);
}
});
//video seeked event
video.on(&＃39;seeked&＃39;, function() { });
//video waiting for more data event
video.on(&＃39;waiting&＃39;, function() {
$(&＃39;.loading&＃39;).fadeIn(200);
});
//VIDEO PROGRESS BAR
//when video timebar clicked
var timeDrag = false; /* check for drag event */
$(&＃39;.progress&＃39;).on(&＃39;mousedown&＃39;, function(e) {
timeDrag = true;
updatebar(e.pageX);
});
$(document).on(&＃39;mouseup&＃39;, function(e) {
if(timeDrag) {
timeDrag = false;
updatebar(e.pageX);
}
});
$(document).on(&＃39;mousemove&＃39;, function(e) {
if(timeDrag) {
updatebar(e.pageX);
}
});
var updatebar = function(x) {
var progress = $(&＃39;.progress&＃39;);
//calculate drag position
//and update video currenttime
//as well as progress bar
var maxduration = video[0].duration;
var position = x - progress.offset().left;
var percentage = 100 * position / progress.width();
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
$(&＃39;.timeBar&＃39;).css(&＃39;width&＃39;,percentage+&＃39;%&＃39;);
video[0].currentTime = maxduration * percentage / 100;
};
//VOLUME BAR
//volume bar event
var volumeDrag = false;
$(&＃39;.volume&＃39;).on(&＃39;mousedown&＃39;, function(e) {
volumeDrag = true;
video[0].muted = false;
$(&＃39;.sound&＃39;).removeClass(&＃39;muted&＃39;);
updateVolume(e.pageX);
});
$(document).on(&＃39;mouseup&＃39;, function(e) {
if(volumeDrag) {
volumeDrag = false;
updateVolume(e.pageX);
}
});
$(document).on(&＃39;mousemove&＃39;, function(e) {
if(volumeDrag) {
updateVolume(e.pageX);
}
});
var updateVolume = function(x, vol) {
var volume = $(&＃39;.volume&＃39;);
var percentage;
//if only volume have specificed
//then direct update volume
if(vol) {
percentage = vol * 100;
}
else {
var position = x - volume.offset().left;
percentage = 100 * position / volume.width();
}
if(percentage > 100) {
percentage = 100;
}
if(percentage < 0) {
percentage = 0;
}
//update volume bar and video volume
$(&＃39;.volumeBar&＃39;).css(&＃39;width&＃39;,percentage+&＃39;%&＃39;);
video[0].volume = percentage / 100;
//change sound icon based on volume
if(video[0].volume == 0){
$(&＃39;.sound&＃39;).removeClass(&＃39;sound2&＃39;).addClass(&＃39;muted&＃39;);
}
else if(video[0].volume > 0.5){
$(&＃39;.sound&＃39;).removeClass(&＃39;muted&＃39;).addClass(&＃39;sound2&＃39;);
}
else{
$(&＃39;.sound&＃39;).removeClass(&＃39;muted&＃39;).removeClass(&＃39;sound2&＃39;);
}
};
//Time format converter - 00:00
var timeFormat = function(seconds){
var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) :Math.floor(seconds-(m*60));
return m+":"+s;
};
}); 关于“如何利用HTML5制作一个好看的视频播放器”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
京公网安备 11010802041100号