Jtest-npm-me-plugins NPM

Mediaelement 插件

概述

Mediaelement插件是基于Mediaelement播放器的定制化插件，功能涵盖内容插入（视频广告、HTML页面、进度标记等）、播放控制（倍速、跳过、循环、停止等）、辅助功能和一些其他实用功能（清晰度、播放源切换、预览、画中画、投屏等）。

体验demo

安装

下载并引入主播放器和特性插件js文件，特性插件文件需放在主播放器文件mediaelement-and-player.min.js之后引入：

<!-- 引入播放器文件 -->
<script src="/path/to/mediaelement-and-player.min.js"></script>
<!-- 按需引入插件文件，以snapshot插件为例 -->
<script src="/path/to/snapshot/snapshot.min.js"></script>
<!-- 如果需要国际化，引入插件国际化相关文件，默认为中文时不需要引入 -->
<script src="/path/to/snapshot/snapshot-i18n.js"></script>

分别引入主播放器和特性插件的css样式表

<!-- 引入主播放器样式表 -->
<link rel="stylesheet" href="/path/to/mediaelementplayer.min.css">
<!-- 引入插件样式表 -->
<link rel="stylesheet" href="/path/to/snapshot/snapshot.min.css">

使用

初始化播放器：new MediaElementPlayer(mediaEl,options)，mediaEl为视频/音频元素，options为配置项，包含播放器配置、插件及其API配置，options对象中包含features属性用于配置播放器的功能插件列表，与插件的关键字对应。（features配置的排序会影响功能按钮在播放器控制区内的排列顺序）

var player = new MediaElementPlayer(document.querySelector('video'), {

  features:['play', 'playpause', 'volume', 'progress', 'snapshot', 'fullscreen'],

  snapType:'jpeg',
  snapQuality: 0.5,
  snapShot: true,
      
  snapSuccess: function(snap){
    console.log(snap.url);
  },

  snapError: function(){
    console.log('you can not take snapshot while the player loading!');
  }
       
 });