HTML5移动开发之路(5)——制作一个漂亮的视频播放器_第1页
HTML5移动开发之路(5)——制作一个漂亮的视频播放器_第2页
HTML5移动开发之路(5)——制作一个漂亮的视频播放器_第3页
HTML5移动开发之路(5)——制作一个漂亮的视频播放器_第4页
HTML5移动开发之路(5)——制作一个漂亮的视频播放器_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 在前面几篇文章中介绍了HTML5的特点和需要掌握的基础知识，下面我们开始真正的体验一下HTML5的优势，我们开始制作一个漂亮的视频播放器吧先别急，在开始制作之前先了解一下视频文件的基本知识。一、视频的格式目前比较主流和使用比较的的视频格式主要有：avi、rmvb、wmv、mpeg4、ogg、webm。这些视频都是由视频、音频、编码格式三部分组成的。在HTML5中，根据浏览器的不同，目前拥有多套不同的编码器：H.264(个人不看好)：这个编码器是苹果系统包括苹果手机中的编码器，拥有专利的视频编码器。在编码及传输过程中的任何部分都可能需要收取专利费。因此Safari（苹果的浏览器）和Intene

2、t Explorer支持该编码器，但是在开源已经成为大势的当下，还在浏览器中收取专利费，个人实在是不看好啊。Theora:这是一个不受专利限制的编码格式，并且对所有等级的编码、传输以及回放免费的视频编码器。Chrome、Firefox以及Opera支持该编码器。VP8：该视频编码器与Theora相似，但是其拥有者是Google公司，Google公司已经开源，因此不需要专利费。Chrome、Firefox以及Opera支持该编码器。AAC:音频编码器，与H.264相同，该音频编码器拥有专利限制，Safari、Chrome和Internet Explorer支持该音频编码器。MP3：也是一个专利技

3、术，Safari、Chrome和Internet Explorer支持该音频编码器。PCM:存储由模拟数字转换器编码的完整数据，在音频CD上存储数据的一种格式。是以中国无损编码器，它的文件大小一般是AAC和MP3文件的几倍，Safari、Firefox和Internet Explorer支持该音频编码器。Vorbis:文件扩展名为.ogg，有时候也被称为Ogg Vorbis,该音频编码器不受专利保护，因此版权免费。支持的浏览器包括Chrome、Firefox和Opera.主流浏览器和设备支持的视频和音频浏览器容器视频音频Apple iosMP4H.264ACC、MP3、PCMApple Saf

4、ariMP4H.264 Google Android(pre v.3)-Google ChromeMP4、OGG、WebMTheora、VP8ACC、MP3、VorbisMicrosoft Internet ExplorerMP4H.264ACC、MP3Mozilla FirefoxOGG、WebMTheora、VP8PCM、VorbisOperaOGG、WebMTheora、VP8PCM、Vorbis二、HTML5中的<vido>属性在html5中可以使用<audio>或者<video>标签播放html5媒体，使用方式如下：html v

5、iew plain copy print?1. <video src="move.mp4"></video>  video标签中有很多属性，例如controls属性可以控制是否有控制台。html view plain copy print?1. <video src="move.mp4" controls="controls">  2.    

6、0;浏览器不支持HTML5的视频播放功能  3. </video>  从上面的视频格式中我们可以看到不同的浏览器支持不同的视频格式，这样我们可以采用<source>标签指定多种格式的视频，默认情况下浏览器会自动启动下载文件来确定其类型。html view plain copy print?1. <video width="400" controls="controls">  2.   

7、60; <source src="move.mp4"  type="video/mp4" />  3.     <source src="move.ogg"  type="video/ogg" />  4. </video>  三、制作视频播放器index.htmlhtml view

8、 plain copy print?1. <!DOCTYPE html>  2. <html>  3. <head>  4. <title>Demo 1 | Custom HTML5 Video Controls with jQuery</title>  5. <link rel="stylesheet"

9、0;href="./vendorstyle.css" />  6. <link rel="stylesheet" href="style.css" />  7. <script src="8. <!-if lt IE 9>  9. <script src="10. <!endif->  11.

10、<script src="./vendorscript.js"></script>  12. <script src="video.js"></script>  13. <!-if lt IE 9>  14. <script>  15. $(document).ready(function()   16.  

11、0;  $('.control').hide();  17.     $('.loading').fadeOut(500);  18.     $('.caption').fadeOut(500);  19. );  20. </script>  21. <!endif->  22. <link

