如何播放html中输入字段的视频

Question

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

为了获取用户输入，我有这个：

<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>

如何将从用户输入文件路径收集的任何值作为变量来获取第二段代码所播放的内容？

谢谢。

编辑

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

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


<script>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();
});
</script>

<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"></video>

Answer 1

在 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>

编辑

只需移除源元素并将媒体直接添加到视频元素即可触发播放。

Answer 2

另一种方法是替换视频标签的html

html:

<video id="vp" autoplay muted loop controls>
    <source id="videoprev" src=""  type="video/mp4">
</video>

JQuery：

$("#vp").html('<source src="'+URL.createObjectURL(file)+'" type="video/mp4"></source>');

在本例中，我们从输入文件中获取 src