如何从HTML中的输入字段播放视频 编辑

如何解决如何从HTML中的输入字段播放视频 编辑

我想创建一个页面，允许用户从其本地计算机上选择一个视频文件，然后使该视频在html上播放。我想出了每个单独的部分，但是如何让它们进行交互。

要获得用户输入，我要这样做：

python3 manage.py search_index --rebuild -f

要播放视频，我有以下内容：

<label for="input">Choose a video file to process:</label>

<input type="file"
       id="input" name="input_video"
       accept="video/mp4,video/mov">

如何从用户输入文件路径中获取任何值作为变量，使其成为第二段代码所播放的内容？

谢谢。

编辑

我的代码现在看起来像这样，但是视频文件播放器将无法播放我选择的文件。

<video width="320" height="240" controls>
  <source src="" type="video/mp4">
</video>

解决方法

使用javascript中输入的change事件获取文件，然后使用URL.createObjectURL创建用作src的临时文件。

document.getElementById("input").addEventListener("change",function() {
  var media = URL.createObjectURL(this.files[0]);
  var video = document.getElementById("video");
  video.src = media;
  video.style.display = "block";
  video.play();
});

<label for="input">Choose a video file to process:</label>
<input type="file" id="input" name="input_video" accept="video/mp4,video/mov">
<video id="video" width="320" height="240" controls style="display: none;"></video>

编辑

只需删除源元素，然后将媒体直接添加到视频元素，然后触发播放即可。