MediaElement.js是一个基于HTML5媒体API的灵活而健壮的jQuery/JavaScript音频和视频播放器插件。

支持几乎所有的音频和视频格式，如MP4、MP3、WebM以及Dailymotion、Facebook、SoundCloud、Twitch、Vimeo和Youtube。

目录：

• 安装
• 选项
• 属性
• API方法

如何使用它:

1.在文档中加载核心MediaElement.js JavaScript库、OPTIONAL渲染图和语言文件。

<!-- jQuery is OPTIONAL -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<link rel="stylesheet" href="/path/to/build/mediaelementplayer.min.css" />
<script src="/path/to/build/mediaelement-and-player.js"></script>
<!-- Dailymotion Renderer -->
<script src="/path/to/build/renderers/dailymotion.js"></script>
<!-- Facebook Video Renderer -->
<script src="/path/to/build/renderers/facebook.js"></script>
<!-- Soundcloud Renderer -->
<script src="/path/to/build/renderers/soundcloud.js"></script>
<!-- Twitch Renderer -->
<script src="/path/to/build/renderers/twitch.js"></script>
<!-- Vimeo Renderer -->
<script src="/path/to/build/renderers/vimeo.js"></script>
<!-- Youtube Renderer -->
<script src="/path/to/build/renderers/youtube.js"></script>
<!-- All Languages -->
<script src="/path/to/build/lang/ca.js"></script>
<script src="/path/to/build/lang/cs.js"></script>
<script src="/path/to/build/lang/de.js"></script>
<script src="/path/to/build/lang/es.js"></script>
<script src="/path/to/build/lang/fa.js"></script>
<script src="/path/to/build/lang/fr.js"></script>
<script src="/path/to/build/lang/hr.js"></script>
<script src="/path/to/build/lang/hu.js"></script>
<script src="/path/to/build/lang/it.js"></script>
<script src="/path/to/build/lang/ja.js"></script>
<script src="/path/to/build/lang/ko.js"></script>
<script src="/path/to/build/lang/ms.js"></script>
<script src="/path/to/build/lang/nl.js"></script>
<script src="/path/to/build/lang/pl.js"></script>
<script src="/path/to/build/lang/pt.js"></script>
<script src="/path/to/build/lang/ro.js"></script>
<script src="/path/to/build/lang/ru.js"></script>
<script src="/path/to/build/lang/sk.js"></script>
<script src="/path/to/build/lang/sv.js"></script>
<script src="/path/to/build/lang/tr.js"></script>
<script src="/path/to/build/lang/uk.js"></script>
<script src="/path/to/build/lang/zh-cn.js"></script>
<script src="/path/to/build/lang/zh.js"></script>

2.在HTML5视频或音频上初始化MediaElement.js并完成。

// As a jQuery plugin
$('video, audio').mediaelementplayer({
  // more configuration here
});

// As a Vanilla JavaScript plugin
var player = new MediaElementPlayer('player', {
    // more configurations here
});

3.配置媒体播放器的可能选项。请注意，该插件支持所有本地HTML5视频和音频属性。有关更多详细信息，请参阅<video/>和<audio/>。

