jtest-npm-me

v1.0.3

Published

4 years ago

* [介绍](#介绍) * [快速开始](#快速开始) * [install](#install) * [全局引入](#全局引入) * [按需引入(针对功能插件)](#按需引入针对功能插件) * [使用](#使用) * [通用属性](#通用属性) * [配置](#配置) * [Standalone](#standalone) * [MediaElementPlayer](#mediaelementplayer) * [API](#API) * [属性](#

0High
0Medium
0Low

jiangber

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 标签属性：

属性 | 描述 -------- | ------------ autoplay | 如果出现该属性，则视频在就绪后马上播放 class | 指定类名 controls | 如果出现该属性，则向用户显示控件，比如播放按钮 id | 标签id height | 设置视频播放器的高度，单位为像素，也可以设置为百分比 loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放 muted | 规定视频的音频输出应该被静音 poster | 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。通常是PNG或JPEG图像。如果没有指定，播放器将使用样式表中指定的背景颜色 preload | 规定当页面加载时，视频是否应该加载以及如何加载，可能值有： auto, metadata 和 none (推荐) src | 要播放的视频的 URL。这个值也可以用 source 标签表示 style | 内联样式 tabindex | 指定元素的制表顺序。要避免键盘将焦点放在此元素上，请使用 -1 ；否则用 0 title | 指定关于元素的额外信息 width | 设置视频播放器的宽度，单位为像素，也可以设置为百分比

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

<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 可以使用以下设置进行配置。

参数 | 类型 | 默认值 | 描述 ------ | --------- | ------- | -------- renderers | array | [] | 要使用的渲染器列表 fakeNodeName | string | mediaelementwrapper | MediaElement 容器名称 pluginPath | string | build/ | Flash shims 路径 shimScriptAccess | string | sameDomain | 在 <object> 和 <embed> 中标记，确定是使用本地文件还是CDN文件。可能值有： always (CDN 版本) 、 sameDomain (本地文件) success | callback | | 在媒体资源加载后立即执行的操作；传递2个参数：media (为所有渲染器模仿所有本地事件/属性/方法的包装器)和 node (媒体最初加载的原始HTML video, audio 或 iframe标签)；如果使用 html5，media 和 node基本上是一样的) error | callback | | 如果源文件没有加载，将触发错误回调，传参与 success 回调一致 dash | object | | 接收参数 debug, drm (加载受保护/授权的流媒体，更多信息查看 drm) 和 path (声明 dash.js 的本地路径) flv | object | | path参数指定库加载的路径，其他信息请查看文档flv.js hls | object | | path参数指定库加载的路径，其他信息请查看文档hls.js

说明

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

MediaElementPlayer

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

参数 | 类型 | 默认值 | 描述 ------ | --------- | ------- | -------- classPrefix | string | mejs__ | 播放器元素的class前缀 poster | string | (empty) | 覆盖poster属性的Poster URL showPosterWhenEnded | boolean | false | 当视频结束时，展示海报 showPosterWhenPaused | boolean | false | 当视频暂停时，展示海报 defaultVideoWidth | number | 480 | <video>宽度未设定时的默认宽度 defaultVideoHeight | number | 270 | <video>高度未设定时的默认高度 videoWidth | number | -1 | 如果设定了，将覆盖 <video> width videoHeight | number | -1 | 如果设定了，将覆盖 <video> height defaultAudioWidth | number | 400 | 音频播放器宽度未指定时的默认宽度 defaultAudioHeight | number | 30 | 音频播放器高度未指定时的默认高度 defaultSeekBackwardInterval | function | | 按下返回键时向后移动的默认间隔。默认回调是这样表示的： function(media) {return (media.duration * 0.05);} defaultSeekForwardInterval | function | | 按下前进键时向前移动的默认间隔。默认回调是这样表示的： function(media) {return (media.duration * 0.05);} setDimensions | boolean | true | 通过JS而不是CSS设置尺寸 audioWidth | number | -1 | 音频播放器宽度 audioHeight | number| -1 | 音频播放器高度 startVolume | number | 0.8 | 媒体播放初始音量(被用户cookie覆盖)，用浮点值表示 loop | boolean | false | 是否循环播放 autoRewind | boolean | true | 当媒体结束时是否倒回开始 enableAutosize | boolean | true | 调整到媒体尺寸 timeFormat | string | (empty) | 使用的时间格式。默认值:mm: ss。支持单位:h:小时，m:分钟，s:秒，f:帧数。如果使用2个字母，将显示2位数字(hh:mm:ss) alwaysShowHours | boolean | false | 时间格式化时是否始终显示小时数 (##:00:00) showTimecodeFrameCount | boolean| false | 是否在时间码中显示帧数 (##:00:00:00) framesPerSecond | number | 25 | 每秒的帧数，当showTimecodeFrameCount设置为true时有效 autosizeProgress | boolean | true | 为true表示根据其他元素的大小自动计算进度条的宽度 alwaysShowControls | boolean | false | 为false表示视频播放过程中鼠标不在视频上时隐藏控件 hideVideoControlsOnLoad | boolean | false | 在视频加载时是否隐藏视频控制区 hideVideoControlsOnPause | boolean | false | 在视频暂停时是否隐藏视频控制区 clickToPlayPause | boolean | true | 是否允许点击视频元素时切换播放/暂停状态 controlsTimeoutDefault | number | 1500 | 媒体控件隐藏的默认延迟时间（ms）T controlsTimeoutMouseEnter | number | 2500 | 当鼠标移动触发控件隐藏定时器的延迟时间（ms） controlsTimeoutMouseLeave | number | 1000 | 当鼠标离开触发控件隐藏定时器的延迟时间（ms） iPadUseNativeControls | boolean | false | ipad使用原生控件 iPhoneUseNativeControls | boolean | false | iPhone使用原生控件 AndroidUseNativeControls | boolean | false | Android使用原生控件 features | array | [...] | 在播放器中使用的功能/插件列表，默认是: playpause, current, progress, duration, tracks, volume, fullscreen useDefaultControls | boolean | false | 如果设置为true，上面features中列出的所有默认控制元素将被使用，并且这些特性将附加在features中声明的其他插件中。这种方法主要用于添加更多的插件，而不修改控件栏中的任何元素 isVideo | boolean | true | Only for dynamic purposes stretching | string | auto | 视频播放器的拉伸模式。如果设置auto，播放器样式如果有max-width和max-height，则切换为responsive模式;否则，将设置标签中指定的尺寸(与将此选项设置为none时相同)。fill模式将尝试使用可用空间来适应视频，当窗口大小调整时，它将根据可用空间裁剪尺寸以使其居中。 enableKeyboard | boolean | true | 是否支持键盘控制 pauseOtherPlayers | boolean | true | 当前播放器开始播放时，是否暂停其他播放器 ignorePauseOtherPlayersOption | boolean | true |当前播放器忽略 pauseOtherPlayers 选项设置 secondsDecimalLength | number | 0 | 显示帧是否显示的小数位数 customError | string/callback | null | 如果发生错误，通过字符串或函数设置定制的HTML消息。该函数有两个参数:media(包含播放器所有本地事件/属性/方法的容器)和node(原始HTML视频、音频或iframe标签，媒体最初是在这里加载的) keyActions | array | [...] | 键盘事件处理。接受对象数组的格式:{keys:[1,2,3...], action: function(player, media){...}}。/src/js/player.js可查看整个列表 duration | number | -1 | 用于检测媒体持续时间变化的起始点 timeAndDurationSeparator | string | <span> | </span> | 当前时间和正在播放的媒体总持续时间之间的分隔符 hideVolumeOnTouchDevices | boolean | true | 触摸设备上有不同的方式控制音量，设为true可隐藏不需要的音量控制 enableProgressTooltip | boolean | true | 是否启用在进度条中显示时间的工具提示 useSmoothHover | boolean | true | 在悬停进度条时是否启用平滑行为 forceLive | boolean | false | 如果设置为true，Live Broadcast消息将会显示，进度条将会隐藏，无论duration是否有效 audioVolume | string | horizontal | 音量滑块在音频元素上的呈现方式，分horizontal和vertical videoVolume | string | vertical | 音量滑块在视频元素上的呈现方式，分horizontal和vertical usePluginFullScreen | boolean | true | 在全屏模式下激活Pointer事件检测的标志 useFakeFullscreen | boolean | false | 是否禁用移动设备上的原生全屏功能，并使用模拟的全屏模式 captionTextPreprocessor | function | not set | 显示标题文本之前对其进行预处理的选项。如果设置，函数接受标题文本并返回其预处理版本。如果没有设置，标题文本将按原样显示。 toggleCaptionsButtonWhenOnlyOne | boolean | false | If true and we only have one track, change captions to toggle button startLanguage | string | (empty) | Automatically turn on a <track> element. Note: Will not work when toggleCaptionsButtonWhenOnlyOne is set to true slidesSelector | string | (empty) | slides的选择器，可以是任何有效的JavaScript选择器(#id， .class, img等) tracksText | string | null | 关闭字幕按钮的标题 chaptersText | string | null | 章节按钮的标题 muteText | string | null | 静音按钮的标题 unmuteText | string | null | 取消静音按钮的标题 allyVolumeControlText | string | null | 辅助功能音量控制提示的标题 fullscreenText | string | null | 全屏按钮的标题 playText | string | null | 播放按钮的标题 pauseText | string | null | 暂停按钮的标题

API

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

属性

属性 | 描述 | GET | SET -------- | ----------- | --- | --- autoplay | 设置或返回音频/视频是否应该在加载后立即开始播放 | X | X buffered | 返回TimeRanges对象，表示音频/视频的缓冲部分 | X | controls | 设置或返回音频/视频是否应该显示控件(如播放/暂停等) | X | X currentSrc | 返回当前音频/视频的URL | X | currentTime | 设置或返回音频/视频中当前播放位置(秒) | X | X duration | 返回当前音频/视频的长度(秒)；要在不播放媒体的情况下确定，则必须设置preload="auto" | X | ended | 返回音频/视频的播放是否已经结束 | X | error | 返回一个MediaError对象，表示音频/视频的错误状态 | X | loop | 设置或返回音频/视频结束后是否应该重新开始 | X | X muted | 设置或返回音频/视频是否静音 | X | X paused | 返回音频/视频是否暂停 | X | readyState | 返回音频/视频的当前就绪状态 | X | seeking | 返回用户当前是否在音频/视频中寻找 | X | src | 设置或返回音频/视频元素的当前源 | X | X volume | 设置或返回音频/视频的音量 | X | X

方法

方法 | 描述 -------- | ------------ load() | 重新加载音频/视频元素；此外，它还用于在更改源或其他设置后更新音频/视频元素 play() | 开始播放音频/视频 pause() | 暂停当前播放的音频或视频 stop() | 仅在MediaElementPlayer中呈现以支持Flash RTMP流媒体。对于其他场景，等效的方法是pause remove() | 销毁视频/音频播放器实例 canPlayType(type) | 确定当前播放器是否可以播放特定的媒体类型；type是MIME类型，每个渲染器都有一个它们的白名单 setPlayerSize (width, height) |设置播放器的width和height，也需考虑stretching配置 setPoster (url) | 在播放器的布局层中添加一个带有封面url的image标签用于展示封面；传递空字符串可以清除封面 setMuted (muted) | 设置静音或取消静音，muted 为布尔值 setCurrentTime (time) | 为播放器设置新的当前时间，time可以是整数或浮点数，如果是负数，将从0开始 getCurrentTime () | 获取媒体的当前播放时间 setVolume (volume) | 设置播放音量，volume是0到1之间的数值 getVolume () | 获取媒体的当前播放音量 setSrc (src) | 为播放器设置一个新的URL getSrc () | 获取媒体的播放URL

事件

事件 | 触发条件 ----- | ----------- loadedmetadata | 元数据加载完毕 progress | 浏览器正在获取媒体数据 timeupdate | 播放时间发生改变 seeking | 寻找中 seeked | 寻找完毕 canplay | 一个文件已经准备好开始播放(当它有足够的缓冲可以开始播放时) play | play()和autoplay开始播放时触发 playing | 媒体已经开始播放 pause | 媒体暂停时触发 ended | 媒体播放结束时触发 volumechange | 音量改变时触发 captionschange | 检测到字幕变化

工具

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

DOM

方法 | 描述 ------ | -------- offset(element) | 获取element的top和left坐标 hasClass(element, className) | 检查 element 元素是否定义了类 className addClass(element, className) | 添加类名为 className 的样式到元素 element removeClass(element, className) | 移除 element 元素上的类 className toggleClass(element, className) | 添加/移除 element 元素上的类 className fadeIn(element, duration, callback) | 在 duration 持续时间（默认值是400）内显示 element ，显示后如果定义了 callback 则执行该回调 fadeOut(element, duration, callback) | 在 duration 持续时间（默认值是400）内隐藏 element ，隐藏后如果定义了 callback 则执行该回调 siblings(element, filter) | 根据 filter 选择器从 element 中获取所有兄弟元素 visible(element) | 检查 element 是否可见，不可见包含 display: none 和 visibility: hidden 情形 ajax(url, dataType, success, error) | 执行对某个 url 的AJAX请求，指定其类型(text, html, json, xml)并执行成功或错误回调

通用方法

方法 | 描述 ------ | -------- escapeHTML(input) | 对 input 中的 &, <, >, " 等字符转义防止XSS攻击 debounce(callback, wait) | 防抖，在指定的 wait 时间结束之后才执行 callback throttle(callback, wait) | 节流，在指定的 wait 时间之内只会触发 callback 一次 isObjectEmpty(object) | 检查 object 是否为空 splitEvents(events, id) | 将用空格分隔的 events 字符串分割为 document (d)和 window (w)事件。可以传递 id 来追加名称空间 createEvent(eventName, target) | 创建 CustomEvent 类的实例，传递事件名 eventName 和目标 target isNodeAfter(sourceNode, targetNode) | 检查DOM中 targetNode 是否出现在 sourceNode 之后 isString(input) | 判断 input 是否为字符串

Media

方法 | 描述 ------ | -------- absolutizeUrl(path) | 返回 path 的绝对路径 formatType(url, type) | 根据 url 获取媒体的MIME类型，如果提供了 type ，则返回 type getMimeFromType(type) | 如果 type 包含编解码器，则获取 type 中正确的MIME部分(video/mp4; codecs="avc1.42E01E, mp4a.40.2" 变成 video/mp4) getTypeFromFile(url) | 获取基于 url 结构的媒体类型 getExtension(url) | 从 url 获取媒体文件扩展名 normalizeExtension(extension) | 获取媒体 extension 的标准扩展

时间格式化

Method | Description ------ | -------- secondsToTimeCode(time, forceHours, showFrameCount, fps, secondsDecimalLength) | 将 time 格式化为“00:00:00”的格式，如果 forceHours 设置为 true，则始终显示小时数，如果 showFrameCount为 true，则显示帧计数。此外，可以指定每秒帧数(fps，默认为25)，以及显示的小数位数(secondsDecimalLength) timeCodeToSeconds(time, fps) | 将'00:00:00'时间字符串转换成以秒为单位的数字表示。如果格式化字符串包含帧数，可以指定每秒帧数(fps，默认为25帧) calculateTimeFormat(time, options, fps) | 通过播放器选项options 和时间 time 以及帧率 fps （可选），计算返回对应的时间格式 convertSMPTEtoSeconds(SMPTE) | 将电影和电视工程师协会(SMTPE)的时间代码转换为秒

特性

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()

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

目录

介绍

快速开始

install

全局引入