HTML5播放器MediaElement.js用法

来源：互联网发布：机房网络布线方案编辑：程序博客网时间：2024/06/07 09:11

翻译时间：2014.8.8

官网：http://www.mediaelementjs.com/

1. 特性介绍

默认皮肤

MediaElement是一款HTML5播放器，使用<video><audio>标签，使用简单，一个js文件，一种UI支持多个浏览器。

纯HTML、CSS的HTML5视频音频播放器
自定义Flash和Sliverlight播放器，旧版浏览器模仿HTML5 MediaElemet API
包括WebVIT的可访问性标准
WordPress、Drupal、Joomla、jQuery、BlogEngine.NET、ruby gem、plone、typo3的插件，现在是WordPress核心的一部分
MediaElement.js git项目地址：https://github.com/johndyer/mediaelement

2. 如何工作

Flash向前支持

对于一些不支持HTML5的旧版浏览器，MediaElement.js通过模仿HTML5 MediaElement API来自定义Flash和Sliverlight插件，而不是为现代浏览器和旧版浏览器分别提供HTML5播放器和Flash播放器。

这样，IE6-8就可以支持<video><audio>标签了，同样的，Firefox和Opera支持h.264，Safari和IE9支持WebM.

一致的HTML/CSS播放器

通过MediaElement.js，这些浏览器就都“支持”HTML5了。MediaElement.js构建了一个可以更换皮肤、支持<track>标签、全屏视频等功能的播放器。

3. 示例和插件

你可以通过设置{features: [ 'playpause' , 'backlight' ]}数组来控制界面上的的这些按钮，你也可以添加自己的类似Backlight这样的插件。

4. 浏览器和设备支持

注意：

只有在安装codec的情况下，IE9才会本地播放VP8/WebM，否则会使用Flash播放。
Adobe已经承诺在以后的Flash版本支持WebMaster（2010年5月和2011年6月），这样就可以在Safari和旧版浏览器播放了，但是到目前为止，这只是一个承诺。
Google已经承诺从Chrome中移除h.264支持，这样的话，说不定哪天Chrome需要用Flash来播放h.264.

5. 安装

设置MIME-types

在Linux/Apache服务器上，创建一个名为.htaccess的文档（不确定是否这样翻译），文档中包括以下代码，把这个文档放到站点根目录

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

在Windows/IIS服务器，请参考Microsoft关于如何在IIS6和IIS7添加/编辑MIME类型的官方指南
本地文件设置

如果你想配置本地文件，打算测试Flash回退，请先查看Flash Security Settings页面，添加你的工作目录。使用绝对路径效果最好。

添加Script和Stylesheet

从https://github.com/johndyer/mediaelement/下载最新源码

添加如下代码到HTML页面

<code><script src="jquery.js"></script><script src="mediaelement-and-player.min.js"></script><link rel="stylesheet" href="mediaelementplayer.css" /></code>

要支持IE6-8，这些代码必须放在<head>标签内，如果不能把MediaElement.js放在<head>标签，你需要安装类似html5shiv的插件

第一种情况：单独的h.264文件

如果你的用户有Javascript和Flash，这种方法对于所有的浏览器和移动设备是最简单的（缺点是h.264是不完全开放的，IE9和Safari只有在HTML5下起作用）

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

第二种情况：带Flash回退的多种编解码器

包括各种浏览器的编解码器（h.264 for IE9, Safari, and mobile browsers; WebM for Firefox 4, Chrome, and Opera; Ogg for Firefox 3）以及禁用了Javascript的非HTML5浏览器的Flash回退。最初被by Kroc Camen设想为“Video for Everybody”

<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-HTML5 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>

开始播放

用jQuery把所有的<video><audio>标签转换成MediaElement.js

<script>// using jQuery$('video,audio').mediaelementplayer(/* Options */);</script>

或者显式创建一个MediaElement播放器供你使用

<script>// JavaScript object for later usevar player = new MediaElementPlayer('#player',/* Options */);// ... more code ...player.pause();player.setSrc('mynewfile.mp4');player.play();</script>

播放选项

$('video').mediaelementplayer({    // if the <video width> is not specified, this is the default    defaultVideoWidth: 480,    // if the <video height> is not specified, this is the default    defaultVideoHeight: 270,    // if set, overrides <video width>    videoWidth: -1,    // if set, overrides <video height>    videoHeight: -1,    // width of audio player    audioWidth: 400,    // height of audio player    audioHeight: 30,    // initial volume when the player starts    startVolume: 0.8,    // useful for <audio> player loops    loop: false,    // enables Flash and Silverlight to resize to content size    enableAutosize: true,    // the order of controls you want on the control bar (and other plugins below)    features: ['playpause','progress','current','duration','tracks','volume','fullscreen'],    // Hide controls when playing and mouse is not over the video    alwaysShowControls: false,    // force iPad's native controls    iPadUseNativeControls: false,    // force iPhone's native controls    iPhoneUseNativeControls: false,     // force Android's native controls    AndroidUseNativeControls: false,    // forces the hour marker (##:00:00)    alwaysShowHours: false,    // show framecount in timecode (##:00:00:00)    showTimecodeFrameCount: false,    // used when showTimecodeFrameCount is set to true    framesPerSecond: 25,    // turns keyboard support on and off for this instance    enableKeyboard: true,    // when this player starts, it will pause other players    pauseOtherPlayers: true,    // array of keyboard commands    keyActions: [] });

6. 接口

HTML5/MediaElement API

MediaElement播放器是一个完整的音频和视频播放器，但是你也可以只使用MediaElement对象中替换了<video><audio>的Flash播放器的部分，这部分模拟了MediaElement API的属性，方法和事件。当然，相比于MediaElement API会有一些变化，最明显的是setter属性的变化。

注意：HTML5定义了pause方法，但是没有stop方法。只有在支持Flash RTMP流媒体的时候有stop方法，所以在其他情况，你应该使用pause方法。

MediaElement实例

本例展示如何使用MediaElement对象，不使用MediaElement播放器和jQuery插件

<video>标签和播放时间

<video id="player1" src="myvideo.mp4" width="320" height="240"></video><br />Time: <span id="current-time"></span>

Javascript所有配置项

new MediaElement('player1', {    // shows debug errors on screen    enablePluginDebug: false,    // remove or reorder to change plugin priority    plugins: ['flash','silverlight'],    // specify to force MediaElement to use a particular video or audio type    type: '',    // path to Flash and Silverlight plugins    pluginPath: '/myjsfiles/',    // name of flash file    flashName: 'flashmediaelement.swf',    // name of silverlight file    silverlightName: 'silverlightmediaelement.xap',    // default if the <video width> is not specified    defaultVideoWidth: 480,    // default if the <video height> is not specified         defaultVideoHeight: 270,    // overrides <video width>    pluginWidth: -1,    // overrides <video height>           pluginHeight: -1,    // rate in milliseconds for Flash and Silverlight to fire the timeupdate event    // larger number is less accurate, but less strain on plugin->JavaScript bridge    timerRate: 250,    // method that fires when the Flash or Silverlight object is ready    success: function (mediaElement, domObject) {                  // add event listener        mediaElement.addEventListener('timeupdate', function(e) {                         document.getElementById('current-time').innerHTML = mediaElement.currentTime;                     }, false);                 // call the play method        mediaElement.play();             },    // fires when a problem is detected    error: function () {          }});

0 0