目前已经有很多html5播放器可以使用，使用html5播放器可以轻松的在页面中插入媒体视频，从而使我们的web页面变得更加丰富多彩，所以今 天向大家推荐一款非常优秀的html5播放器MediaElement.js，它不仅能够添加我们常用的html5视频格式（mp4,m4v,mov）， 而且还支持回退方式，即一些低版本的浏览器不支持 HTML5 播放可以采取flash的方式进行播放，从而达到支持绝大部分的浏览器。

备注：我们都知道进入 HTML5 时代以后W3C组织为web视频播放加入了一个非常友好的标签<video>，它可以让你直接插入mp4、mov等格式的视频，但是这是浏览器默认的方式，播放的功能也比较单一，所以借助MediaElement.js可以实现丰富的播放效果。

目前MediaElement.js所能支持的浏览器如图

首先MediaElement.js支持三种外观显示

默认效果

ted-外观

wmp-外观

外观设置方法：只需要在对应的<video>标签中加入对应的class 类即可

<h2>Default Skin</h2>

<video width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"

    id="player1" poster="../media/echo-hereweare.jpg"

    controls="controls" preload="none"></video>
<h2>TED SKin</h2>

<video class="mejs-ted" width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"

    id="player1" poster="../media/echo-hereweare.jpg"

    controls="controls" preload="none"></video>
<h2>WMP SKin</h2>

<video class="mejs-wmp" width="640" height="360" src="../media/echo-hereweare.mp4" type="video/mp4"

    id="player1" poster="../media/echo-hereweare.jpg"

    controls="controls" preload="none"></video>

如何调用MediaElement.js ？ 
首先我们下载 MediaElement.js官方最新版

1.引用js脚本和css样式表 并放置在<head> 标签中。

<script src="jquery.js"></script>

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

<link rel="stylesheet" href="mediaelementplayer.css" />

2. 调用视频文件

<video src="myvideo.mp4" width="320" height="240"></video>

支持单一的h.264编码的视频文件（mp4）,该方式适用于firefox,chrome,safari,已经ie9以上版本的主流浏览器。

flash回退

为了支持低版本的浏览器以及对不同用户群的支持，MediaElement.js提供了flash回退的方式，你可以采用以下代码进行调用

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">

    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->

    <source type="video/mp4" src="myvideo.mp4" />

    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->

    <source type="video/webm" src="myvideo.webm" />

    <!-- Ogg/Vorbis for older Firefox and Opera versions -->

    <source type="video/ogg" src="myvideo.ogv" />

    <!-- Optional: Add subtitles for each language -->

    <track kind="subtitles" src="subtitles.srt" srclang="en" />

    <!-- Optional: Add chapters -->

    <track kind="chapters" src="chapters.srt" srclang="en" />

    <!-- Flash fallback for non-<span class="wp_keywordlink_affiliate"><a href="http://www.dglives.com/tag/html5" title="查看HTML5中的全部文章" target="_blank">HTML5</a></span> browsers without JavaScript -->

    <object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">

        <param name="movie" value="flashmediaelement.swf" />

        <param name="flashvars" value="controls=true&file=myvideo.mp4" />

        <!-- Image as a last resort -->

        <img src="myvideo.jpg" width="320" height="240" title="No video playback capabilities" />

    </object>

</video>

3.添加媒体支持如音频和视频格式，在</body>标签前添加以下代码

<script>

$('video,audio').mediaelementplayer(/* Options */);

</script>

当然你还可以为自己创建MediaElementPlayer对象播放方式

<script>

var player = new MediaElementPlayer('#player',/* Options */);

// ... more code ...

player.pause();

player.setSrc('mynewfile.mp4');

player.play();

</script>

4.还需最后一步，为服务器添加 MIME-types 
如果是Linux/Apache服务器，我们需要创建一个名为.htaccess的文件，让后上传到web服务器根的目录才能让浏览器正确识别。 
使用windows/iis 服务器的朋友可以查看MIME types 在 IIS6 和 IIS7 中的设置方法。 
以下是官方提供的代码：

AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm

之前我试过以上代码，貌似部分浏览器打不开视频，识别不准确，然后又从上网找了一个完美版的

AddType video/ogg ogv

AddType video/mp4 mp4 m4v

AddType video/webm webm

AddType audio/ogg ogg

AddType audio/ogg oga

AddType audio/wav wav

AddType audio/mpeg mp3

AddType audio/mp4 mp4

AddType audio/mp4 mpa

将以上代码粘贴到文本中，保存为.htaccess文件后上传到服务器根目录即可，建议上传一份到存放视频文件夹相同的位置。

MediaElement.js支持插入视频缩略图

让视频正在加载的时候你可以先显示出视频图片，在vedio标签中插入poster即可

<video width="640" height="360" id="player2" poster="../media/echo-hereweare.jpg" controls preload="none">

视频缩略图演示效果

MediaElement.js完美支持音频播放 
想要MediaElement.js支持音频播放那是再简单不过了，只需添加一行代码即可。

<audio id="player" src="../media/AirReview-Landmarks-02-ChasingCorporate.mp3" type="audio/mp3" controls>

音频演示地址

MediaElement.js 支持字幕插入

我们都知道有些原生视频是没内嵌字幕的，所以我们需要额外对视频添加字幕，幸运的是MediaElement.js支持着项功能，我们可以直接进行调用。 
为视频添加<track>元素，我们可以参考以下代码进行设置

<video width="320" height="240" poster="poster.jpg" controls="controls" preload="none">

    <source type="video/mp4" src="myvideo.mp4" />

    <track kind="subtitles" src="subtitles.srt" srclang="en" />

</video>

选择自动添加指定语言的字幕

jQuery(document).ready(function($) {

    $('audio,video').mediaelementplayer({

        // automatically create these translations on load

        translations:['es','ar','yi','zh-cn'],

        // allow the user to add additional translations

        translationSelector: true,

        // start with English automatically turned on

        startLanguage: 'en'

    });

});

演示地址

以上是MediaElement.js的简要介绍，想了解更多详细内容可以访问 MediaElement.js官网

如果你使用的是wordpress程序，也可以直接搜索wordpress MediaElement.js 官方插件 进行安装，使用方法跟前面介绍的类似。

HTML5播放器 MediaElement.js 使用方法的更多相关文章

  1. 7款超具个性的HTML5播放器

    这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...

  2. HTML5 播放器

    之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...

  3. HTML5播放器实例

    鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...

  4. .NET MVC对接POLYV——HTML5播放器播放加密视频

    官方参考文档:http://dev.polyv.net/2017/videoproduct/v-playerapi/html5player/html5-docs/ 1.上传视频之前根据自己需要对所上传 ...

  5. wap html5播放器和直播开发小结

    此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 去年年中的时候,借着产品改版的机会,将之前的h5播放器好好整理重构了一番.之前的h5播放器较为简陋,有几个大 ...

  6. HTML5——播放器

    有了H5的Video,妈妈再也不用担心我没安Flash插件了 根据Video提供的方法和属性,简单练习了一下,不说废话,直接上图片和代码 <html><head><tit ...

  7. 基于MFC的Media Player播放器的控件方法和属性介绍

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 因为使用第三方多媒体库或是第三方控件(Media Player)辅助播放,我们则必须要了解到Media Player控件的一些属性 和方法 ...

  8. HTML5播放器FlowPlayer的极简风格效果

    在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.

  9. CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug

    如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...

随机推荐

  1. .NET Core Generic Host Windows服务部署使用Topshelf

    此文源于前公司在迁移项目到.NET Core的过程中,希望使用Generic Host来管理定时任务程序时,没法部署到Windows服务的问题,而且官方也没给出解决方案,只能关注一下官方issue # ...

  2. 结构体：HASH表模板

    这种 HASHMAP 就是一个链式前向星的表: 其中: init 函数:hashmap 创建初始化: check 函数:寻找 hash 表中是否有需要查找的值,若有则返回 1 ,否则返回 0 :遍历方 ...

  3. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.1 规则文件

    转载至:https://blog.csdn.net/wo541075754/article/details/75150267 一个标准的规则文件的格式为已“.drl”结尾的文本文件,因此可以通过记事本 ...

  4. python lambda匿名函数

    Python的一个很重要的方面就是:函数式编程(functional programming),即可以再原本传递参数和值的地方传递函数. lambda x: x%3 == 0 和以下等价: def b ...

  5. 使用prolog逻辑语言解决爱因斯坦斑马难题

    如果你想获得更好的阅读体验,可以前往我在 github 上的博客进行阅读,http://lcomplete.github.io/blog/2013/06/28/sevenlang-prolog/. 目 ...

  6. C51 头文件中的 extern

    C51 头文件使用 extern 的目的是声明外部变量或函数. 使用注意: 只放在  .h 文件中. 声明时不用赋值. extern 只是声明不是定义.

  7. MongoDB GUI（ Robo 3T） Shell使用及操作

    Robo 3T 下载及使用 之前叫 Robomongo,后面被收购了,改名 Robo 3T . 下载链接:https://robomongo.org/download (需要FQ) 安装步骤省略,下一 ...

  8. OOD与OOP的思想的感悟

    Walking on water and developing software from a specification are easy if both are frozen) -Edward V ...

  9. webpack创建library及从零开始发布一个npm包

    最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...

  10. $(function(){}) ，$(document).ready(function(){})，window.onload = function(){...}，$(window).load(function(){...})区别

    1. 写法:      $(function(){}) ,$(document).ready(function(){})是一样的 2. 时间: window.onload和$(window).load ...