input上传视频并本地预览
时间: 2023-05-31 11:07:32 浏览: 115
很高兴为您解答。要实现上传视频并本地预览,您需要使用HTML5的video标签配合JavaScript实现。您可以使用FileReader API读取本地视频文件,然后将其转换成base64编码的数据,再通过URL.createObjectURL()生成本地预览的URL。具体的代码实现可以参考以下示例:
HTML代码:
```html
<input type="file" id="videoFile">
<video id="preview" width="320" height="240" controls></video>
```
JavaScript代码:
```javascript
const input = document.getElementById('videoFile');
const video = document.getElementById('preview');
input.addEventListener('change', () => {
const file = input.files[0];
const reader = new FileReader();
reader.onload = () => {
video.src = URL.createObjectURL(file);
};
reader.readAsDataURL(file);
});
```
请注意,在某些浏览器上,使用URL.createObjectURL()创建的URL可能会在页面刷新或关闭后失效,您需要在不需要使用该URL时及时释放它。
阅读全文