博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5播放器 MediaElement.js 使用方法
阅读量:5055 次
发布时间:2019-06-12

本文共 2205 字,大约阅读时间需要 7 分钟。

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

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

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

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

默认效果

ted-外观

wmp-外观

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

Default Skin

TED SKin

WMP SKin

如何调用MediaElement.js ? 

首先我们下载 

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

  

2. 调用视频文件

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

flash回退

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

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

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

4.还需最后一步,为服务器添加 MIME-types 

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

AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

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

AddType video/ogg ogvAddType video/mp4 mp4 m4vAddType video/webm webmAddType audio/ogg oggAddType audio/ogg ogaAddType audio/wav wavAddType audio/mpeg mp3AddType audio/mp4 mp4AddType audio/mp4 mpa

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

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

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

MediaElement.js完美支持音频播放 

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

MediaElement.js 支持字幕插入

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

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

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

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的简要介绍,想了解更多详细内容可以访问 

如果你使用的是wordpress程序,也可以直接搜索wordpress  进行安装,使用方法跟前面介绍的类似。

转载于:https://www.cnblogs.com/benmumu/p/9412751.html

你可能感兴趣的文章
嵌套循环连接(nested loops join)原理
查看>>
shell统计特征数量
查看>>
复习文件操作
查看>>
git使用 ——转
查看>>
C#Hashtable与Dictionary性能
查看>>
10个让你忘记 Flash 的 HTML5 应用演示
查看>>
8个Python面试必考的题目,小编也被坑过 ToT
查看>>
SQL Server 使用作业设置定时任务之一(转载)
查看>>
centos 图形界面和命令行界面切换(转载)
查看>>
Maven启用代理访问
查看>>
Primary definition
查看>>
第二阶段冲刺-01
查看>>
BZOJ1045 HAOI2008 糖果传递
查看>>
发送请求时params和data的区别
查看>>
JavaScript 克隆数组
查看>>
eggs
查看>>
一步步学习微软InfoPath2010和SP2010--第七章节--从SP列表和业务数据连接接收数据(4)--外部项目选取器和业务数据连接...
查看>>
如何增强你的SharePoint 团队网站首页
查看>>
FZU 1914 Funny Positive Sequence(线性算法)
查看>>
oracle 报错ORA-12514: TNS:listener does not currently know of service requested in connec
查看>>