html5 js操作回退,HTML5播放器 MediaElement.js 使用方法

最新推荐文章于 2024-09-10 08:51:57 发布

局外狗

最新推荐文章于 2024-09-10 08:51:57 发布

阅读量391

点赞数

文章标签： html5 js操作回退

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

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

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

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

默认效果

ted-外观

wmp-外观

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

Default Skin

TED SKin

WMP SKin

如何调用MediaElement.js ？

首先我们下载 MediaElement.js官方最新版

1.引用js脚本和css样式表并放置在

标签中。

2. 调用视频文件

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

flash回退

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

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

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

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

var player = new MediaElementPlayer('#player',/*Options */); //... more code ... player.pause(); player.setSrc('mynewfile.mp4'); player.play();

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即可

MediaElement.js完美支持音频播放

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

MediaElement.js 支持字幕插入

我们都知道有些原生视频是没内嵌字幕的，所以我们需要额外对视频添加字幕，幸运的是MediaElement.js支持着项功能，我们可以直接进行调用。

为视频添加元素，我们可以参考以下代码进行设置

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

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' }); });