Vue-Video-Player

基于video.js 7.8.1基础上定制封装，完全支持video.js方法。https://videojs.com

安装

NPM

npm 地址 http://npm.wengetech.com/-/web/detail/vue-video-player

npm install vue-video-player --save

引入

全局引入

import Vue from 'vue'
import videoPlayer from 'vue-video-player'

// require videojs style
import 'vue-video-player/lib/video.css';

Vue.use(videoPlayer)

使用

<template>
  <div>
    <div>
      <div class="md-subhead">
        <h2>视频基本示例</h2>
      </div>
    </div>
    <div>
      <button @click="onInPoint">入点</button> 
      <button @click="onOutPoint">出点</button> 
      <button @click="onRemovePoint">清除</button> 
      <button @click="onCreatePointPart">拆条</button> 
      <button @click="onScreenshot">截屏</button> 
      <button @click="onScreenshot({time:80})">指定位置截屏</button><br>
      入点时间：{{inPoint}} 秒<br>
      出点时间：{{outPoint}} 秒<br>
      <div class="item">
        <div class="player">
          <video-player
            class="vjs-custom-skin"
            ref="videoPlayer"
            :options="playerOptions"
            :playsinline="true"
            @inPointChange="inPointChange($event)"
            @outPointChange="outPointChange($event)"
            @removePointChange="removePointChange($event)"
            @createPointPartChange="createPointPartChange($event)"
            @screenshotChange="screenshotChange($event)"
          >
          </video-player>
        </div>
      </div>
      <div style="float:left;margin:10px" v-for="(item,index) in imgList" :key="index">
        <h3>{{item.targetTime}} 秒</h3>
        <img :src="item.vjsShootImgSrc" alt="" srcset="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "video",
  data() {
    return {
      inPoint:0,
      outPoint:0,
      imgList:[],
      playerOptions: {
        height: "360",
        autoplay: true,
        muted: false,
        language: "zh-CN",
        aspectRatio: "16:9",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [
          {
            type: "video/mp4",// mp4
            src:
              "http://bjcloudhongqi.wengegroup.com:8387/bucketeducation/60404bac4df45d60a76989d4.mp4",
          },
        ],
        controlBar: {
          children: [
            {name: "playToggle",},
            {name: "volumePanel",inline: false,}, // 音量调整方式横线条变为竖线条  
            {name: "progressControl",},
            {name: "currentTimeDisplay",},
            {name:"inPoint",// 入点},
            {name:"outPoint",// 出点},
            {name:"removePoint",// 清除打点},
            {name:"createPointPart",// 拆条},
            {name:"screenshot",// 截屏},
           
          ],
        },
      },
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  methods: {
    // 事件
    inPointChange(time) {
      this.inPoint = time
    },
    
    outPointChange(time) {
      this.outPoint = time
    },
    removePointChange(player) {
      this.inPoint = 0
      this.outPoint = 0
    },
    createPointPartChange(time) {
      console.log(time);
    },
    screenshotChange(data) {
      console.log('触发了截图',data);
      this.imgList.push(data)
    },



    onInPoint() {
     this.inPoint = this.player.setInPoint()
    },
    onOutPoint() {
     this.outPoint = this.player.setOutPoint()
    },
    onRemovePoint() {
      this.player.removePoint()
    },
    onCreatePointPart() {
      this.player.createPointPart()
    },
    onScreenshot(data) {
      this.player.screenshot(data)
    },

  },
};

API

事件

| 时间名称 | 说明 | 回调参数 | | ---- | ---- |---- | | inPointChange | 入点时触发的回调 |Function(time) | | outPointChange | 出点时触发的回调 | Function(time) | | removePointChange | 清除打点时触发的回调 | — | | createPointPartChange | 拆条时触发的回调 | Function(time) | | screenshotChange | 截屏时触发的回调 | Function(data) data包含，targetTime截屏时间、vjsShootImgSrc缩略图base64、vjsThumbnailOriginal原图base64 |

方法

| 名称 | 描述 | 入参 | | ---- | ---- |---- | | setInPoint | 设置入点 | 类型number、默认值空（设置打点的位置，默认为空） | | setOutPoint | 设置出点 |类型number、默认值空（设置打点的位置，默认为空） | | removePoint | 清空打点 | — | | createPointPart | 生成拆条 | — | | screenshot | 截屏 | 类型object、默认值空（其中time是指定位置截屏） |