vue2压缩视频方法

Vue2 本身并不提供视频压缩的功能，但是可以通过调用第三方库实现。以下是基于 `videojs-contrib-hls` 和 `videojs-record` 库实现视频压缩的示例代码：

1. 安装依赖：

npm install videojs-contrib-hls videojs-record recordrtc --save

2. 在 Vue 单文件组件中引入依赖：

import 'video.js/dist/video-js.css'
import videojs from 'video.js'
import 'videojs-record/dist/css/videojs.record.css'
import RecordRTC from 'recordrtc'
import Record from 'videojs-record/dist/videojs.record'
import Hls from 'videojs-contrib-hls'

export default {
  name: 'VideoCompression',
  data () {
    return {
      videoRef: null,
      player: null,
      recordOptions: {
        controls: true,
        width: 400,
        height: 300,
        fluid: false,
        plugins: {
          record: {
            audio: true,
            video: true,
            maxLength: 10,
            debug: true,
            videoMimeType: 'video/mp4',
            audioMimeType: 'audio/mp3'
          }
        }
      },
      recordRTC: null
    }
  },
  mounted () {
    this.initPlayer()
  },
  methods: {
    initPlayer () {
      const options = {
        plugins: {
          record: this.recordOptions.plugins.record,
          hls: {}
        }
      }
      this.player = videojs(this.$refs.videoPlayer, options, () => {
        console.log('Video player is ready')
      })
      this.player.on('startRecord', () => {
        console.log('Recording started')
      })
      this.player.on('finishRecord', () => {
        console.log('Recording finished')
        this.compressVideo()
      })
    },
    startRecording () {
      this.player.record().getDevice()
      this.player.record().start()
    },
    stopRecording () {
      this.player.record().stop()
    },
    compressVideo () {
      this.recordRTC.getDataURL((dataURL) => {
        const blob = this.dataURItoBlob(dataURL)
        const formData = new FormData()
        formData.append('file', blob, 'video.mp4')
        // 发送压缩后的视频到服务器端
        // ...
      })
    },
    dataURItoBlob (dataURI) {
      const byteString = atob(dataURI.split(',')[1])
      const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
      const ab = new ArrayBuffer(byteString.length)
      const ia = new Uint8Array(ab)
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
      }
      return new Blob([ab], { type: mimeString })
    }
  }
}

3. 在模板中添加视频播放器和控制按钮：

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin"></video>
    <button @click="startRecording">Start Recording</button>
    <button @click="stopRecording">Stop Recording</button>
  </div>
</template>

上述代码中，`startRecording` 方法启动录制，`stopRecording` 方法停止录制，并调用 `compressVideo` 方法进行视频压缩。在 `compressVideo` 方法中，使用 `recordRTC.getDataURL` 方法获取录制的视频数据，将数据转化为 Blob 格式并发送到服务器端进行压缩处理。