jtest-npm-me v1.0.3

目录

• 介绍
• 快速开始
  • install
  • 全局引入
  • 按需引入(针对功能插件)
  • 使用
• 通用属性
• 配置
  • Standalone
  • MediaElementPlayer
• API
  • 属性
  • 方法
  • 事件
• 工具
  • DOM
  • 通用方法
  • Media
  • 时间格式化
• 特性

介绍

MediaElementPlayer: HTML5 音视频播放器

MediaElementPlayer是一个基于MediaElement.js的完整的音频/视频播放器。

MediaElement.js 是一组模仿HTML5 MediaElement API的自定义Flash插件，用于不支持HTML5或不支持你正在使用的媒体编解码器的浏览器。

一般来说，MediaElement.js 支持IE11+, MS Edge, Chrome, Firefox, Safari, iOS 8+ 和 Android 4.0+ 。

快速开始

install

安装播放器

npm install --save jtest-npm-me

安装播放器功能插件（非必须）

npm install --save jtest-npm-me-plugins

全局引入

import 'jtest-npm-me';
// 引入播放器样式文件
import 'jtest-npm-me/build/mediaelementplayer.min.css';

// 如果用到播放器功能插件，可通过以下方式引入相应的js和css样式
import 'jtest-npm-me-plugins';
import 'jtest-npm-me-plugins/dist/css/mediaelement-plugins.min.css';

针对vue开发项目，可通过以下方式全局注册播放器组件

import Vue from 'vue'
import MediaElementPlayer from 'jtest-npm-me/vue';

// 引入播放器样式文件
import 'jtest-npm-me/build/mediaelementplayer.min.css';

// 页面可使用 MediaElementPlayer 作为播放器组件名
Vue.use(MediaElementPlayer);

按需引入(针对功能插件)

import 'jtest-npm-me/build/mediaelementplayer.min.css';
// vue页面中可使用组件的引入方式
import { MediaElementPlayer } from 'jtest-npm-me/vue';

// 按需引入播放器功能插件
import 'jtest-npm-me-plugins/dist/loop/loop';// 引入'循环'插件
import 'jtest-npm-me-plugins/dist/loop/loop.css';// 引入'循环'插件样式
import 'jtest-npm-me-plugins/dist/stop/stop';// 引入'停止'插件
import 'jtest-npm-me-plugins/dist/stop/stop.css';// 引入'停止'插件样式

export default {
  components: {
    MediaElementPlayer
  }
}

使用

方式一：

<template>
  <div class="home">
    <p>mediaElement视频播放器</p>
    <div class="video-wrapper">
      <video id="player" width="680" height="380" controls preload="none" playsinline>
        <source type="video/mp4" src="../assets/001.mp4">
      </video>
    </div>
  </div>
</template>

<script>
import 'jtest-npm-me';
import 'jtest-npm-me/build/mediaelementplayer.min.css';
import 'jtest-npm-me-plugins';
import 'jtest-npm-me-plugins/dist/css/mediaelement-plugins.min.css';

export default {
  name: 'home',
  data () {
    return {
      player: null
    }
  },
  mounted () {
    this.initPlayer();
  },
  methods: {
    initPlayer() {
      this.player = new MediaElementPlayer('player', {
        autoRewind: false,
        // features不配置时默认包含'playpause','current','progress','duration','volume','fullscreen'
        features: [
          'playpause',// 播放/暂停
          'current',// 当前播放时间
          'progress',// 进度条
          'duration',// 总时长
          'volume',// 音量
          'speed',// 倍速
          'stop',// 停止
          'fullscreen'// 全屏
        ],
        // speed
        defaultSpeed: '1'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.video-wrapper{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  video{
    max-width: 100%;
    max-height: 100%;
  }
}
</style>

方式二

<template>
  <div>
    <MediaElementPlayer
      ref="myplayer"
      class="myclass"
      type="video"
      id="player2"
      width="680"
      height="380"
      controls
      preload="none"
      playsinline
      :options="options"
    >
      <source type="video/mp4" src="../assets/001.mp4">
    </MediaElementPlayer>
  </div>
</template>

<script>
// 引入播放器组件及样式
import { MediaElementPlayer } from 'jtest-npm-me/vue';
import 'jtest-npm-me/build/mediaelementplayer.min.css';

// 引入全部插件
// import 'jtest-npm-me-plugins';
// import 'jtest-npm-me-plugins/dist/css/mediaelement-plugins.min.css';

// 或按需引入插件
import 'jtest-npm-me-plugins/dist/stop/stop';
import 'jtest-npm-me-plugins/dist/stop/stop.css';
import 'jtest-npm-me-plugins/dist/speed/speed';
import 'jtest-npm-me-plugins/dist/speed/speed.css';

export default {
  components: {
    MediaElementPlayer
  },
  data() {
    return {
      options: {
        autoRewind: false,
        // features不配置时默认包含'playpause','current','progress','duration','volume','fullscreen'
        features: [
          'playpause',// 播放/暂停
          'current',// 当前播放时间
          'progress',// 进度条
          'duration',// 总时长
          'volume',// 音量
          'speed',// 倍速
          'stop',// 停止
          'fullscreen'// 全屏
        ],
        // speed
        defaultSpeed: '1'
      },
    }
  },
  mounted() {
    // 可通过this.$refs.myplayer.player访问播放器
    console.log(this.$refs.myplayer.player)
  }
}
</script>

通用属性

MediaElement 支持以下 video/audio 标签属性：

下面的示例更直观地列出了上述所有属性：

<video autoplay controls class="player" id="player1" height="360"
	width="100%" loop muted poster="/path/to/poster.jpg"
	preload="none" src="/path/to/media.mp4"
	style="max-width: 100%" tabindex="0" title="MediaElement">
</video>

配置

作为初始化播放器时的配置选项，或作为vue组件的options选项，支持以下配置参数。

Standalone

作为一个独立的库， MediaElement.js 可以使用以下设置进行配置。

说明 1. 要在M(PEG)-DASH中使用DRM，请确保CORS配置正确，并且站点必须使用SSL。 2. MediaElement和MediaElementPlayer的成功和错误回调均可用，但是，在使用MediaElementPlayer时，会传递第三个参数instance，可用于访问与MediaElementPlayer类关联的方法。 3. 当使用MediaElementPlayer时，error回调参数是：error(错误事件的详细描述)，media和node

MediaElementPlayer

除了上面的参数之外， MediaElementPlayer 对象还可配置以下参数：

API

MediaElementPlayer是一个完整的视频和音频播放器，你也可以只使用MediaElement对象，它将<video>和<audio>替换为一个Flash播放器，该播放器可以模仿HTML MediaElement API的属性、方法和事件。

属性

方法

事件

工具

所有工具方法都可通过 mejs.Utils.{name} 访问.

DOM

通用方法

Media

时间格式化

特性

MediaElement.js 提供一些方法用来判断用户的浏览器环境以及全屏的支持情况，以下列出的特性可通过使用 mejs.Features.{name} 访问。

• mejs.Features.isiPad
• mejs.Features.isiPhone
• mejs.Features.isiOS
• mejs.Features.isAndroid
• mejs.Features.isIE
• mejs.Features.isEdge
• mejs.Features.isChrome
• mejs.Features.isFirefox
• mejs.Features.isSafari
• mejs.Features.isStockAndroid
• mejs.Features.hasMSE
• mejs.Features.supportsNativeHLS
• mejs.Features.supportsPointerEvents
• mejs.Features.hasiOSFullScreen
• mejs.Features.hasNativeFullscreen
• mejs.Features.hasWebkitNativeFullScreen
• mejs.Features.hasMozNativeFullScreen
• mejs.Features.hasMsNativeFullScreen
• mejs.Features.hasTrueNativeFullScreen
• mejs.Features.nativeFullScreenEnabled
• mejs.Features.fullScreenEventName
• mejs.Features.isFullScreen()
• mejs.Features.requestFullScreen()
• mejs.Features.cancelFullScreen()