HTML5播放器MediaElement.js用法

最新推荐文章于 2021-07-09 07:39:43 发布

WeLoveSunFlower

最新推荐文章于 2021-07-09 07:39:43 发布

阅读量1.7w

点赞数

分类专栏：前端

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

翻译时间：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 .ogv
AddType video/mp4 .mp4
AddType 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 use
var 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 () { 
     
    }
});