（转载）HTML5移动开发之路（5）——制作一个漂亮的视频播放器

在前面几篇文章中介绍了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中的<vido>属性

在html5中可以使用<audio>或者<video>标签播放html5媒体，使用方式如下：

 

  1. <video src="move.mp4"></video>  

video标签中有很多属性，例如controls属性可以控制是否有控制台。

  1. <video src="move.mp4" controls="controls">  
  2.     浏览器不支持HTML5的视频播放功能  
  3. </video>  


从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用<source>标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。

  1. <video width="400" controls="controls">  
  2.     <source src="move.mp4"  type="video/mp4" />  
  3.     <source src="move.ogg"  type="video/ogg" />  
  4. </video>  


三、制作视频播放器

index.html

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>Demo 1 | Custom HTML5 Video Controls with jQuery</title>  
  5. <link rel="stylesheet" href="../vendorstyle.css" />  
  6. <link rel="stylesheet" href="style.css" />  
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  8. <!--[if lt IE 9]>  
  9. <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  
  10. <![endif]-->  
  11. <script src="../vendorscript.js"></script>  
  12. <script src="video.js"></script>  
  13. <!--[if lt IE 9]>  
  14. <script>  
  15. $(document).ready(function() {  
  16.     $('.control').hide();  
  17.     $('.loading').fadeOut(500);  
  18.     $('.caption').fadeOut(500);  
  19. });  
  20. </script>  
  21. <![endif]-->  
  22. <link rel="shortcut icon" href="http://www.inwebson.com/wp-content/themes/inwebson/favicon.ico" />  
  23. </head>  
  24.   
  25. <body>  
  26. <!-- Header -->  
  27. <header>  
  28.     <h1>Custom HTML5 Video Controls with jQuery</h1>  
  29.     <div id="backlinks">  
  30.         <a href="http://www.inwebson.com/custom-html5-video-controls-with-jquery-and-css/">BACK TO ARTICLE »</a>  
  31.         <a href="http://www.inwebson.com">Visit inWebson.com »</a>  
  32.     </div>  
  33.     <div class="clearfix"></div>  
  34. </header>  
  35.   
  36. <!-- Content -->  
  37. <section id="wrapper">  
  38.   
  39.     <!-- Title -->  
  40.     <h2>Demo 1</h2>  
  41.     <h3>Custom HTML5 Video Controls</h3>  
  42.   
  43. <div class="videoContainer">  
  44.       
  45.     <video id="myVideo" controls preload="auto" poster="poster.jpg" width="600" height="350" >  
  46.       <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
  47.       <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
  48.       <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
  49.       <p>Your browser does not support the video tag.</p>  
  50.     </video>  
  51.     <div class="caption">This is HTML5 video with custom controls</div>  
  52.     <div class="control">  
  53.   
  54.         <div class="topControl">  
  55.             <div class="progress">  
  56.                 <span class="bufferBar"></span>  
  57.                 <span class="timeBar"></span>  
  58.             </div>  
  59.             <div class="time">  
  60.                 <span class="current"></span> /   
  61.                 <span class="duration"></span>   
  62.             </div>  
  63.         </div>  
  64.           
  65.         <div class="btmControl">  
  66.             <div class="btnPlay btn" title="Play/Pause video"></div>  
  67.             <div class="btnStop btn" title="Stop video"></div>  
  68.             <div class="spdText btn">Speed: </div>  
  69.             <div class="btnx1 btn text selected" title="Normal speed">x1</div>  
  70.             <div class="btnx3 btn text" title="Fast forward x3">x3</div>  
  71.             <div class="btnFS btn" title="Switch to full screen"></div>  
  72.             <div class="btnLight lighton btn" title="Turn on/off light"></div>  
  73.             <div class="volume" title="Set volume">  
  74.                 <span class="volumeBar"></span>  
  75.             </div>  
  76.             <div class="sound sound2 btn" title="Mute/Unmute sound"></div>  
  77.         </div>  
  78.           
  79.     </div>  
  80.     <div class="loading"></div>  
  81. </div>  
  82.   
  83.     <!-- Navigation -->  
  84.     <nav id="navigation">  
  85.         <ul>  
  86.             <li class="currentbtn"><a href="#" title="Demo 1">DEMO 1</a></li>  
  87.             <li><a href="../demo2/" title="Demo 2">DEMO 2</a></li>  
  88.         </ul>  
  89.         <div class="clearfix"></div>      
  90.     </nav>  
  91. </section>  
  92.   
  93. <!-- Footer -->  
  94. <footer>  
  95.     <span>© 2011 <a href="http://www.inwebson.com">inWebson.com</a>. Design by <a href="http://www.inwebson.com/contactus">Kenny Ooi</a>. Powered by <a href="http://www.inwebson.com/html5/">HTML5</a> and <a href="http://www.inwebson.com/jquery/">jQuery</a>.</span>  
  96. </footer>  
  97. </body>  
  98. </html>  