12、60;rel="shortcut icon" href="23. </head>  24.   25. <body>  26. <!- Header ->  27. <header>  28.     <h1>Custom HTML5 Video Controls with jQ

13、uery</h1>  29.     <div id="backlinks">  30.         <a href="31.         <a href="">Visit inW »</a&g

14、t;  32.     </div>  33.     <div class="clearfix"></div>  34. </header>  35.   36. <!- Content ->  37. <section id="wrapper">

15、;  38.   39.     <!- Title ->  40.     <h2>Demo 1</h2>  41.     <h3>Custom HTML5 Video Controls</h3>  42.   43. <div&

16、#160;class="videoContainer">  44.       45.     <video id="myVideo" controls preload="auto" poster="poster.jpg" width="600" height="350" &g

17、t;  46.       <source src="47.       <source src="48.       <source src="49.       <p>Your browser does not

18、60;support the video tag.</p>  50.     </video>  51.     <div class="caption">This is HTML5 video with custom controls</div>  52.   

19、0; <div class="control">  53.   54.         <div class="topControl">  55.             <div class="progress&quo

20、t;>  56.                 <span class="bufferBar"></span>  57.                 <span

21、0;class="timeBar"></span>  58.             </div>  59.             <div class="time">  60.   &

22、#160;             <span class="current"></span> /   61.                 <span class="duration&q

23、uot;></span>   62.             </div>  63.         </div>  64.           65.    

24、;     <div class="btmControl">  66.             <div class="btnPlay btn" title="Play/Pause video"></div>  67.   

25、          <div class="btnStop btn" title="Stop video"></div>  68.             <div class="spdText btn">

26、;Speed: </div>  69.             <div class="btnx1 btn text selected" title="Normal speed">x1</div>  70.        &

27、#160;    <div class="btnx3 btn text" title="Fast forward x3">x3</div>  71.             <div class="btnFS btn" title=&quo

28、t;Switch to full screen"></div>  72.             <div class="btnLight lighton btn" title="Turn on/off light"></div>  73.  &#

29、160;          <div class="volume" title="Set volume">  74.                 <span class="volumeBar">

30、;</span>  75.             </div>  76.             <div class="sound sound2 btn" title="Mute/Unmute sound&

31、quot;></div>  77.         </div>  78.           79.     </div>  80.     <div class="loading"></

32、div>  81. </div>  82.   83.     <!- Navigation ->  84.     <nav id="navigation">  85.         <ul>  86. 

33、0;           <li class="currentbtn"><a href="#" title="Demo 1">DEMO 1</a></li>  87.             

34、<li><a href="./demo2/" title="Demo 2">DEMO 2</a></li>  88.         </ul>  89.         <div class="clearfix">&

35、lt;/div>      90.     </nav>  91. </section>  92.   93. <!- Footer ->  94. <footer>  95.     <span>© 2011 <a href=

36、"">inW</a>. Design by <a href="96. </footer>  97. </body>  98. </html>  style.csscss view plain copy print?1. /* video container */  2. .videoContainer  3.

37、     width:600px;  4.     height:350px;  5.     position:relative;  6.     overflow:hidden;  7.     background:#000;  8.     color

38、:#ccc;  9.   10.   11. /* video caption css */  12. .caption  13.     display:none;  14.     position:absolute;  15.     top:0;  16.  &

39、#160;  left:0;  17.     width:100%;  18.     padding:10px;  19.     color:#ccc;  20.     font-size:20px;  21.     font-weight:bold; 

40、60;22.     box-sizing: border-box;  23.     -ms-box-sizing: border-box;  24.     -webkit-box-sizing: border-box;  25.     -moz-box-sizing: border-box;  26. 

41、0;   background: #1F1F1F; /* fallback */  27.     background:-moz-linear-gradient(top,#242424 50%,#1F1F1F 50%,#171717 100%);  28.     background:-webkit-linear-gradient(top,#242424 50%,

42、#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&#

43、160;*/  34. .control  35.     background:#333;  36.     color:#ccc;  37.     position:absolute;  38.     bottom:0;  39.     left:0; 

44、60;40.     width:100%;  41.     z-index:5;  42.     display:none;  43.   44. /* control top part */  45. .topControl  46.     height:11px;&#

45、160; 47.     border-bottom:1px solid #404040;  48.     padding:1px 5px;  49.     background:#1F1F1F; /* fallback */  50.     background:-moz-linear-gradien

46、t(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%,#

47、171717 100%);  53.   54. /* control bottom part */  55. .btmControl  56.     clear:both;  57.     background: #1F1F1F; /* fallback */  58.   

