**一、HTML 结构及 input 选择器设置**
首先，在页面上创建一个用于选取文件以及展示已选视频内容的部分：
html
<div id="uploader">
<input type="file" accept="video/*" id="choose-video"/>
</div>
<video controls width="400" height="300" src="" id="preview"></video>
<button onclick="deleteVideo()">删除视频</button>
此处我们定义了一个接受 video 类型文件的选择框(input标签)，一个用来播放预览视频的`<video>`元素，还有一个按钮用以执行删除操作。
**二、监听文件变化事件并加载预览**
接下来通过JS为输入类型为 file 的元素绑定 change 事件处理器:
javascript
document.getElementById('choose-video').addEventListener('change', function(event) {
var selectedFile = event.target.files[0];
if (selectedFile.type.match('video.*')) {
let URL.createObjectURL = window.URL || window.webkitURL;
document.querySelector('#preview').src = URL.createObjectURL(selectedFile);
} else {
alert("请选择有效的视频文件!");
}
});
上述代码会在当用户选定文件后触发，获取到所选中的第一个文件对象并对其实现实时预览。这里利用了 `createObjectURL()` 方法将 File 对象转换成指向该 Blob 数据的一个 DOMString ，这个字符串可以被 `<video>` 元素当作源地址引用从而达到预览效果。
**三、实现删除函数逻辑**
为了能够清除已经添加上去的视频预览，我们需要编写“删除”按钮对应的处理程序：
javascript
function deleteVideo() {
// 清空视频预览数据
const previewElement = document.getElementById('preview');
previewElement.src = "";
// 取消对之前选定文件的选择状态(IE9+)
try {
$('#choose-file')[0].value = null;
} catch(e){}
// 如果需要清空前一次生成的对象url，则需释放内存资源
if(window.URL && URL.revokeObjectURL){
URL.revokeObjectURL(previewElement.src);
}
}
// 绑定点击事件
document.getElementById('your-delete-button-id-here').onclick = deleteVideo;
这段代码主要做了两件事：一是重置视频预览区的内容；二是尝试取消先前选定的文件状态，使得下一次可以选择新的文件。同时考虑到性能优化问题，还调用了 revokeObjectURL 来回收由 createObjectURL 创建的临时系统内联 URI 所占用的存储空间。
总结起来，借助于原生 JavaScript 我们成功实现了：
1. 视频文件的上传；
2. 预览上传成功的视频片段；
3. 删除已上传且正在预览的视频的功能。
这样的设计既简洁又高效地满足了一般网站或应用对于前端视频上传的基本要求。当然实际项目开发过程中还需考虑更多因素如错误处理、跨平台兼容性等问题，但以上核心流程足以作为一个良好的基础起点。