我的在线视频播放器无法运行，HTML本地视频上传播放代码失效求建议

代码存在的问题 #

• 上传文件的<input>控件未绑定change事件，选择视频文件后无法触发处理逻辑
• 给<source>标签设置资源地址时属性名写错，source标签生效的属性是src，不是你写的srcvideo
• 代码中尝试获取id为audio的元素，但页面中不存在该元素，调用play方法会直接抛出异常，阻塞后续逻辑运行
• 你当前的逻辑不需要React相关依赖，可以直接删除

修复后可直接运行的代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="file" id="upload" accept=".mp4,.webm, .mov"/><br>
<video id="video" controls style="width: 600px;margin-top: 10px;">
  <source src="" id="srcvideo" />
</video>
<script>
// 绑定上传控件的文件选择事件
document.getElementById('upload').addEventListener('change', handleFiles)
function handleFiles(event) {
    var files = event.target.files;
    // 正确设置视频源地址
    $("#srcvideo").attr("src", URL.createObjectURL(files[0]));
    const video = document.getElementById("video");
    video.load();
    video.play();
}
</script>

内容的提问来源于stack exchange，提问作者rxgkit