欢迎来到it培训的黄埔军校——智游教育!

小强的html5移动开发之路(5)——制作一个漂亮的视频播放器-永利国际

于2017-04-10 14:53:16 发表在html5知识库

在前面几篇文章中介绍了html5的特点和需要掌握的基础知识,下面我们开始真正的体验一下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.

主流浏览器和设备支持的视频和音频

浏览器 容器 视频 音频
apple ios mp4 h.264 acc、mp3、pcm
apple safari mp4 h.264  
google android(pre v.3) -- -- --
google chrome mp4、ogg、webm theora、vp8 acc、mp3、vorbis
microsoft internet explorer mp4 h.264 acc、mp3
mozilla firefox ogg、webm theora、vp8 pcm、vorbis
opera ogg、webm theora、vp8 pcm、vorbis

二、html5中的属性
在html5中可以使用
  
00033.     
  
00034.   
00035.   
00036.   
00037.   
00038.   
00039.       
00040.     

demo 1

  
00041.     

custom html5 video controls

  
00042.   
00043.   
00044.       
00045.       
00046.         
00047.         
00048.         
00049.       

your browser does not support the video tag.

  
00050.       
00051.     this is html5 video with custom controls
  
00052.       
00053.   
00054.           
00055.               
00056.                   
00057.                   
00058.             
  
00059.               
00060.                  /   
00061.                    
00062.             
  
00063.         
  
00064.           
00065.           
00066.               
00067.               
00068.             speed:   
00069.             x1  
00070.             x3  
00071.               
00072.               
00073.               
00074.                   
00075.               
00076.               
00077.           
00078.           
00079.       
00080.       
00081.   
00082.   
00083.       
00084.       
00085.         
      
    00086.             demo 1  
    00087.             
  • demo 2
  •   
    00088.         
  
00089.               
00090.       
00091.   
00092.   
00093.   
00094. 
  
00095.     © 2011 inwebson.com. design by kenny ooi. powered by html5 and jquery.  
00096. 
  
00097.   
00098.   

