html选择视频文件上传并显示
时间: 2023-09-02 13:02:50 浏览: 78
在HTML中,我们可以使用<input>元素的type属性设置为"file"来实现视频文件上传,并使用HTML5的<video>元素来显示所选的视频文件。
首先,在HTML文件中,我们需要添加一个<form>元素来包含上传视频的输入框和一个<video>元素用于显示选中的视频文件,如下所示:
```html
<form>
<input type="file" accept="video/*" onchange="displayVideo(this)"><br>
<video id="videoPlayer" controls></video>
</form>
```
接下来,我们使用accept属性将文件选择器限制为只接受视频文件。onchange属性用于在文件选择发生变化时调用JavaScript函数displayVideo。
然后,我们需要编写JavaScript函数displayVideo来实现视频文件的显示:
```javascript
function displayVideo(input) {
var videoPlayer = document.getElementById('videoPlayer');
var file = input.files[0];
var reader = new FileReader();
reader.onload = function(e) {
videoPlayer.src = e.target.result;
};
reader.readAsDataURL(file);
}
```
在displayVideo函数中,我们首先获取<video>元素和用户选择的视频文件。然后,使用FileReader对象读取视频文件,并将其转换为data URL(DataURL是一种特殊的URL格式,可以在没有网络连接的情况下,将文件内容嵌入到HTML中,从而使文件可以直接显示或下载)。最后,将data URL赋值给<video>元素的src属性,以显示选中的视频文件。
在浏览器中运行该HTML文件时,将显示一个文件选择框,用户可以选择视频文件。选中视频文件后,将会自动将其显示在<video>元素中。