目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器。下面学步园小编来讲解下HTML5中的属性有什么?怎样用HTML5制作视频播放器?
HTML5中的属性有什么
在html5中可以使用或者标签播放html5媒体，使用方式如下：
video标签中有很多属性，例如controls属性可以控制是否有控制台。
浏览器不支持HTML5的视频播放功能
从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。
怎样用HTML5制作视频播放器
index.html
CustomHTML5VideoControlswithjQuery
BACKTOARTICLE»VisitinWebson.com»
Demo1
CustomHTML5VideoControls
Yourbrowserdoesnotsupportthevideotag.
ThisisHTML5videowithcustomcontrols
/
Speed:
x1
x3
DEMO1
DEMO2
©2011inWebson.com.DesignbyKennyOoi.PoweredbyHTML5andjQuery.
style.css
/*videocontainer*/.videoContainer{width:600px;height:350px;position:relative;overflow:hidden;background:#000;color:#ccc;}/*videocaptioncss*/.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,#24242450%,#1F1F1F50%,#171717100%);background:-webkit-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);background:-o-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);}/***VIDEOCONTROLSCSS***//*controlholder*/.control{background:#333;color:#ccc;position:absolute;bottom:0;left:0;width:100%;z-index:5;display:none;}/*controltoppart*/.topControl{height:11px;border-bottom:1pxsolid#404040;padding:1px5px;background:#1F1F1F;/*fallback*/background:-moz-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);background:-webkit-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);background:-o-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);}/*controlbottompart*/.btmControl{clear:both;background:#1F1F1F;/*fallback*/background:-moz-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);background:-webkit-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);background:-o-linear-gradient(top,#24242450%,#1F1F1F50%,#171717100%);}.controldiv.btn{float:left;width:34px;height:30px;padding:05px;border-right:1pxsolid#404040;cursor:pointer;}.controldiv.text{font-size:12px;font-weight:bold;line-height:30px;text-align:center;font-family:verdana;width:20px;border:none;color:#777;}.controldiv.btnPlay{background:url(control.png)no-repeat00;border-left:1pxsolid#404040;}.controldiv.paused{background:url(control.png)no-repeat0-30px;}.controldiv.btnStop{background:url(control.png)no-repeat0-60px;}.controldiv.spdText{border:none;font-size:14px;line-height:30px;font-style:italic;}.controldiv.selected{font-size:15px;color:#ccc;}.controldiv.sound{background:url(control.png)no-repeat-88px-30px;border:none;float:right;}.controldiv.sound2{background:url(control.png)no-repeat-88px-60px!important;}.controldiv.muted{background:url(control.png)no-repeat-88px0!important;}.controldiv.btnFS{background:url(control.png)no-repeat-44px0;float:right;}.controldiv.btnLight{background:url(control.png)no-repeat-44px-60px;border-left:1pxsolid#404040;float:right;}.controldiv.lighton{background:url(control.png)no-repeat-44px-30px!important;}/*PROGRESSBARCSS*//*Progressbar*/.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:02px3px#333inset;-moz-box-shadow:02px3px#333inset;-webkit-box-shadow:02px3px#333inset;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}.progressspan{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,#A0DCFF50%,#3FB7FC50%,#16A9FF100%);background:-webkit-linear-gradient(top,#A0DCFF50%,#3FB7FC50%,#16A9FF100%);background:-o-linear-gradient(top,#A0DCFF50%,#3FB7FC50%,#16A9FF100%);box-shadow:001px#fff;-moz-box-shadow:001px#fff;-webkit-box-shadow:001px#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:2px05px#333;-moz-box-shadow:2px05px#333;-webkit-box-shadow:2px05px#333;}/*timeandduration*/.time{width:15%;float:right;text-align:center;font-size:11px;line-height:12px;}/*VOLUMEBARCSS*//*volumebar*/.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;}/*OTHERSCSS*//*videoscreencover*/.loading,#init{position:absolute;top:0;left:0;width:100%;height:100%;background:url(loading.gif)no-repeat50%50%;z-index:2;display:none;}#init{background:url(bigplay.png)no-repeat50%50%!important;cursor:pointer;}
video.js
$(document).ready(function(){//INITIALIZEvarvideo=$('#myVideo');//removedefaultcontrolwhenJSloadedvideo[0].removeAttribute("controls");$('.control').show().css({'bottom':-45});$('.loading').fadeIn(500);$('.caption').fadeIn(500);//beforeeverythinggetstartedvideo.on('loadedmetadata',function(){$('.caption').animate({'top':-45},300);//setvideoproperties$('.current').text(timeFormat(0));$('.duration').text(timeFormat(video[0].duration));updateVolume(0,0.7);//starttogetvideobufferingdatasetTimeout(startBuffer,150);//bindvideoevents$('.videoContainer').append('
').hover(function(){$('.control').stop().animate({'bottom':0},500);$('.caption').stop().animate({'top':0},500);},function(){if(!volumeDrag&&!timeDrag){$('.control').stop().animate({'bottom':-45},500);$('.caption').stop().animate({'top':-45},500);}}).on('click',function(){$('#init').remove();$('.btnPlay').addClass('paused');$(this).unbind('click');video[0].play();});$('#init').fadeIn(200);});//displayvideobufferingbarvarstartBuffer=function(){varcurrentBuffer=video[0].buffered.end(0);varmaxduration=video[0].duration;varperc=100*currentBuffer/maxduration;$('.bufferBar').css('width',perc+'%');if(currentBuffer
');$('.overlay').css({'position':'absolute','width':100+'%','height':$(document).height(),'background':'#000','opacity':0.9,'top':0,'left':0,'z-index':999});$('.videoContainer').css({'z-index':1000});}//iflighton,removeoverlayelse{$('.overlay').remove();}});//soundbuttonclicked$('.sound').click(function(){video[0].muted=!video[0].muted;$(this).toggleClass('muted');if(video[0].muted){$('.volumeBar').css('width',0);}else{$('.volumeBar').css('width',video[0].volume*100+'%');}});//VIDEOEVENTS//videocanplayeventvideo.on('canplay',function(){$('.loading').fadeOut(100);});//videocanplaythroughevent//solveChromecacheissuevarcompleteloaded=false;video.on('canplaythrough',function(){completeloaded=true;});//videoendedeventvideo.on('ended',function(){$('.btnPlay').removeClass('paused');video[0].pause();});//videoseekingeventvideo.on('seeking',function(){//ifvideofullyloaded,ignoreloadingscreenif(!completeloaded){$('.loading').fadeIn(200);}});//videoseekedeventvideo.on('seeked',function(){});//videowaitingformoredataeventvideo.on('waiting',function(){$('.loading').fadeIn(200);});//VIDEOPROGRESSBAR//whenvideotimebarclickedvartimeDrag=false;/*checkfordragevent*/$('.progress').on('mousedown',function(e){timeDrag=true;updatebar(e.pageX);});$(document).on('mouseup',function(e){if(timeDrag){timeDrag=false;updatebar(e.pageX);}});$(document).on('mousemove',function(e){if(timeDrag){updatebar(e.pageX);}});varupdatebar=function(x){varprogress=$('.progress');//calculatedragposition//andupdatevideocurrenttime//aswellasprogressbarvarmaxduration=video[0].duration;varposition=x-progress.offset().left;varpercentage=100*position/progress.width();if(percentage>100){percentage=100;}if(percentage<0){percentage=0;}$('.timeBar').css('width',percentage+'%');video[0].currentTime=maxduration*percentage/100;};//VOLUMEBAR//volumebareventvarvolumeDrag=false;$('.volume').on('mousedown',function(e){volumeDrag=true;video[0].muted=false;$('.sound').removeClass('muted');updateVolume(e.pageX);});$(document).on('mouseup',function(e){if(volumeDrag){volumeDrag=false;updateVolume(e.pageX);}});$(document).on('mousemove',function(e){if(volumeDrag){updateVolume(e.pageX);}});varupdateVolume=function(x,vol){varvolume=$('.volume');varpercentage;//ifonlyvolumehavespecificed//thendirectupdatevolumeif(vol){percentage=vol*100;}else{varposition=x-volume.offset().left;percentage=100*position/volume.width();}if(percentage>100){percentage=100;}if(percentage<0){percentage=0;}//updatevolumebarandvideovolume$('.volumeBar').css('width',percentage+'%');video[0].volume=percentage/100;//changesoundiconbasedonvolumeif(video[0].volume==0){$('.sound').removeClass('sound2').addClass('muted');}elseif(video[0].volume>0.5){$('.sound').removeClass('muted').addClass('sound2');}else{$('.sound').removeClass('muted').removeClass('sound2');}};//Timeformatconverter-00:00vartimeFormat=function(seconds){varm=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);vars=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));returnm+":"+s;};});
以上就是关于“HTML5中的属性有什么?怎样用HTML5制作视频播放器”的内容，希望对大家有用。更多资讯请关注学步园。学步园，您学习IT技术的优质平台!