javascript - 有没有办法将html5视频的来源作为用户的输入？

Question

假设我的 html 页面中有一个视频元素，但未指定源

<video controls>
<source src="">
</video>

和一个空输入元素

<input></input>

我希望用户将他想要查看的视频源粘贴到输入元素中，然后按 Enter 键查看它。但我根本不知道要谷歌/学习什么才能做到这一点。有人可以帮忙吗？这是一个jsfiddle http://jsfiddle.net/aj9jy6tv/

所以，为了澄清一下，我想要一个文本字段，用户可以在其中输入视频源的 url 位置，然后当他们按 Enter 时，应用程序会抓取该文本并用它填充视频标记的源

Answer 1

这将从输入中获取值并更改 src 属性。然后，您必须调用 load() 和 play()。您可以随意调整输入方式，以达到您想要的方式。

Fiddle这里显示功能。

// Note this is the url im pasting into the input: https://www.w3schools.com/html/movie.ogg

(function() {
  document.getElementById('url').addEventListener('keydown', function(e) {
    if (e.keyCode === 13) {
      var url = this.value;
      document.getElementById("video_res_1").src = url;
      document.getElementById("video1").load();
      document.getElementById("video1").play(); 
    }
  });
})();

<input type="text" id="url" placeholder="Enter Url">
<video id="video1" width="240" height="160">
    <source id="video_res_1" src="" type="video/ogg">
</video>