style.css

  1. /* video container */  
  2. .videoContainer{  
  3.     width:600px;  
  4.     height:350px;  
  5.     position:relative;  
  6.     overflow:hidden;  
  7.     background:#000;  
  8.     color:#ccc;  
  9. }  
  10.   
  11. /* video caption css */  
  12. .caption{  
  13.     display:none;  
  14.     position:absolute;  
  15.     top:0;  
  16.     left:0;  
  17.     width:100%;  
  18.     padding:10px;  
  19.     color:#ccc;  
  20.     font-size:20px;  
  21.     font-weight:bold;  
  22.     box-sizing: border-box;  
  23.     -ms-box-sizing: border-box;  
  24.     -webkit-box-sizing: border-box;  
  25.     -moz-box-sizing: border-box;  
  26.     background: #1F1F1F; /* fallback */  
  27.     background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  28.     background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  29.     background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  30. }  
  31.   
  32. /*** VIDEO CONTROLS CSS ***/  
  33. /* control holder */  
  34. .control{  
  35.     background:#333;  
  36.     color:#ccc;  
  37.     position:absolute;  
  38.     bottom:0;  
  39.     left:0;  
  40.     width:100%;  
  41.     z-index:5;  
  42.     display:none;  
  43. }  
  44. /* control top part */  
  45. .topControl{  
  46.     height:11px;  
  47.     border-bottom:1px solid #404040;  
  48.     padding:1px 5px;  
  49.     background:#1F1F1F; /* fallback */  
  50.     background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  51.     background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  52.     background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  53. }  
  54. /* control bottom part */  
  55. .btmControl{  
  56.     clear:both;  
  57.     background: #1F1F1F; /* fallback */  
  58.     background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  59.     background:-webkit-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  60.     background:-o-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  
  61. }  
  62. .control div.btn {  
  63.     float:left;  
  64.     width:34px;  
  65.     height:30px;  
  66.     padding:0 5px;  
  67.     border-right:1px solid #404040;  
  68.     cursor:pointer;  
  69. }  
  70. .control div.text{  
  71.     font-size:12px;  
  72.     font-weight:bold;  
  73.     line-height:30px;  
  74.     text-align:center;  
  75.     font-family:verdana;  
  76.     width:20px;  
  77.     border:none;  
  78.     color:#777;  
  79. }  
  80. .control div.btnPlay{  
  81.     background:url(control.png) no-repeat 0 0;  
  82.     border-left:1px solid #404040;  
  83. }  
  84. .control div.paused{  
  85.     background:url(control.png) no-repeat 0 -30px;  
  86. }  
  87. .control div.btnStop{  
  88.     background:url(control.png) no-repeat 0 -60px;  
  89. }  
  90. .control div.spdText{  
  91.     border:none;  
  92.     font-size:14px;  
  93.     line-height:30px;  
  94.     font-style:italic;  
  95. }  
  96. .control div.selected{  
  97.     font-size:15px;  
  98.     color:#ccc;  
  99. }  
  100. .control div.sound{  
  101.     background:url(control.png) no-repeat -88px -30px;  
  102.     border:none;  
  103.     float:right;  
  104. }  
  105. .control div.sound2{  
  106.     background:url(control.png) no-repeat -88px -60px !important;  
  107. }  
  108. .control div.muted{  
  109.     background:url(control.png) no-repeat -88px 0 !important;  
  110. }  
  111. .control div.btnFS{  
  112.     background:url(control.png) no-repeat -44px 0;  
  113.     float:right;  
  114. }  
  115. .control div.btnLight{  
  116.     background:url(control.png) no-repeat -44px -60px;  
  117.     border-left:1px solid #404040;  
  118.     float:right;  
  119. }  
  120. .control div.lighton{  
  121.     background:url(control.png) no-repeat -44px -30px !important;  
  122. }  
  123.   
  124. /* PROGRESS BAR CSS */  
  125. /* Progress bar */  
  126. .progress {  
  127.     width:85%;  
  128.     height:10px;  
  129.     position:relative;  
  130.     float:left;  
  131.     cursor:pointer;  
  132.     background: #444; /* fallback */  
  133.     background:-moz-linear-gradient(top,#666,#333);  
  134.     background:-webkit-linear-gradient(top,#666,#333);  
  135.     background:-o-linear-gradient(top,#666,#333);  
  136.     box-shadow:0 2px 3px #333 inset;  
  137.     -moz-box-shadow:0 2px 3px #333 inset;  
  138.     -webkit-box-shadow:0 2px 3px #333 inset;  
  139.     border-radius:10px;  
  140.     -moz-border-radius:10px;  
  141.     -webkit-border-radius:10px;  
  142. }  
  143. .progress span {  
  144.     height:100%;  
  145.     position:absolute;  
  146.     top:0;  
  147.     left:0;  
  148.     display:block;  
  149.     border-radius:10px;  
  150.     -moz-border-radius:10px;  
  151.     -webkit-border-radius:10px;  
  152. }  
  153. .timeBar{  
  154.     z-index:10;  
  155.     width:0;  
  156.     background: #3FB7FC; /* fallback */  
  157.     background:-moz-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
  158.     background:-webkit-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
  159.     background:-o-linear-gradient(top,#A0DCFF 50%,#3FB7FC 50%,#16A9FF 100%);  
  160.     box-shadow:0 0 1px #fff;  
  161.     -moz-box-shadow:0 0 1px #fff;  
  162.     -webkit-box-shadow:0 0 1px #fff;  
  163. }  
  164. .bufferBar{  
  165.     z-index:5;  
  166.     width:0;  
  167.     background: #777;  
  168.     background:-moz-linear-gradient(top,#999,#666);  
  169.     background:-webkit-linear-gradient(top,#999,#666);  
  170.     background:-o-linear-gradient(top,#999,#666);  
  171.     box-shadow:2px 0 5px #333;  
  172.     -moz-box-shadow:2px 0 5px #333;  
  173.     -webkit-box-shadow:2px 0 5px #333;  
  174. }  
  175. /* time and duration */  
  176. .time{  
  177.     width:15%;  
  178.     float:right;  
  179.     text-align:center;  
  180.     font-size:11px;  
  181.     line-height:12px;  
  182. }  
  183.   
  184. /* VOLUME BAR CSS */  
  185. /* volume bar */  
  186. .volume{  
  187.     position:relative;  
  188.     cursor:pointer;  
  189.     width:70px;  
  190.     height:10px;  
  191.     float:right;  
  192.     margin-top:10px;  
  193.     margin-right:10px;  
  194. }  
  195. .volumeBar{  
  196.     display:block;  
  197.     height:100%;  
  198.     position:absolute;  
  199.     top:0;  
  200.     left:0;  
  201.     background-color:#eee;  
  202.     z-index:10;  
  203. }  
  204.   
  205. /* OTHERS CSS */  
  206. /* video screen cover */  
  207. .loading, #init{  
  208.     position:absolute;  
  209.     top:0;  
  210.     left:0;  
  211.     width:100%;  
  212.     height:100%;  
  213.     background:url(loading.gif) no-repeat 50% 50%;  
  214.     z-index:2;  
  215.     display:none;  
  216. }  
  217. #init{  
  218.     background:url(bigplay.png) no-repeat 50% 50% !important;  
  219.     cursor:pointer;  
  220. }  


video.js

    1. $(document).ready(function(){  
    2.     //INITIALIZE  
    3.     var video = $('#myVideo');  
    4.       
    5.     //remove default control when JS loaded  
    6.     video[0].removeAttribute("controls");  
    7.     $('.control').show().css({'bottom':-45});  
    8.     $('.loading').fadeIn(500);  
    9.     $('.caption').fadeIn(500);  
    10.    
    11.     //before everything get started  
    12.     video.on('loadedmetadata', function() {  
    13.         $('.caption').animate({'top':-45},300);  
    14.               
    15.         //set video properties  
    16.         $('.current').text(timeFormat(0));  
    17.         $('.duration').text(timeFormat(video[0].duration));  
    18.         updateVolume(0, 0.7);  
    19.               
    20.         //start to get video buffering data   
    21.         setTimeout(startBuffer, 150);  
    22.               
    23.         //bind video events  
    24.         $('.videoContainer')  
    25.         .append('<div id="init"></div>')  
    26.         .hover(function() {  
    27.             $('.control').stop().animate({'bottom':0}, 500);  
    28.             $('.caption').stop().animate({'top':0}, 500);  
    29.         }, function() {  
    30.             if(!volumeDrag && !timeDrag){  
    31.                 $('.control').stop().animate({'bottom':-45}, 500);  
    32.                 $('.caption').stop().animate({'top':-45}, 500);  
    33.             }  
    34.         })  
    35.         .on('click', function() {  
    36.             $('#init').remove();  
    37.             $('.btnPlay').addClass('paused');  
    38.             $(this).unbind('click');  
    39.             video[0].play();  
    40.         });  
    41.         $('#init').fadeIn(200);  
    42.     });  
    43.       
    44.     //display video buffering bar  
    45.     var startBuffer = function() {  
    46.         var currentBuffer = video[0].buffered.end(0);  
    47.         var maxduration = video[0].duration;  
    48.         var perc = 100 * currentBuffer / maxduration;  
    49.         $('.bufferBar').css('width',perc+'%');  
    50.               
    51.         if(currentBuffer < maxduration) {  
    52.             setTimeout(startBuffer, 500);  
    53.         }  
    54.     };    
    55.       
    56.     //display current video play time  
    57.     video.on('timeupdate', function() {  
    58.         var currentPos = video[0].currentTime;  
    59.         var maxduration = video[0].duration;  
    60.         var perc = 100 * currentPos / maxduration;  
    61.         $('.timeBar').css('width',perc+'%');      
    62.         $('.current').text(timeFormat(currentPos));   
    63.     });  
    64.       
    65.     //CONTROLS EVENTS  
    66.     //video screen and play button clicked  
    67.     video.on('click', function() { playpause(); } );  
    68.     $('.btnPlay').on('click', function() { playpause(); } );  
    69.     var playpause = function() {  
    70.         if(video[0].paused || video[0].ended) {  
    71.             $('.btnPlay').addClass('paused');  
    72.             video[0].play();  
    73.         }  
    74.         else {  
    75.             $('.btnPlay').removeClass('paused');  
    76.             video[0].pause();  
    77.         }  
    78.     };  
    79.       
    80.     //speed text clicked  
    81.     $('.btnx1').on('click', function() { fastfowrd(this, 1); });  
    82.     $('.btnx3').on('click', function() { fastfowrd(this, 3); });  
    83.     var fastfowrd = function(obj, spd) {  
    84.         $('.text').removeClass('selected');  
    85.         $(obj).addClass('selected');  
    86.         video[0].playbackRate = spd;  
    87.         video[0].play();  
    88.     };  
    89.       
    90.     //stop button clicked  
    91.     $('.btnStop').on('click', function() {  
    92.         $('.btnPlay').removeClass('paused');  
    93.         updatebar($('.progress').offset().left);  
    94.         video[0].pause();  
    95.     });  
    96.       
    97.     //fullscreen button clicked  
    98.     $('.btnFS').on('click', function() {  
    99.         if($.isFunction(video[0].webkitEnterFullscreen)) {  
    100.             video[0].webkitEnterFullscreen();  
    101.         }     
    102.         else if ($.isFunction(video[0].mozRequestFullScreen)) {  
    103.             video[0].mozRequestFullScreen();  
    104.         }  
    105.         else {  
    106.             alert('Your browsers doesn\'t support fullscreen');  
    107.         }  
    108.     });  
    109.       
    110.     //light bulb button clicked  
    111.     $('.btnLight').click(function() {  
    112.         $(this).toggleClass('lighton');  
    113.           
    114.         //if lightoff, create an overlay  
    115.         if(!$(this).hasClass('lighton')) {  
    116.             $('body').append('<div class="overlay"></div>');  
    117.             $('.overlay').css({  
    118.                 'position':'absolute',  
    119.                 'width':100+'%',  
    120.                 'height':$(document).height(),  
    121.                 'background':'#000',  
    122.                 'opacity':0.9,  
    123.                 'top':0,  
    124.                 'left':0,  
    125.                 'z-index':999  
    126.             });  
    127.             $('.videoContainer').css({  
    128.                 'z-index':1000  
    129.             });  
    130.         }  
    131.         //if lighton, remove overlay  
    132.         else {  
    133.             $('.overlay').remove();  
    134.         }  
    135.     });  
    136.       
    137.     //sound button clicked  
    138.     $('.sound').click(function() {  
    139.         video[0].muted = !video[0].muted;  
    140.         $(this).toggleClass('muted');  
    141.         if(video[0].muted) {  
    142.             $('.volumeBar').css('width',0);  
    143.         }  
    144.         else{  
    145.             $('.volumeBar').css('width', video[0].volume*100+'%');  
    146.         }  
    147.     });  
    148.       
    149.     //VIDEO EVENTS  
    150.     //video canplay event  
    151.     video.on('canplay', function() {  
    152.         $('.loading').fadeOut(100);  
    153.     });  
    154.       
    155.     //video canplaythrough event  
    156.     //solve Chrome cache issue  
    157.     var completeloaded = false;  
    158.     video.on('canplaythrough', function() {  
    159.         completeloaded = true;  
    160.     });  
    161.       
    162.     //video ended event  
    163.     video.on('ended', function() {  
    164.         $('.btnPlay').removeClass('paused');  
    165.         video[0].pause();  
    166.     });  
    167.   
    168.     //video seeking event  
    169.     video.on('seeking', function() {  
    170.         //if video fully loaded, ignore loading screen  
    171.         if(!completeloaded) {   
    172.             $('.loading').fadeIn(200);  
    173.         }     
    174.     });  
    175.       
    176.     //video seeked event  
    177.     video.on('seeked', function() { });  
    178.       
    179.     //video waiting for more data event  
    180.     video.on('waiting', function() {  
    181.         $('.loading').fadeIn(200);  
    182.     });  
    183.       
    184.     //VIDEO PROGRESS BAR  
    185.     //when video timebar clicked  
    186.     var timeDrag = false;   /* check for drag event */  
    187.     $('.progress').on('mousedown', function(e) {  
    188.         timeDrag = true;  
    189.         updatebar(e.pageX);  
    190.     });  
    191.     $(document).on('mouseup', function(e) {  
    192.         if(timeDrag) {  
    193.             timeDrag = false;  
    194.             updatebar(e.pageX);  
    195.         }  
    196.     });  
    197.     $(document).on('mousemove', function(e) {  
    198.         if(timeDrag) {  
    199.             updatebar(e.pageX);  
    200.         }  
    201.     });  
    202.     var updatebar = function(x) {  
    203.         var progress = $('.progress');  
    204.           
    205.         //calculate drag position  
    206.         //and update video currenttime  
    207.         //as well as progress bar  
    208.         var maxduration = video[0].duration;  
    209.         var position = x - progress.offset().left;  
    210.         var percentage = 100 * position / progress.width();  
    211.         if(percentage > 100) {  
    212.             percentage = 100;  
    213.         }  
    214.         if(percentage < 0) {  
    215.             percentage = 0;  
    216.         }  
    217.         $('.timeBar').css('width',percentage+'%');    
    218.         video[0].currentTime = maxduration * percentage / 100;  
    219.     };  
    220.   
    221.     //VOLUME BAR  
    222.     //volume bar event  
    223.     var volumeDrag = false;  
    224.     $('.volume').on('mousedown', function(e) {  
    225.         volumeDrag = true;  
    226.         video[0].muted = false;  
    227.         $('.sound').removeClass('muted');  
    228.         updateVolume(e.pageX);  
    229.     });  
    230.     $(document).on('mouseup', function(e) {  
    231.         if(volumeDrag) {  
    232.             volumeDrag = false;  
    233.             updateVolume(e.pageX);  
    234.         }  
    235.     });  
    236.     $(document).on('mousemove', function(e) {  
    237.         if(volumeDrag) {  
    238.             updateVolume(e.pageX);  
    239.         }  
    240.     });  
    241.     var updateVolume = function(x, vol) {  
    242.         var volume = $('.volume');  
    243.         var percentage;  
    244.         //if only volume have specificed  
    245.         //then direct update volume  
    246.         if(vol) {  
    247.             percentage = vol * 100;  
    248.         }  
    249.         else {  
    250.             var position = x - volume.offset().left;  
    251.             percentage = 100 * position / volume.width();  
    252.         }  
    253.           
    254.         if(percentage > 100) {  
    255.             percentage = 100;  
    256.         }  
    257.         if(percentage < 0) {  
    258.             percentage = 0;  
    259.         }  
    260.           
    261.         //update volume bar and video volume  
    262.         $('.volumeBar').css('width',percentage+'%');      
    263.         video[0].volume = percentage / 100;  
    264.           
    265.         //change sound icon based on volume  
    266.         if(video[0].volume == 0){  
    267.             $('.sound').removeClass('sound2').addClass('muted');  
    268.         }  
    269.         else if(video[0].volume > 0.5){  
    270.             $('.sound').removeClass('muted').addClass('sound2');  
    271.         }  
    272.         else{  
    273.             $('.sound').removeClass('muted').removeClass('sound2');  
    274.         }  
    275.           
    276.     };  
    277.   
    278.     //Time format converter - 00:00  
    279.     var timeFormat = function(seconds){  
    280.         var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);  
    281.         var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));  
    282.         return m+":"+s;  
    283.     };  
    284. });                                                                                                《本文章转自于：http://www.h5cn.com/html5/rumen/20144124.html》
posted @ 2015-04-22 14:22  绿罗兰  阅读(178)  评论(0)  编辑  收藏  举报