HTML5入门

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

字号+ 作者：CodingSnail 来源：CSDN 2014-11-26 17:12 我要评论( )

在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识，下面我们开始真正的体验一下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中的<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://download.csdn.net/detail/lxq_xsyu/6787775

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5常用标签总结

    HTML5常用标签总结

    2016-03-23 14:02

  • html5学得好不好，看掌握多少标签

    html5学得好不好，看掌握多少标签

    2015-09-28 12:53

  • 小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    小强的HTML5移动开发之路（53）——jQueryMobile页面间参数传递

    2015-06-02 14:32

  • 小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

    小强的HTML5移动开发之路（52）——jquerymobile中的触控交互

    2015-06-02 14:34

网友点评
精彩导读
小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（4）——CSS2和CSS3

小强的HTML5移动开发之路（11）——链接，图片，表格，框架

小强的HTML5移动开发之路（11）——链接，图

小强的HTML5移动开发之路（40）——jqMobi中实践header定义的几

小强的HTML5移动开发之路（40）——jqMobi中

小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

小强的HTML5移动开发之路（35）——jQuery中

小强的HTML5移动开发之路（41）——jqMobi中Side Menu实现（类似

小强的HTML5移动开发之路（41）——jqMobi中S

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by H5CN 备案：鲁ICP备17035125号-2
HTML5入门 HTML5技术 canvas教程 专题学习 齐博CMS教程