http://www.w3cfuns.com/article-1305-1.html
来源:互联网 发布:otc机器人详细编程 编辑:程序博客网 时间:2024/05/29 09:05
目前已经有很多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程序,也可以直接搜索wordpressMediaElement.js 官方插件 进行安装,使用方法跟前面介绍的类似。
0 0