vue2 插件压缩视频

您可以使用videojs-record插件来压缩视频，它基于videojs和ffmpeg.js构建，可以录制、压缩和转换视频。以下是使用videojs-record插件进行视频压缩的简单示例：

1. 首先，您需要将videojs-record插件添加到Vue项目中。您可以使用npm或yarn安装插件。

   npm install videojs-record

2. 在Vue组件中引入videojs和videojs-record插件，并创建一个video标签。

   <template>
     <div>
       <video id="myVideo" class="video-js vjs-default-skin"></video>
     </div>
   </template>

   <script>
   import videojs from 'video.js'
   import RecordRTC from 'recordrtc'
   import 'videojs-record/dist/css/videojs.record.css'
   import 'video.js/dist/video-js.css'
   import 'webrtc-adapter'

   export default {
     mounted() {
       this.initVideo()
     },
     methods: {
       initVideo() {
         const options = {
           controls: true,
           width: 640,
           height: 480,
           fluid: false,
           plugins: {
             record: {
               audio: true,
               video: true,
               maxLength: 60,
               debug: true
             }
           }
         }

         // create videojs player
         const player = videojs('myVideo', options, () => {
           console.log('video player is ready')
         })

         // error handling
         player.on('deviceError', () => {
           console.error('device error:', player.deviceErrorCode)
         })

         player.on('error', (error) => {
           console.error('error:', error)
         })

         // get video data
         player.on('finishRecord', (data) => {
           console.log('video data:', data)
         })
       }
     }
   }
   </script>

3. 在视频录制完成后，您可以使用ffmpeg.js将视频转换为所需的格式和大小。

   import ffmpeg from 'ffmpeg.js/ffmpeg-mp4.js'

   // convert video to mp4 format
   const convertToMp4 = (videoBlob) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader()
       reader.readAsArrayBuffer(videoBlob)
       reader.onload = () => {
         const ffmpegInstance = ffmpeg({
           MEMFS: [{ name: 'input.mp4', data: reader.result }],
           arguments: ['-i', 'input.mp4', '-c:v', 'libx264', '-crf', '20', '-preset', 'medium', '-c:a', 'aac', '-b:a', '128k', '-ac', '2', '-strict', '-2', '-f', 'mp4', 'output.mp4']
         })
         ffmpegInstance.load().then(() => {
           ffmpegInstance.run().then((result) => {
             const outputBlob = new Blob([result.MEMFS[0].data], { type: 'video/mp4' })
             resolve(outputBlob)
           }).catch((err) => {
             reject(err)
           })
         })
       }
     })
   }

在上面的示例中，我们使用了ffmpeg.js/ffmpeg-mp4.js，这是一个特定于mp4格式的版本。如果您需要转换为其他格式，请使用相应的版本。

4. 调用convertToMp4函数将视频转换为mp4格式。

   // get video data
   player.on('finishRecord', (data) => {
     console.log('video data:', data)

     // convert video to mp4 format
     convertToMp4(data.video).then((mp4Blob) => {
       console.log('mp4 video:', mp4Blob)
     }).catch((err) => {
       console.error('error converting to mp4:', err)
     })
   })

5. 最后，您可以将压缩后的视频上传到服务器或将其保存在本地。

   // save compressed video locally
   const downloadLink = document.createElement('a')
   downloadLink.href = window.URL.createObjectURL(mp4Blob)
   downloadLink.download = 'compressed-video.mp4'
   downloadLink.click()

请注意，视频压缩可能需要一些时间，这取决于视频的大小和您的计算机性能。