$('video, audio').mediaelementplayer({

  /* Core Options */

  // List of renderers to use
  renderers: [],

  // Name of the container
  fakeNodeName: mediaelementwrapper,

  //  Path where Flash shims are located
  pluginPath: 'build/',

  // path where the svg icon sprite is located
  iconSprite: 'mejs-controls.svg',

  // Possible values: always (CDN version) or sameDomain (local files)
  shimScriptAccess: 'sameDomain',

  // Success callback
  // media: the wrapper that mimics all the native events/properties/methods for all renderers
  // node: the original HTML video, audio or iframe tag where the media was loaded originally
  success: function(media, node) {},

  // Error callback
  error: function(media, node) {},

  // Dailymotion options
  // See: https://developer.dailymotion.com/player
  dailymotion: {},

  // Dash options
  // See: https://github.com/Axinom/drm-quick-start
  dash: {},

  // Facebook Video options
  // See: https://developers.facebook.com/docs/plugins/embedded-video-player/api#setup
  facebook: {},

  // flv.js options
  // See: https://github.com/Bilibili/flv.js/blob/master/docs/api.md
  flv: {},

  // hls.js options
  // See: https://github.com/dailymotion/hls.js/blob/master/API.md#fine-tuning
  hls: {},

  // Youtube options
  // See: https://developers.google.com/youtube/player_parameters#Parameters
  youtube: {
    nocookie: false,
    imageQuality: 'default', // hqdefault, mqdefault, sddefault and maxresdefault
    // Youtube options here
  },

  // Class prefix for player elements
  classPrefix: 'mejs__',

  // Poster URL
  poster: '',

  // Show the poster when the video is ended
  showPosterWhenEnded: false,

  // Show the poster when the video is paused
  showPosterWhenPaused: false,

  // Default video width/height
  defaultVideoWidth: 480,
  defaultVideoHeight: 270,

  // video width/height
  videoWidth: -1,
  videoHeight: -1,

  // Default audio width/height
  defaultAudioWidth: 400,
  defaultAudioHeight: 30,

  // audio width/height
  audioWidth : -1  Width of audio player
  audioHeight: -1  Height of audio player

  // Default amount to move back when back key is pressed
  defaultSeekBackwardInterval: function(media) {return (media.duration * 0.05);},

  // Default amount to move forward when forward key is pressed
  defaultSeekForwardInterval: function(media) {return (media.duration * 0.05);},

  // Set dimensions via JS instead of CSS
  setDimensions: true,

  // Initial volume when the player starts
  startVolume: 0.8,

  // Infinite loop
  loop: false,

  // Auto rewind when the media ends
  autoRewind: true,

  // Auto resize
  enableAutosize: true,

  // Time format
  timeFormat: 'mm:ss',

  // Always show hours
  alwaysShowHours: false,

  // Show frame count in timecode (##:00:00:00)
  showTimecodeFrameCount: false,

  // Frames per second
  framesPerSecond: 25,

  // Automatically calculate the width of the progress bar based on the sizes of other elements
  autosizeProgress: true,

  // Hide controls when playing and mouse is not over the video
  alwaysShowControls: false,

  // Hide the video control when the media is loading
  hideVideoControlsOnLoad: false,

  // Hide the video controls when the media is paused
  hideVideoControlsOnPause: false,

  // Clicking video element to toggle play/pause
  clickToPlayPause: true,

  // Time in ms to hide controls
  controlsTimeoutDefault: 1500,

  // Time in ms to trigger the timer when your mouse moves
  controlsTimeoutMouseEnter: 2500,

  // Time in ms to trigger the timer when your mouse leaves
  controlsTimeoutMouseLeave: 1000,

  // Use iPad's native controls
  iPadUseNativeControls: false,

  // Use iPhone's native controls
  iPhoneUseNativeControls: false,

  // Use Android's native controls
  AndroidUseNativeControls: false,

  // List of features/plugin to use in the player
  features: [playpause, current, progress, duration, tracks, volume, fullscreen],

  // Use all the default controls
  useDefaultControls: false,

  // Only for dynamic purposes
  isVideo: true,

  // Stretching modes for video player
  // or 'fill'
  stretching: 'auto',

  // Enable keyboard
  enableKeyboard: true,

  // Pause other players when the current one is playing
  pauseOtherPlayers: true,

  // Ignore pauseOtherPlayers option on the current player
  ignorePauseOtherPlayersOption: true,

  // Number of decimal places to show if frames are shown
  secondsDecimalLength: 0,

  // Custom error
  // string or function
  customError: function(media, node){},

  // Keyboard actions
  keyActions: {keys: [1,2,3...], action: function(player, media) { ... }},

  // Start point
  duration: -1,

  // Separator between the current time and the total duration
  timeAndDurationSeparator: '<span> &#124; </span>' 

  // Hide the volume on touch devices
  hideVolumeOnTouchDevices: true,

  // Enable tooltip on the progress bar
  enableProgressTooltip: true,

  // Enable smooth behavior when hovering over the progress bar
  useSmoothHover: true,

  // If set to true, the Live Broadcast message will be displayed and progress bar will be hidden, no matter if duration is a valid number
  forceLive: false,

  // Position of volume slider
  audioVolume: 'horizontal',
  videoVolume: 'vertical',

  // Activate detection of Pointer events when on the fullscreen mode
  usePluginFullScreen: true,

  // Bypass native capabilities on mobile devices and use the fake-fullscreen mode
  useFakeFullscreen: false,

  // Remove the [cc] button when no <track kind="subtitles"> are present
  hideCaptionsButtonWhenEmpty: true,

  // If true and we only have one track, change captions to toggle button
  toggleCaptionsButtonWhenOnlyOne: false,

  // Default cue line in which to display cues if the cue is set to "auto" (no line entry in VTT). 
  // Can be set to false to disable.
  defaultTrackLine: -3,

  // Automatically turn on a <track> element. 
  autoplayCaptionLanguage: '',

  // Set the language of the chapters track. 
  chaptersLanguage: '',

  // Hide the video player screen reader title so it can be added by the website
  hideScreenReaderTitle: false,

  // Text for accessibility
  tracksText: null,
  chaptersText: null,
  muteText: null,
  unmuteText: null,
  allyVolumeControlText: null,
  fullscreenText: null,
  playText: null,
  pauseText: null,

});

4.性能：

// returns true or false
myPlayer.autoplay

// returns an object representing the buffered parts of the audio/video
myPlayer.buffered

// returns true or false
myPlayer.controls

// returns the URL
myPlayer.currentSrc

// returns the current playback position in the audio/video
myPlayer.currentTime

// returns the length in seconds
myPlayer.duration

