柠檬铺

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

—

由

柠檬铺
于

导读：毫无疑问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

2

3

4

5

6

7

8

<pre class="brush:html;toolbar:false;"><head>  

    <title>Video Player</title>  

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

</script>  

    <script src="js/mediaelement-and-player.min.js"></script>  

    <link rel="stylesheet" href="css/style.css" media="screen">  

</head></pre><p>

</p>

 

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

双击代码全选

1

2

3

4

<pre class="brush:css;toolbar:false;"><video width="640" height="267" poster="media/cars.png">  

    <source src="media/cars.mp4" type="video/mp4">  

</video></pre><p>

</p>

 

接下来我们再加入下面的代码来创建控制面板，需要添加的控制器或功能有：
alwaysShowControls – “true”则设置video控制面板永远显示，”false”则在鼠标移走后隐藏。
videoVolume – “horizontal”设置音量滑动控制器为水平
其它功能：暂停播放、前进播放、声音和全屏

双击代码全选

1

2

3

4

5

6

7

8

9

<script type="text/javascript">// <![CDATA[  

$(document).ready(function() {  

    $('video').mediaelementplayer({  

        alwaysShowControls: true,  

        videoVolume: 'horizontal',  

        features: ['playpause','progress','volume','fullscreen']  

    });  

});  

// ]]></script>

 

更多设置请查阅MediaElement.js的设置文档。
3.播放器基本样式设计
先修改一下样式设置：

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

<pre class="brush:css;toolbar:false;">.mejs-inner,  

.mejs-inner div,  

.mejs-inner a,  

.mejs-inner span,  

.mejs-inner button,  

.mejs-inner img {  

    margin: 0;  

    padding: 0;  

    border: none;  

    outline: none;  

}</pre><p>

</p>

 

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

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

.mejs-container {  

    position: relative;  

    background: #000000;  

}   

        

.mejs-inner {  

    position: relative;  

    width: inherit;  

    height: inherit;  

}   

        

.me-plugin { position: absolute; }   

        

.mejs-container-fullscreen .mejs-mediaelement,  

.mejs-container-fullscreen video,  

.mejs-embed,  

.mejs-embed body,  

.mejs-mediaelement {  

    width: 100%;  

    height: 100%;  

}   

        

.mejs-embed,  

.mejs-embed body {  

    margin: 0;  

    padding: 0;  

    overflow: hidden;  

}   

        

.mejs-container-fullscreen {  

    position: fixed;  

    left: 0;  

    top: 0;  

    right: 0;  

    bottom: 0;  

    overflow: hidden;  

    z-index: 1000;  

}   

        

.mejs-background,  

.mejs-mediaelement,  

.mejs-poster,  

.mejs-overlay {  

    position: absolute;  

    top: 0;  

    left: 0;  

}   

        

.mejs-poster img { display: block; }

 


4.控制面板样式设置
让我们先从添加“播放按钮”开始：

双击代码全选

1

2

3

4

5

6

7

8

9

10

.mejs-overlay-play { cursor: pointer; }     

.mejs-inner .mejs-overlay-button {  

    position: absolute;  

    top: 50%;  

    left: 50%;  

    width: 50px;  

    height: 50px;  

    margin: -25px 0 0 -25px;  

    background: url(../img/play.png) no-repeat;  

}

 

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

双击代码全选

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<pre class="brush:js;toolbar:false;">.mejs-container .mejs-controls {  

    position: absolute;  

    width: 100%;  

    height: 34px;  

    left: 0;  

    bottom: 0;  

    background: rgb(0,0,0);  

    background: rgba(0,0,0, .7);  

}   

        

.mejs-controls .mejs-button button {  

    display: block;  

    cursor: pointer;  

    width: 16px;  

    height: 16px;  

    background: transparent url(../img/controls.png);  

}</pre><p>

</p>