Home思洋影视事业部网站建设知识库
0 Comments

HTML 5、CSS3、JS开发播放器完全指南(1)

发布于：2013-07-08  |   作者：广州网站建设  |   已聚集：人围观

导读：毫无疑问HTML5已经是大势所趋，知名视频网站YouTube在两年前就开始推广HTML5播放器来代替Flash。虽然国内还没有完全普及HTML5浏览器，但在各大本土浏览器厂商的努力下，支持HTML5的浏览器在中国浏览器市场的占有率也在不断增长中。本教程将会手把手地教你制作一个基于HTML5& CSS3& JavaScript 技术的视频播放器。

1.下载MediaElement.js

首先下载MediaElement.js脚本文件，这是一个开源的HTML5音、视频插件，解压后你会得到3个文件—— “flashmediaelement.swf”、 “mediaelement-and-player.min.js”和 “silverlightmediaelement.xap” ，分别是使用Flash、 JavaScript和 SilverLight实现视频播放，并且新建一个”js”文件夹并把它们放进去（当然本例中并不需要 “flashmediaelement.swf” 和 “silverlightmediaelement.xap” 两个文件，可以删去。）。
广州网站建设,网站建设,广州网页设计,广州网站设计

2.HTML标记

首先需要链接(link)一个jQuery库，这里使用的是Google托管的jQuery库。然后我们在链接”mediaelement-and-player.min.js”文件和CSS文件。



    
	
  1. 
		<head>   
    2. 
	
  2. 
		    <title>Video Player</title>   
    3. 
	
  3. 
		    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>   
    4. 
	
  4. 
		    <script src="js/mediaelement-and-player.min.js"></script>   
    5. 
	
  5. 
		    <link rel="stylesheet" href="css/style.css" media="screen">   
    6. 
	
  6. 
		</head> 
    7. 




	当然我们还需要添加一个HTML5 video标记来创建一个视频播放器，再添加一些属性将它初始化。（注：poster是指视频的预览图）




    
	
  1. 
		<video width="640" height="267" poster="media/cars.png">   
    2. 
	
  2. 
		    <source src="media/cars.mp4" type="video/mp4">   
    3. 
	
  3. 
		</video> 
    4. 




	接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有：



	alwaysShowControls – “true”则设置video控制面板永远显示，”false”则在鼠标移走后隐藏。



	videoVolume – “horizontal”设置音量滑动控制器为水平



	其它功能：暂停播放、前进播放、声音和全屏




    
	
  1. 
		<script type="text/javascript">// <![CDATA[   
    2. 
	
  2. 
		$(document).ready(function() {   
    3. 
	
  3. 
		    $('video').mediaelementplayer({   
    4. 
	
  4. 
		        alwaysShowControls: true,   
    5. 
	
  5. 
		        videoVolume: 'horizontal',   
    6. 
	
  6. 
		        features: ['playpause','progress','volume','fullscreen']   
    7. 
	
  7. 
		    });   
    8. 
	
  8. 
		});   
    9. 
	
  9. 
		// ]]></script> 
    10. 




	更多设置请查阅MediaElement.js的设置文档。



	3.播放器基本样式设计



	先修改一下样式设置：




    
	
  1. 
		.mejs-inner,   
    2. 
	
  2. 
		.mejs-inner div,   
    3. 
	
  3. 
		.mejs-inner a,   
    4. 
	
  4. 
		.mejs-inner span,   
    5. 
	
  5. 
		.mejs-inner button,   
    6. 
	
  6. 
		.mejs-inner img {   
    7. 
	
  7. 
		    margin: 0;   
    8. 
	
  8. 
		    padding: 0;   
    9. 
	
  9. 
		    border: none;   
    10. 
	
  10. 
		    outline: none;   
    11. 
	
  11. 
		} 
    12. 




	再给video container添加样式，下面的代码全部都是用来控制布局的，没有对播放器样式做任何修改。




    
	
  1. 
		.mejs-container {   
    2. 
	
  2. 
		    position: relative;   
    3. 
	
  3. 
		    background: #000000;   
    4. 
	
  4. 
		}    
    5. 
	
  5. 
		    
    6. 
	
  6. 
		.mejs-inner {   
    7. 
	
  7. 
		    position: relative;   
    8. 
	
  8. 
		    width: inherit;   
    9. 
	
  9. 
		    height: inherit;   
    10. 
	
  10. 
		}    
    11. 
	
  11. 
		    
    12. 
	
  12. 
		.me-plugin { position: absolute; }    
    13. 
	
  13. 
		    
    14. 
	
  14. 
		.mejs-container-fullscreen .mejs-mediaelement,   
    15. 
	
  15. 
		.mejs-container-fullscreen video,   
    16. 
	
  16. 
		.mejs-embed,   
    17. 
	
  17. 
		.mejs-embed body,   
    18. 
	
  18. 
		.mejs-mediaelement {   
    19. 
	
  19. 
		    width: 100%;   
    20. 
	
  20. 
		    height: 100%;   
    21. 
	
  21. 
		}    
    22. 
	
  22. 
		    
    23. 
	
  23. 
		.mejs-embed,   
    24. 
	
  24. 
		.mejs-embed body {   
    25. 
	
  25. 
		    margin: 0;   
    26. 
	
  26. 
		    padding: 0;   
    27. 
	
  27. 
		    overflow: hidden;   
    28. 
	
  28. 
		}    
    29. 
	
  29. 
		    
    30. 
	
  30. 
		.mejs-container-fullscreen {   
    31. 
	
  31. 
		    position: fixed;   
    32. 
	
  32. 
		    left: 0;   
    33. 
	
  33. 
		    top: 0;   
    34. 
	
  34. 
		    right: 0;   
    35. 
	
  35. 
		    bottom: 0;   
    36. 
	
  36. 
		    overflow: hidden;   
    37. 
	
  37. 
		    z-index: 1000;   
    38. 
	
  38. 
		}    
    39. 
	
  39. 
		    
    40. 
	
  40. 
		.mejs-background,   
    41. 
	
  41. 
		.mejs-mediaelement,   
    42. 
	
  42. 
		.mejs-poster,   
    43. 
	
  43. 
		.mejs-overlay {   
    44. 
	
  44. 
		    position: absolute;   
    45. 
	
  45. 
		    top: 0;   
    46. 
	
  46. 
		    left: 0;   
    47. 
	
  47. 
		}    
    48. 
	
  48. 
		    
    49. 
	
  49. 
		.mejs-poster img { display: block; } 
    50. 




	HTML5+CSS3+jQuery制作视频播放器完全指南



	4.控制面板样式设置

	广州网站建设,网站建设,广州网页设计,广州网站设计



	让我们先从添加“播放按钮”开始：




    
	
  1. 
		.mejs-overlay-play { cursor: pointer; }      
    2. 
	
  2. 
		.mejs-inner .mejs-overlay-button {   
    3. 
	
  3. 
		    position: absolute;   
    4. 
	
  4. 
		    top: 50%;   
    5. 
	
  5. 
		    left: 50%;   
    6. 
	
  6. 
		    width: 50px;   
    7. 
	
  7. 
		    height: 50px;   
    8. 
	
  8. 
		    margin: -25px 0 0 -25px;   
    9. 
	
  9. 
		    background: url(../img/play.png) no-repeat;   
    10. 
	
  10. 
		} 
    11. 




	接下来再添加视频控制器布局：将它放在视频底部，高度为34px，再添加一个背景颜色，配合RGBA来设置透明度。最后给按钮添加基本样式和图元。




    
	
  1. 
		.mejs-container .mejs-controls {   
    2. 
	
  2. 
		    position: absolute;   
    3. 
	
  3. 
		    width: 100%;   
    4. 
	
  4. 
		    height: 34px;   
    5. 
	
  5. 
		    left: 0;   
    6. 
	
  6. 
		    bottom: 0;   
    7. 
	
  7. 
		    background: rgb(0,0,0);   
    8. 
	
  8. 
		    background: rgba(0,0,0, .7);   
    9. 
	
  9. 
		}    
    10. 
	
  10. 
		    
    11. 
	
  11. 
		.mejs-controls .mejs-button button {   
    12. 
	
  12. 
		    display: block;   
    13. 
	
  13. 
		    cursor: pointer;   
    14. 
	
  14. 
		    width: 16px;   
    15. 
	
  15. 
		    height: 16px;   
    16. 
	
  16. 
		    background: transparent url(../img/controls.png);   
    17. 
	
  17. 
		} 
    18. 




	HTML5+CSS3+jQuery制作视频播放器完全指南


			

			

					 标签：
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机