Question

假设我的html页面中没有指定源的视频元素

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

和一个空的输入元素

<input></input>

我希望用户在输入元素中粘贴他想要查看的视频源，然后按Enter键查看它。但是，为了能够做到这一点，我甚至无法弄清楚谷歌/学习的内容。有人可以帮忙吗？这是一个jsfiddle http://jsfiddle.net/aj9jy6tv/

所以，只是为了澄清一下，我想要一个文本字段，用户可以在其中输入一个视频源的URL位置，然后当他们按回车键时，应用程序抓取该文本并用它填充视频标签的来源< / p>

Answer 1

这将从输入中获取值并更改src属性。然后，您必须致电load()和play()。你可以搞乱你想要的输入方式，以达到你想要的方式。

Fiddle此处显示功能。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: