当前位置：首页 > VUE

vue实现手机视频

2026-02-19 15:18:33VUE

Vue 实现手机视频功能

在 Vue 中实现手机视频功能，通常涉及视频播放、录制、上传等操作。以下是几种常见场景的实现方法：

视频播放

使用 HTML5 的 <video> 标签，结合 Vue 的动态绑定功能：

<template>
  <video 
    ref="videoPlayer" 
    :src="videoSrc" 
    controls 
    @play="onPlay" 
    @pause="onPause">
  </video>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'your-video-url.mp4'
    }
  },
  methods: {
    onPlay() {
      console.log('视频开始播放')
    },
    onPause() {
      console.log('视频暂停')
    }
  }
}
</script>

视频录制

利用浏览器 MediaDevices API 实现视频录制功能：

<template>
  <video ref="preview" autoplay muted></video>
  <button @click="startRecording">开始录制</button>
  <button @click="stopRecording">停止录制</button>
</template>

<script>
export default {
  data() {
    return {
      mediaStream: null,
      mediaRecorder: null,
      recordedChunks: []
    }
  },
  methods: {
    async startRecording() {
      try {
        this.mediaStream = await navigator.mediaDevices.getUserMedia({
          video: true,
          audio: true
        })
        this.$refs.preview.srcObject = this.mediaStream
        this.mediaRecorder = new MediaRecorder(this.mediaStream)

        this.mediaRecorder.ondataavailable = event => {
          if (event.data.size > 0) {
            this.recordedChunks.push(event.data)
          }
        }

        this.mediaRecorder.start()
      } catch (error) {
        console.error('获取媒体设备失败:', error)
      }
    },
    stopRecording() {
      this.mediaRecorder.stop()
      this.mediaStream.getTracks().forEach(track => track.stop())

      const blob = new Blob(this.recordedChunks, { type: 'video/mp4' })
      const videoUrl = URL.createObjectURL(blob)
      console.log('录制完成，视频URL:', videoUrl)
    }
  }
}
</script>

视频上传

实现视频文件上传功能：

<template>
  <input type="file" accept="video/*" @change="handleFileUpload">
  <button @click="uploadVideo">上传视频</button>
</template>

<script>
export default {
  data() {
    return {
      videoFile: null
    }
  },
  methods: {
    handleFileUpload(event) {
      this.videoFile = event.target.files[0]
    },
    async uploadVideo() {
      if (!this.videoFile) return

      const formData = new FormData()
      formData.append('video', this.videoFile)

      try {
        const response = await axios.post('/api/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        console.log('上传成功:', response.data)
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

响应式视频布局

确保视频在不同设备上正确显示：

/* 在组件样式中添加 */
video {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

@media (orientation: portrait) {
  video {
    width: 100%;
    height: auto;
  }
}

@media (orientation: landscape) {
  video {
    width: auto;
    height: 100%;
  }
}