h5上传视频并预览 php,H5上传前预览视频(结合 video标签 &&h5 fileApi)
时间: 2023-12-06 07:45:25 浏览: 27
首先,需要在 HTML 中添加一个 input 元素,用于选择要上传的视频文件:
```html
<input type="file" name="video" id="video-input"/>
```
然后,在 JavaScript 中,我们可以监听 input 元素的 change 事件,获取用户选择的视频文件,并将其预览在页面上:
```javascript
const videoInput = document.getElementById('video-input');
videoInput.addEventListener('change', function() {
const videoFile = this.files[0];
const videoURL = URL.createObjectURL(videoFile);
const previewContainer = document.getElementById('video-preview-container');
const previewVideo = document.createElement('video');
previewVideo.src = videoURL;
previewVideo.controls = true;
previewContainer.appendChild(previewVideo);
});
```
在上面的代码中,我们使用了 URL.createObjectURL() 方法,将视频文件转换为可预览的 URL。然后,创建一个 video 元素,并将预览 URL 赋值给它的 src 属性,同时设置 controls 属性以显示视频控件。最后,将 video 元素添加到页面上的容器中。
完整的 HTML 和 JavaScript 代码示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Upload Video Preview</title>
</head>
<body>
<input type="file" name="video" id="video-input"/>
<div id="video-preview-container"></div>
<script>
const videoInput = document.getElementById('video-input');
videoInput.addEventListener('change', function() {
const videoFile = this.files[0];
const videoURL = URL.createObjectURL(videoFile);
const previewContainer = document.getElementById('video-preview-container');
const previewVideo = document.createElement('video');
previewVideo.src = videoURL;
previewVideo.controls = true;
previewContainer.appendChild(previewVideo);
});
</script>
</body>
</html>
```
注意,以上代码只是一个简单的示例,实际应用中还需要处理视频文件的上传和保存等操作。