vue2不使用插件实现视频压缩功能

要实现视频压缩功能，可以使用HTML5中的MediaRecorder API，不需要使用插件。MediaRecorder API是一种浏览器原生的JavaScript API，可以在不使用插件的情况下实现音频和视频录制，以及压缩功能。以下是一个简单的示例代码，演示如何使用MediaRecorder API对视频进行压缩：

<video id="myVideo" src="video.mp4"></video>
<button id="startRecording">开始录制</button>
<button id="stopRecording">停止录制</button>
<button id="playVideo">播放录制的视频</button>

<script>
  const video = document.getElementById('myVideo');
  const startBtn = document.getElementById('startRecording');
  const stopBtn = document.getElementById('stopRecording');
  const playBtn = document.getElementById('playVideo');
  let mediaRecorder, chunks = [];

  startBtn.addEventListener('click', startRecording);
  stopBtn.addEventListener('click', stopRecording);
  playBtn.addEventListener('click', playVideo);

  function startRecording() {
    chunks = [];
    const stream = video.captureStream();
    mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    };
    mediaRecorder.start();
  }

  function stopRecording() {
    mediaRecorder.stop();
  }

  function playVideo() {
    const blob = new Blob(chunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const video = document.createElement('video');
    video.src = url;
    document.body.appendChild(video);
  }
</script>

在上面的代码中，我们使用MediaRecorder API对video元素进行录制，录制完成后可以将录制的视频进行压缩。在录制期间，我们将数据存储在一个数组中，然后在录制完成后对这个数组进行压缩处理。这里使用了video/webm格式，因为它是一种流行的视频格式，同时在大多数浏览器中都受到支持。