HTML5播放器 MediaElement.js 使用方法
目前已经有很多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 使用方法的更多相关文章
- 7款超具个性的HTML5播放器
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...
- HTML5 播放器
之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...
- HTML5播放器实例
鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...
- .NET MVC对接POLYV——HTML5播放器播放加密视频
官方参考文档:http://dev.polyv.net/2017/videoproduct/v-playerapi/html5player/html5-docs/ 1.上传视频之前根据自己需要对所上传 ...
- wap html5播放器和直播开发小结
此文已由作者吴家联授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 去年年中的时候,借着产品改版的机会,将之前的h5播放器好好整理重构了一番.之前的h5播放器较为简陋,有几个大 ...
- HTML5——播放器
有了H5的Video,妈妈再也不用担心我没安Flash插件了 根据Video提供的方法和属性,简单练习了一下,不说废话,直接上图片和代码 <html><head><tit ...
- 基于MFC的Media Player播放器的控件方法和属性介绍
| 版权声明:本文为博主原创文章,未经博主允许不得转载. 因为使用第三方多媒体库或是第三方控件(Media Player)辅助播放,我们则必须要了解到Media Player控件的一些属性 和方法 ...
- HTML5播放器FlowPlayer的极简风格效果
在线演示 本地下载 使用Flowplayer生成的极简风格的播放器效果.
- CKPlayer 只调用HTML5播放器时全屏问题 这只是Chrome浏览器的渲染bug
如题,在系统中使用CKPlayer播放器,一切顺利,偶然发现没有全屏按钮, 正常的全屏按钮是这样的: 经过一步步调试,发现问题出在iframe, 当视频页面在iframe内时,全屏按钮不显示了,这个和 ...
随机推荐
- Hibernate4获取sessionFactory
/** * Location of hibernate.cfg.xml file. * Location should be on the classpath as Hibernate uses * ...
- HDU 4669 Mutiples on a circle 数位DP
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4669 考察对取模的的理解深不深刻啊,当然还有状态的设计····设d[i][j]表示以第i个数结尾,余 ...
- jQuery事件绑定汇总(包括一些无法获取事件的问题)
★ $(document).on('click', 'button[name=closeLayerOut2]', function () { ...... }); $(document).on('cl ...
- 分部视图在ASP.NET MVC中的应用
概述: 在ASP.NET Web Form的开发经验中,对于User Control使用比较频繁,可以减少重复的代码,利于页面模块化,这个概念也被引入了ASP.NET MVC.即“分部视图”. 1.创 ...
- putty SSH tunnel function
github & dynamic
- 【转】RS232、RS485、TTL电平、CMOS电平
原文网址:http://blog.sina.com.cn/s/blog_63a0638101018grc.html RS232.RS485.TTL电平.CMOS电平 什么是TTL电平.CMOS电平.R ...
- Python+VSCode+Git 学习总结
稍等,先写个脑图... 继续,读完本文,你会学会: 1.如何在VSCode中写Python代码: 2.如何在VSCode中使用Git: 为什么写这篇总结 首先,我假设你是一名Python语言初学者,你 ...
- [boost] : test库
最小化的测试套件minimal_test test库提供一个最小化的测试套件minimal_test, 类似lightweight_test适合入门级测试. 需要包含文件文#include <b ...
- 【linux】vim/vi常用指令
0或者"Home”键:光标转移到此段的最前面字节处. $或者"End"键:光标转移到此段的最后面字节处. n<space>:光标向后移动n个字节. n< ...
- ASP.NET中将数据作为XML数据发送 使用 Request.InputStream 接收
将数据作为XML数据发送,例如:public void PostXml(string url, string xml){byte[] bytes = Encoding.UTF8.GetBytes(xm ...