vue中,使用video组件读取本地视频文件
时间: 2024-10-23 12:09:01 浏览: 9
vue3+wangEditor5自定义上传音频+视频
在Vue.js中,使用`<video>`组件播放本地视频文件通常涉及到两部分操作:HTML结构设置和JavaScript事件绑定。
1. HTML结构:
```html
<template>
<div>
<video ref="myVideo" :src="videoSrc"></video>
<button @click="selectFile">选择本地视频</button>
</div>
</template>
```
这里,我们创建了一个`<video>`元素,并通过`:src`属性将视频源绑定到`videoSrc`数据属性上。`ref`属性用于获取DOM元素以便后续操作。
2. JavaScript逻辑:
```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指向的视频。
阅读全文