// returns true or false
myPlayer.ended

// returns a MediaError object representing the error state
myPlayer.error

// returns true or false
myPlayer.loop

// returns true or false
myPlayer.muted

// returns true or false
myPlayer.paused 

// return the current ready state
myPlayer.readyState

// returns true or false
myPlayer.seeking

// return the current source
myPlayer.src

// returns the volume
myPlayer.volume

5.API方法：

// enable/disable autoplay
myPlayer.autoplay(true/false);

// show/hide controls
myPlayer.controls(true/false);

// set the current time
myPlayer.currentTime(time);

// enable/disable loop
myPlayer.loop(true/false);

// mute/unmute
myPlayer.muted(true/false);

// sets the source
myPlayer.src(url);

// sets the volume
myPlayer.volume(volume);

// reload
myPlayer.load();

// play
myPlayer.play();

// pause
myPlayer.pause();

// stop
myPlayer.stop();

// destroy
myPlayer.remove();

// determine whether current player can/cannot play a specific media type
// type is MIME type and each renderer has a whitelist of them
myPlayer.canPlayType(type);

// set player's width and height
myPlayer.setPlayerSize(width, height);

// set poster
myPlayer.setPoster(url);

// mute/unmute the player
myPlayer.setMuted(muted);

// set a new time
myPlayer.setCurrentTime(time);

// get the current time
myPlayer.getCurrentTime();

// set a volume leveal (between 0 and 1)
myPlayer.setVolume(volume);

// retrieve the current volume level
myPlayer.getVolume();

// set a new URL for the player
myPlayer.setSrc(src);

// retrieve the media URL/path
myPlayer.getSrc();

更新日志：

版本6.0.3（2023-03-29）

• 将轮廓样式：auto替换为轮廓样式：solid，使Firefox能够在定义时显示正确的轮廓颜色。

版本6.0.2（2023-03-08）

• 添加了轮廓样式，使Firefox能够在定义的情况下显示正确的轮廓颜色。

版本6.0.1（2023-02-10）

• 错误修复

版本6.0.0（2023-02-07）

• 修复删除播放器后丢失的视频曲目
• 添加了浏览器本机字幕支持，并删除了自定义VTT/DFXP解析
• 删除了对不起作用的“幻灯片”音轨的支持
• 删除了选项：“tracksArialLive”、“captionTextPreprocessor”、“slidesSelector”
• 为清晰起见，将“startLanguage”选项重命名为“autoplayCaptionLanguage”
• 新选项“章节语言”可设置所显示章节轨迹的语言。
• 新选项“defaultTrackLine”控制默认情况下显示哪行字幕
• 修正了无法激活禁用的字幕按钮的问题
• 修正了无法自动播放的“默认”曲目（仅限字幕和字幕曲目）

v5.1.1 (2023-02-06)

• 解决mejs__container未接收到可见焦点，违反WCAG SC 2

v.1.0版本（2022-09-07）

• 用户交互调用搜索时检测
• 在JS打包器中使用语言文件中的严格模式可能会导致javascript错误
• 修复css停用时的容器高度和宽度计算

v5.0.5 (2021-11-05)

• 添加了隐藏屏幕阅读器标题的新选项（可选）
• WCAG：在海报图像中添加空的alt

v5.0.4 (2021-11-05)

• 将数据src切换为src

v5.0.3 (2021-11-01)

• 将描述的属性aria添加到水平音量按钮
• 将type=“button”重新包含到按钮中，以防止在表单中提交
• 所有浏览器中空间和返回键的一致使用

v5.0.2 (2021-10-19)

• 反映第一次点击时叠加播放按钮的正确咏叹调按下状态
• 正确反映叠加播放按钮的aria按下状态*通过将音频/视频元素设置为tabindex=“-1”，最大限度地减少Firefox所需的选项卡

v5.0.1 (2021-10-07)

• 修复全屏视频不在移动视图中居中的问题
• 修复了启用自定义高对比度设置时，当前音量和总音量无法区分的问题

v5.0.0 (2021-09-17)

• 将fakeNodeName的默认值更改为div
• 使用grunt任务将所有文件从/demo文件夹复制到/build文件夹
• 用svg图标精灵替换控件的背景精灵
• 新选项iconSprite：svg图标sprite所在的路径，请参阅独立文档
• 将样式中的px值更改为rem值
• 将描述的属性aria添加到音量按钮

v4.2.1.7 (2021-07-05)

• 修复player.options.startVolume被0覆盖的问题
• 修复一些html注释的拼写错误，删除旧的404来源
• 修复Safari下的全屏问题
• 获取mov文件的正确mime类型
• 修复enableAutosize：false错误
• 修复屏幕外的罕见问题.remove（）
• 修复DFXP解析：删除jQuery使用的残余
• 计算isNative时使用相同的renderName变量

预览截图

HTML5视频和音频播放器插件 MediaElement.js