QQ 1640076782

2015年05月29日

支持多浏览器的html5视频播放器

Filed under: 英语网站设计 — 标签：, — lifengwu @ 10:12 上午

随着html5越来越广泛的被使用于外贸网站的建设中，已经有很多的html5播放器可以将视频轻松插入到网页之中，从而使我们的网站页面更精彩，下面我们就来看一款非常不错的html5播放器MediaElement.js，它不仅能够添加我们常用的html5视频格式（mp4,m4v,mov），而且还支持回退方式，即使一些低版本的浏览器不支持HTML5播放也可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器（IE6、7、8、9, Firefox , Chrome , Opera , Safari , iOS , Android）

HTML5当中，可以直接使用标签<video>，它可以让你直接插入mp4、mov等格式的视频，但是这是浏览器默认的方式，播放的功能也比较单一，所以借助MediaElement.js可以实现丰富的播放效果。

我们先来看一下外观设置方法：

外观设置方法：只需要在对应的<video>标签中加入对应的class 类即可
<h3>Default Skin</h3>
<video width=”640″ height=”480″ src=”../video/test.mp4″ type=”video/mp4″
id=”player1″ poster=”../video/test.jpg”
controls=”controls” preload=”none”></video>
<h3>TED SKin</h3>
<video width=”640″ height=”480″ src=”../video/test.mp4″ type=”video/mp4″
id=”player1″ poster=”../video/test.jpg”
controls=”controls” preload=”none”></video>
<h3>WMP SKin</h3>
<video width=”640″ height=”480″ src=”../video/test.mp4″ type=”video/mp4″
id=”player1″ poster=”../video/test.jpg”
controls=”controls” preload=”none”></video>
MediaElement.js的调用方法
引用js脚本和css样式表 并放置在<head> 标签中。
<script src=”js/jquery.js”></script>
<script src=”js/mediaelement-and-player.min.js”></script>
<link rel=”stylesheet” href=”css/mediaelementplayer.css” />
调用视频文件
<video src=”testvideo.mp4″ width=”360″ height=”240″></video>
支持单一的h.264编码的视频文件（mp4）,该方式适用于firefox,chrome,safari,已经ie9以上版本的主流浏览器。
为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式
添加媒体支持如音频和视频格式，在</body>标签前添加以下代码
<script>
$(‘video,audio’).mediaelementplayer(/* Options */);
</script>
当然你还可以为自己创建MediaElementPlayer对象播放方式
<script>
var player = new MediaElementPlayer(‘#player’,/* Options */);
player.pause();
player.setSrc(‘mynewfile.mp4′);
player.play();
</script>
最后还需要为服务器添加 MIME-types
如果是Linux/Apache服务器，我们需要创建一个名为.htaccess的文件，让后上传到web服务器根的目录才能让浏览器正确识别。
使用windows/iis 服务器的朋友可以查看MIME types 在IIS6 和IIS7中的设置方法。
以下是官方提供的代码：
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm