vue-video-player-mx

1.0.0 • Public • Published

介绍

以学习为目的开发了该vue视频组件

安装

npm i vue-video-player-mx --save

示例

<template>
  <video-player
    :src="'https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/aaea48415285890816071408130/ckc0XDawqmgA.mp4'"
    :loop="false"
    :width="'800px'"
    :height="'500px'"
    @play="onPlay"
    @pause="onPause"
    @ended="onFinish"
  ></video-player>
</template>

<script>
  // 引入VideoPlayer组件
  import VideoPlayer from "vue-video-player-mx";
  // 重要:引入video组件的css
  import "vue-video-player-mx/dist/index.css";

  export default {
    components: {
      VideoPlayer,
    },

    methods: {
      onPlay(info) {
        console.log("视频开始播放了...", info.currentTime);
      },

      onPause(info) {
        console.log("视频暂停播放了...", info.currentTime);
      },

      onFinish() {
        console.log("视频播放完毕了...");
      },
    },
  };
</script>

Props

属性名 描述 默认值 类型 是否必填
src 视频资源地址 '' string true
poster 视频封面图 '' string false
muted 是否静音 false boolean false
loop 是否循环播放 true boolean false
autoPlay 是否自动播放 false boolean false
preload 是否预加载视频资源 auto string false
controls 是否显示 controls 组件 true boolean false
width 视频组件宽度 700px string false
height 视频组件高度 500px string false
supportMobile 是否适配移动端 true boolean false
controlsOptions control 组件的选项 {enableFullscreen: true, enableWebFullscreen: true, enableVolume: true, enableShotScreen: false, enableSpeedSetting: true, playSpeedOptions: [2, 1.5, 1, 0.5]} object false
customizeStyle 自定义视频滚动条和 controls 的背景色 {} object false

Events

事件名 描述 示例
play 视频由暂停状态变成播放状态时触发 () => {}
pause 视频由播放状态变成暂停状态时触发 () => {}
ended 视频播放结束时触发 () => {}
playing 由于缺少数据导致暂停播放,再次播放时执行。就是卡了一下,继续播放 () => {}
waiting 由于缺少数据导致暂停播放时执行,就是卡了 () => {}
timeUpdate video 标签的 currentTime 更新时触发
loadeddata 视频第一帧资源加载完成时执行 () => {}
loadedmetadata 视频元数据加载完后后执行,元数据包括时长、尺寸(仅视频)以及文本轨道 (duration, size) => {}
seeked 当视频进度发生跳转后触发 () => {}
seeking 视频进度发生跳转时触发 () => {}
enterFullscreen 进入全屏时触发 () => {}
cancelFullscreen 退出全屏时触发 () => {}
enterWebFullscreen 进入网页全屏时触发 () => {}
cancelWebFullscreen 退出网页全屏时触发 () => {}
rateChange 播放倍速变化时触发,speed参数表示变化后的倍速 (rate) => {}
volumeChange 音量变化时触发,volume参数表示变化后的音量 (volume) => {}
progressChange 播放进度发生变化时触发 () => {}
downloadResource 下载视频资源时触发,资源是一段一段的下载的 () => {}

Readme

Keywords

Package Sidebar

Install

npm i vue-video-player-mx

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

46.6 kB

Total Files

6

Last publish

Collaborators

  • cuicuicui