视频播放优化插件

最近太忙了，很久没来写博客了。今天做了一个视频播放的页面，用到了一款插件，觉得还不错，功能很强大，能替换封面，支持谷歌火狐等浏览器。

代码：

 1 <!-- poster为封面图 -->
 2        <video width="600" height="300" id="player2" poster="media/pic02.jpg" controls="controls" preload="none">
 3             <!-- MP4 source must come first for iOS -->
 4             <source type="video/mp4" src="media/movie.mp4" />
 5             <!-- WebM for Firefox 4 and Opera -->
 6             <source type="video/webm" src="mdeia/movie.webm" />
 7             <!-- OGG for Firefox 3 -->
 8             <source type="video/ogg" src="media/movie.ogv" />
 9         </video>
10         <span id="player2-mode" style="display: none;"></span>
11         <script type="text/javascript" src="js/jquery.js"></script>
12         <script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
13         <script type="text/javascript">
14              $('audio,video').mediaelementplayer({
15                   success: function(player, node) {
16                     $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
17                   }
18                 });
19         </script>

除了基本的css和js,另外还要注意，css文件夹还包括播放和全屏等控件的svg.

 

posted @ 2016-12-28 12:27  amilly009  阅读(336)  评论(0)  编辑  收藏  举报