vue中，使用video组件读取本地视频文件

在Vue.js中，使用`<video>`组件播放本地视频文件通常涉及到两部分操作：HTML结构设置和JavaScript事件绑定。

1. HTML结构：

<template>
  <div>
    <video ref="myVideo" :src="videoSrc"></video>
    <button @click="selectFile">选择本地视频</button>
  </div>
</template>

这里，我们创建了一个`<video>`元素，并通过`:src`属性将视频源绑定到`videoSrc`数据属性上。`ref`属性用于获取DOM元素以便后续操作。

2. JavaScript逻辑：

<script>
export default {
  data() {
    return {
      videoSrc: null,
    };
  },
  methods: {
    selectFile() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = 'video/*'; // 只接受视频文件

      fileInput.addEventListener('change', (e) => {
        if (e.target.files.length > 0) {
          this.videoSrc = URL.createObjectURL(e.target.files[0]); // 获取文件的URL
        }
      });

      fileInput.click();
    },
  },
};
</script>

在这个例子中，当用户点击“选择本地视频”按钮时，会弹出一个文件选择器。选择文件后，会触发`change`事件，获取选中的文件并将其转换为URL，赋值给`videoSrc`。然后浏览器会自动尝试播放这个URL指向的视频。