style.css
00001. /* video container */  
00002. .videocontainer{  
00003.     width:600px;  
00004.     height:350px;  
00005.     position:relative;  
00006.     overflow:hidden;  
00007.     background:#000;  
00008.     color:#ccc;  
00009. }  
00010.   
00011. /* video caption css */  
00012. .caption{  
00013.     display:none;  
00014.     position:absolute;  
00015.     top:0;  
00016.     left:0;  
00017.     width:100%;  
00018.     padding:10px;  
00019.     color:#ccc;  
00020.     font-size:20px;  
00021.     font-weight:bold;  
00022.     box-sizing: border-box;  
00023.     -ms-box-sizing: border-box;  
00024.     -webkit-box-sizing: border-box;  
00025.     -moz-box-sizing: border-box;  
00026.     background: #1f1f1f; /* fallback */  
00027.     background:-moz-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00028.     background:-webkit-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00029.     background:-o-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00030. }  
00031.   
00032. /*** video controls css ***/  
00033. /* control holder */  
00034. .control{  
00035.     background:#333;  
00036.     color:#ccc;  
00037.     position:absolute;  
00038.     bottom:0;  
00039.     left:0;  
00040.     width:100%;  
00041.     z-index:5;  
00042.     display:none;  
00043. }  
00044. /* control top part */  
00045. .topcontrol{  
00046.     height:11px;  
00047.     border-bottom:1px solid #404040;  
00048.     padding:1px 5px;  
00049.     background:#1f1f1f; /* fallback */  
00050.     background:-moz-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00051.     background:-webkit-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00052.     background:-o-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00053. }  
00054. /* control bottom part */  
00055. .btmcontrol{  
00056.     clear:both;  
00057.     background: #1f1f1f; /* fallback */  
00058.     background:-moz-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00059.     background:-webkit-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00060.     background:-o-linear-gradient(top,#242424 50%,#1f1f1f 50%,#171717 100%);  
00061. }  
00062. .control div.btn {  
00063.     float:left;  
00064.     width:34px;  
00065.     height:30px;  
00066.     padding:0 5px;  
00067.     border-right:1px solid #404040;  
00068.     cursor:pointer;  
00069. }  
00070. .control div.text{  
00071.     font-size:12px;  
00072.     font-weight:bold;  
00073.     line-height:30px;  
00074.     text-align:center;  
00075.     font-family:verdana;  
00076.     width:20px;  
00077.     border:none;  
00078.     color:#777;  
00079. }  
00080. .control div.btnplay{  
00081.     background: no-repeat 0 0;  
00082.     border-left:1px solid #404040;  
00083. }  
00084. .control div.paused{  
00085.     background: no-repeat 0 -30px;  
00086. }  
00087. .control div.btnstop{  
00088.     background: no-repeat 0 -60px;  
00089. }  
00090. .control div.spdtext{  
00091.     border:none;  
00092.     font-size:14px;  
00093.     line-height:30px;  
00094.     font-style:italic;  
00095. }  
00096. .control div.selected{  
00097.     font-size:15px;  
00098.     color:#ccc;  
00099. }  
00100. .control div.sound{  
00101.     background: no-repeat -88px -30px;  
00102.     border:none;  
00103.     float:right;  
00104. }  
00105. .control div.sound2{  
00106.     background: no-repeat -88px -60px !important;  
00107. }  
00108. .control div.muted{  
00109.     background: no-repeat -88px 0 !important;  
00110. }  
00111. .control div.btnfs{  
00112.     background: no-repeat -44px 0;  
00113.     float:right;  
00114. }  
00115. .control div.btnlight{  
00116.     background: no-repeat -44px -60px;  
00117.     border-left:1px solid #404040;  
00118.     float:right;  
00119. }  
00120. .control div.lighton{  
00121.     background: no-repeat -44px -30px !important;  
00122. }  
00123.   
00124. /* progress bar css */  
00125. /* progress bar */  
00126. .progress {  
00127.     width:85%;  
00128.     height:10px;  
00129.     position:relative;  
00130.     float:left;  
00131.     cursor:pointer;  
00132.     background: #444; /* fallback */  
00133.     background:-moz-linear-gradient(top,#666,#333);  
00134.     background:-webkit-linear-gradient(top,#666,#333);  
00135.     background:-o-linear-gradient(top,#666,#333);  
00136.     box-shadow:0 2px 3px #333 inset;  
00137.     -moz-box-shadow:0 2px 3px #333 inset;  
00138.     -webkit-box-shadow:0 2px 3px #333 inset;  
00139.     border-radius:10px;  
00140.     -moz-border-radius:10px;  
00141.     -webkit-border-radius:10px;  
00142. }  
00143. .progress span {  
00144.     height:100%;  
00145.     position:absolute;  
00146.     top:0;  
00147.     left:0;  
00148.     display:block;  
00149.     border-radius:10px;  
00150.     -moz-border-radius:10px;  
00151.     -webkit-border-radius:10px;  
00152. }  
00153. .timebar{  
00154.     z-index:10;  
00155.     width:0;  
00156.     background: #3fb7fc; /* fallback */  
00157.     background:-moz-linear-gradient(top,#a0dcff 50%,#3fb7fc 50%,#16a9ff 100%);  
00158.     background:-webkit-linear-gradient(top,#a0dcff 50%,#3fb7fc 50%,#16a9ff 100%);  
00159.     background:-o-linear-gradient(top,#a0dcff 50%,#3fb7fc 50%,#16a9ff 100%);  
00160.     box-shadow:0 0 1px #fff;  
00161.     -moz-box-shadow:0 0 1px #fff;  
00162.     -webkit-box-shadow:0 0 1px #fff;  
00163. }  
00164. .bufferbar{  
00165.     z-index:5;  
00166.     width:0;  
00167.     background: #777;  
00168.     background:-moz-linear-gradient(top,#999,#666);  
00169.     background:-webkit-linear-gradient(top,#999,#666);  
00170.     background:-o-linear-gradient(top,#999,#666);  
00171.     box-shadow:2px 0 5px #333;  
00172.     -moz-box-shadow:2px 0 5px #333;  
00173.     -webkit-box-shadow:2px 0 5px #333;  
00174. }  
00175. /* time and duration */  
00176. .time{  
00177.     width:15%;  
00178.     float:right;  
00179.     text-align:center;  
00180.     font-size:11px;  
00181.     line-height:12px;  
00182. }  
00183.   
00184. /* volume bar css */  
00185. /* volume bar */  
00186. .volume{  
00187.     position:relative;  
00188.     cursor:pointer;  
00189.     width:70px;  
00190.     height:10px;  
00191.     float:right;  
00192.     margin-top:10px;  
00193.     margin-right:10px;  
00194. }  
00195. .volumebar{  
00196.     display:block;  
00197.     height:100%;  
00198.     position:absolute;  
00199.     top:0;  
00200.     left:0;  
00201.     background-color:#eee;  
00202.     z-index:10;  
00203. }  
00204.   
00205. /* others css */  
00206. /* video screen cover */  
00207. .loading, #init{  
00208.     position:absolute;  
00209.     top:0;  
00210.     left:0;  
00211.     width:100%;  
00212.     height:100%;  
00213.     background: no-repeat 50% 50%;  
00214.     z-index:2;  
00215.     display:none;  
00216. }  
00217. #init{  
00218.     background: no-repeat 50% 50% !important;  
00219.     cursor:pointer;  
00220. }  

video.js
00001. $(document).ready(function(){  
00002.     //initialize  
00003.     var video = $('#myvideo');  
00004.       
00005.     //remove default control when js loaded  
00006.     video[0].removeattribute("controls");  
00007.     $('.control').show().css({'bottom':-45});  
00008.     $('.loading').fadein(500);  
00009.     $('.caption').fadein(500);  
00010.    
00011.     //before everything get started  
00012.     video.on('loadedmetadata', function() {  
00013.         $('.caption').animate({'top':-45},300);  
00014.               
00015.         //set video properties  
00016.         $('.current').text(timeformat(0));  
00017.         $('.duration').text(timeformat(video[0].duration));  
00018.         updatevolume(0, 0.7);  
00019.               
00020.         //start to get video buffering data   
00021.         settimeout(startbuffer, 150);  
00022.               
00023.         //bind video events  
00024.         $('.videocontainer')  
00025.         .append('')  
00026.         .hover(function() {  
00027.             $('.control').stop().animate({'bottom':0}, 500);  
00028.             $('.caption').stop().animate({'top':0}, 500);  
00029.         }, function() {  
00030.             if(!volumedrag && !timedrag){  
00031.                 $('.control').stop().animate({'bottom':-45}, 500);  
00032.                 $('.caption').stop().animate({'top':-45}, 500);  
00033.             }  
00034.         })  
00035.         .on('click', function() {  
00036.             $('#init').remove();  
00037.             $('.btnplay').addclass('paused');  
00038.             $(this).unbind('click');  
00039.             video[0].play();  
00040.         });  
00041.         $('#init').fadein(200);  
00042.     });  
00043.       
00044.     //display video buffering bar  
00045.     var startbuffer = function() {  
00046.         var currentbuffer = video[0].buffered.end(0);  
00047.         var maxduration = video[0].duration;  
00048.         var perc = 100 * currentbuffer / maxduration;  
00049.         $('.bufferbar').css('width',perc '%');  
00050.               
00051.         if(currentbuffer < maxduration) {  
00052.             settimeout(startbuffer, 500);  
00053.         }  
00054.     };    
00055.       
00056.     //display current video play time  
00057.     video.on('timeupdate', function() {  
00058.         var currentpos = video[0].currenttime;  
00059.         var maxduration = video[0].duration;  
00060.         var perc = 100 * currentpos / maxduration;  
00061.         $('.timebar').css('width',perc '%');      
00062.         $('.current').text(timeformat(currentpos));   
00063.     });  
00064.       
00065.     //controls events  
00066.     //video screen and play button clicked  
00067.     video.on('click', function() { playpause(); } );  
00068.     $('.btnplay').on('click', function() { playpause(); } );  
00069.     var playpause = function() {  
00070.         if(video[0].paused || video[0].ended) {  
00071.             $('.btnplay').addclass('paused');  
00072.             video[0].play();  
00073.         }  
00074.         else {  
00075.             $('.btnplay').removeclass('paused');  
00076.             video[0].pause();  
00077.         }  
00078.     };  
00079.       
00080.     //speed text clicked  
00081.     $('.btnx1').on('click', function() { fastfowrd(this, 1); });  
00082.     $('.btnx3').on('click', function() { fastfowrd(this, 3); });  
00083.     var fastfowrd = function(obj, spd) {  
00084.         $('.text').removeclass('selected');  
00085.         $(obj).addclass('selected');  
00086.         video[0].playbackrate = spd;  
00087.         video[0].play();  
00088.     };  
00089.       
00090.     //stop button clicked  
00091.     $('.btnstop').on('click', function() {  
00092.         $('.btnplay').removeclass('paused');  
00093.         updatebar($('.progress').offset().left);  
00094.         video[0].pause();  
00095.     });  
00096.       
00097.     //fullscreen button clicked  
00098.     $('.btnfs').on('click', function() {  
00099.         if($.isfunction(video[0].webkitenterfullscreen)) {  
00100.             video[0].webkitenterfullscreen();  
00101.         }     
00102.         else if ($.isfunction(video[0].mozrequestfullscreen)) {  
00103.             video[0].mozrequestfullscreen();  
00104.         }  
00105.         else {  
00106.             alert('your browsers doesn\'t support fullscreen');  
00107.         }  
00108.     });  
00109.       
00110.     //light bulb button clicked  
00111.     $('.btnlight').click(function() {  
00112.         $(this).toggleclass('lighton');  
00113.           
00114.         //if lightoff, create an overlay  
00115.         if(!$(this).hasclass('lighton')) {  
00116.             $('body').append('');  
00117.             $('.overlay').css({  
00118.                 'position':'absolute',  
00119.                 'width':100 '%',  
00120.                 'height':$(document).height(),  
00121.                 'background':'#000',  
00122.                 'opacity':0.9,  
00123.                 'top':0,  
00124.                 'left':0,  
00125.                 'z-index':999  
00126.             });  
00127.             $('.videocontainer').css({  
00128.                 'z-index':1000  
00129.             });  
00130.         }  
00131.         //if lighton, remove overlay  
00132.         else {  
00133.             $('.overlay').remove();  
00134.         }  
00135.     });  
00136.       
00137.     //sound button clicked  
00138.     $('.sound').click(function() {  
00139.         video[0].muted = !video[0].muted;  
00140.         $(this).toggleclass('muted');  
00141.         if(video[0].muted) {  
00142.             $('.volumebar').css('width',0);  
00143.         }  
00144.         else{  
00145.             $('.volumebar').css('width', video[0].volume*100 '%');  
00146.         }  
00147.     });  
00148.       
00149.     //video events  
00150.     //video canplay event  
00151.     video.on('canplay', function() {  
00152.         $('.loading').fadeout(100);  
00153.     });  
00154.       
00155.     //video canplaythrough event  
00156.     //solve chrome cache issue  
00157.     var completeloaded = false;  
00158.     video.on('canplaythrough', function() {  
00159.         completeloaded = true;  
00160.     });  
00161.       
00162.     //video ended event  
00163.     video.on('ended', function() {  
00164.         $('.btnplay').removeclass('paused');  
00165.         video[0].pause();  
00166.     });  
00167.   
00168.     //video seeking event  
00169.     video.on('seeking', function() {  
00170.         //if video fully loaded, ignore loading screen  
00171.         if(!completeloaded) {   
00172.             $('.loading').fadein(200);  
00173.         }     
00174.     });  
00175.       
00176.     //video seeked event  
00177.     video.on('seeked', function() { });  
00178.       
00179.     //video waiting for more data event  
00180.     video.on('waiting', function() {  
00181.         $('.loading').fadein(200);  
00182.     });  
00183.       
00184.     //video progress bar  
00185.     //when video timebar clicked  
00186.     var timedrag = false;   /* check for drag event */  
00187.     $('.progress').on('mousedown', function(e) {  
00188.         timedrag = true;  
00189.         updatebar(e.pagex);  
00190.     });  
00191.     $(document).on('mouseup', function(e) {  
00192.         if(timedrag) {  
00193.             timedrag = false;  
00194.             updatebar(e.pagex);  
00195.         }  
00196.     });  
00197.     $(document).on('mousemove', function(e) {  
00198.         if(timedrag) {  
00199.             updatebar(e.pagex);  
00200.         }  
00201.     });  
00202.     var updatebar = function(x) {  
00203.         var progress = $('.progress');  
00204.           
00205.         //calculate drag position  
00206.         //and update video currenttime  
00207.         //as well as progress bar  
00208.         var maxduration = video[0].duration;  
00209.         var position = x - progress.offset().left;  
00210.         var percentage = 100 * position / progress.width();  
00211.         if(percentage > 100) {  
00212.             percentage = 100;  
00213.         }  
00214.         if(percentage < 0) {  
00215.             percentage = 0;  
00216.         }  
00217.         $('.timebar').css('width',percentage '%');    
00218.         video[0].currenttime = maxduration * percentage / 100;  
00219.     };  
00220.   
00221.     //volume bar  
00222.     //volume bar event  
00223.     var volumedrag = false;  
00224.     $('.volume').on('mousedown', function(e) {  
00225.         volumedrag = true;  
00226.         video[0].muted = false;  
00227.         $('.sound').removeclass('muted');  
00228.         updatevolume(e.pagex);  
00229.     });  
00230.     $(document).on('mouseup', function(e) {  
00231.         if(volumedrag) {  
00232.             volumedrag = false;  
00233.             updatevolume(e.pagex);  
00234.         }  
00235.     });  
00236.     $(document).on('mousemove', function(e) {  
00237.         if(volumedrag) {  
00238.             updatevolume(e.pagex);  
00239.         }  
00240.     });  
00241.     var updatevolume = function(x, vol) {  
00242.         var volume = $('.volume');  
00243.         var percentage;  
00244.         //if only volume have specificed  
00245.         //then direct update volume  
00246.         if(vol) {  
00247.             percentage = vol * 100;  
00248.         }  
00249.         else {  
00250.             var position = x - volume.offset().left;  
00251.             percentage = 100 * position / volume.width();  
00252.         }  
00253.           
00254.         if(percentage > 100) {  
00255.             percentage = 100;  
00256.         }  
00257.         if(percentage < 0) {  
00258.             percentage = 0;  
00259.         }  
00260.           
00261.         //update volume bar and video volume  
00262.         $('.volumebar').css('width',percentage '%');      
00263.         video[0].volume = percentage / 100;  
00264.           
00265.         //change sound icon based on volume  
00266.         if(video[0].volume == 0){  
00267.             $('.sound').removeclass('sound2').addclass('muted');  
00268.         }  
00269.         else if(video[0].volume > 0.5){  
00270.             $('.sound').removeclass('muted').addclass('sound2');  
00271.         }  
00272.         else{  
00273.             $('.sound').removeclass('muted').removeclass('sound2');  
00274.         }  
00275.           
00276.     };  
00277.   
00278.     //time format converter - 00:00  
00279.     var timeformat = function(seconds){  
00280.         var m = math.floor(seconds/60)<10 ? "0" math.floor(seconds/60) : math.floor(seconds/60);  
00281.         var s = math.floor(seconds-(m*60))<10 ? "0" math.floor(seconds-(m*60)) : math.floor(seconds-(m*60));  
00282.         return m ":" s;  
00283.     };  
00284. });  

运行效果:


智游教育 ©  河南智游臻龙教育科技有限公司 此网站均为永利国际的介绍,并非广告