48、0; 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(t

49、op,#242424 50%,#1F1F1F 50%,#171717 100%);  61.   62. .control div.btn   63.     float:left;  64.     width:34px;  65.     height:30px;  66.   

50、60; padding:0 5px;  67.     border-right:1px solid #404040;  68.     cursor:pointer;  69.   70. .control div.text  71.     font-size:12px;  72.   

51、;  font-weight:bold;  73.     line-height:30px;  74.     text-align:center;  75.     font-family:verdana;  76.     width:20px;  77.     bord

52、er:none;  78.     color:#777;  79.   80. .control div.btnPlay  81.     background:url(control.png) no-repeat 0 0;  82.     border-left:1px solid #404040; &

53、#160;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

54、0;-60px;  89.   90. .control div.spdText  91.     border:none;  92.     font-size:14px;  93.     line-height:30px;  94.     font-style:italic;  9

55、5.   96. .control div.selected  97.     font-size:15px;  98.     color:#ccc;  99.   100. .control div.sound  101.     background:url(control.png) no-repeat -88p

56、x -30px;  102.     border:none;  103.     float:right;  104.   105. .control div.sound2  106.     background:url(control.png) no-repeat -88px -60px !important;&

57、#160; 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)&

58、#160;no-repeat -44px 0;  113.     float:right;  114.   115. .control div.btnLight  116.     background:url(control.png) no-repeat -44px -60px;  117.     border-

59、left:1px solid #404040;  118.     float:right;  119.   120. .control div.lighton  121.     background:url(control.png) no-repeat -44px -30px !important;  122.   123.

60、   124. /* PROGRESS BAR CSS */  125. /* Progress bar */  126. .progress   127.     width:85%;  128.     height:10px;  129.     position:rela

61、tive;  130.     float:left;  131.     cursor:pointer;  132.     background: #444; /* fallback */  133.     background:-moz-linear-gradient(top,#666,#333); 

62、 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.    &

63、#160;-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;  

64、141.     -webkit-border-radius:10px;  142.   143. .progress span   144.     height:100%;  145.     position:absolute;  146.     top:0;  147.  

65、60;  left:0;  148.     display:block;  149.     border-radius:10px;  150.     -moz-border-radius:10px;  151.     -webkit-border-radius:10px;  152.   1

66、53. .timeBar  154.     z-index:10;  155.     width:0;  156.     background: #3FB7FC; /* fallback */  157.     background:-moz-linear-gradient(top,#A0DCFF 5

67、0%,#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%);

68、  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

69、60; 165.     z-index:5;  166.     width:0;  167.     background: #777;  168.     background:-moz-linear-gradient(top,#999,#666);  169.     background:

70、-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; 

71、 173.     -webkit-box-shadow:2px 0 5px #333;  174.   175. /* time and duration */  176. .time  177.     width:15%;  178.     float:right;  1

72、79.     text-align:center;  180.     font-size:11px;  181.     line-height:12px;  182.   183.   184. /* VOLUME BAR CSS */  185. /* volume bar */&

73、#160; 186. .volume  187.     position:relative;  188.     cursor:pointer;  189.     width:70px;  190.     height:10px;  191.     float:right;

74、0; 192.     margin-top:10px;  193.     margin-right:10px;  194.   195. .volumeBar  196.     display:block;  197.     height:100%;  198.    &

75、#160;position:absolute;  199.     top:0;  200.     left:0;  201.     background-color:#eee;  202.     z-index:10;  203.   204.   205. /* OTHERS&#

76、160;CSS */  206. /* video screen cover */  207. .loading, #init  208.     position:absolute;  209.     top:0;  210.     left:0;  211.   

77、0; width:100%;  212.     height:100%;  213.     background:url(loading.gif) no-repeat 50% 50%;  214.     z-index:2;  215.     display:none;  216. 

78、0; 217. #init  218.     background:url(bigplay.png) no-repeat 50% 50% !important;  219.     cursor:pointer;  220.   video.jsjavascript view plain copy print?1. $(document).ready(fu

79、nction()  2.     /INITIALIZE  3.     var video = $('#myVideo');  4.       5.     /remove default control when JS loaded  6

80、.     video0.removeAttribute("controls");  7.     $('.control').show().css('bottom':-45);  8.     $('.loading').fadeIn(500);  9.     $('.caption').f

81、adeIn(500);  10.    11.     /before everything get started  12.     video.on('loadedmetadata', function()   13.         $('.caption').

82、animate('top':-45,300);  14.               15.         /set video properties  16.         $('.current').

83、text(timeFormat(0);  17.         $('.duration').text(timeFormat(video0.duration);  18.         updateVolume(0, 0.7);  19.          &

84、#160;    20.         /start to get video buffering data   21.         setTimeout(startBuffer, 150);  22.       

85、0;       23.         /bind video events  24.         $('.videoContainer')  25.         .append('<div

86、 id="init"></div>')  26.         .hover(function()   27.             $('.control').stop().animate('bottom':0, 500);  

87、;28.             $('.caption').stop().animate('top':0, 500);  29.         , function()   30.          &#

88、160;  if(!volumeDrag && !timeDrag)  31.                 $('.control').stop().animate('bottom':-45, 500);  32.        

89、;         $('.caption').stop().animate('top':-45, 500);  33.               34.         )  35.  

90、0;      .on('click', function()   36.             $('#init').remove();  37.             $('.btnPlay&

91、#39;).addClass('paused');  38.             $(this).unbind('click');  39.             video0.play();  40.      

92、;   );  41.         $('#init').fadeIn(200);  42.     );  43.       44.     /display video buffering bar  45. 

93、60;   var startBuffer = function()   46.         var currentBuffer = video0.buffered.end(0);  47.         var maxduration = video0.dura

94、tion;  48.         var perc = 100 * currentBuffer / maxduration;  49.         $('.bufferBar').css('width',perc+'%');  50.  

95、60;            51.         if(currentBuffer < maxduration)   52.             setTimeout(startBuffer, 500);&

96、#160; 53.           54.         55.       56.     /display current video play time  57.     video.on('

97、;timeupdate', function()   58.         var currentPos = video0.currentTime;  59.         var maxduration = video0.duration;  60.    

98、;     var perc = 100 * currentPos / maxduration;  61.         $('.timeBar').css('width',perc+'%');      62.     

99、0;   $('.current').text(timeFormat(currentPos);   63.     );  64.       65.     /CONTROLS EVENTS  66.     /video screen and play

100、0;button clicked  67.     video.on('click', function()  playpause();  );  68.     $('.btnPlay').on('click', function()  playpause();  );  69.  

101、60;  var playpause = function()   70.         if(video0.paused | video0.ended)   71.             $('.btnPlay').addClass('pa

102、used');  72.             video0.play();  73.           74.         else   75.      

103、60;      $('.btnPlay').removeClass('paused');  76.             video0.pause();  77.           78.     &#

104、160; 79.       80.     /speed text clicked  81.     $('.btnx1').on('click', function()  fastfowrd(this, 1); );  82.     $('.btnx3&

105、#39;).on('click', function()  fastfowrd(this, 3); );  83.     var fastfowrd = function(obj, spd)   84.         $('.text').removeClass('selected');

106、  85.         $(obj).addClass('selected');  86.         video0.playbackRate = spd;  87.         video0.play();  88.  

107、     89.       90.     /stop button clicked  91.     $('.btnStop').on('click', function()   92.         $(

108、9;.btnPlay').removeClass('paused');  93.         updatebar($('.progress').offset().left);  94.         video0.pause();  95.     );  96. 

109、0;     97.     /fullscreen button clicked  98.     $('.btnFS').on('click', function()   99.         if($.isFunction(video0.webkitEnterFulls

110、creen)   100.             video0.webkitEnterFullscreen();  101.              102.         else if ($

111、.isFunction(video0.mozRequestFullScreen)   103.             video0.mozRequestFullScreen();  104.           105.         else&

112、#160;  106.             alert('Your browsers doesn't support fullscreen');  107.           108.     );  109.

113、       110.     /light bulb button clicked  111.     $('.btnLight').click(function()   112.         $(this).toggleClass('lighton');

114、60; 113.           114.         /if lightoff, create an overlay  115.         if(!$(this).hasClass('lighton')   

115、116.             $('body').append('<div class="overlay"></div>');  117.             $('.overlay').css(  118.

116、                'position':'absolute',  119.                 'width':100+'%',  120. 

117、0;               'height':$(document).height(),  121.                 'background':'#000',  122. 

118、0;               'opacity':0.9,  123.                 'top':0,  124.       

119、0;         'left':0,  125.                 'z-index':999  126.             );&#

120、160; 127.             $('.videoContainer').css(  128.                 'z-index':1000  129.             );  130.           131.         /if lighton,

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论