CODEWITHSUNDEEP
javascriptjqueryhtmlvideo
Usman Sikander
Usman Sikander

Reputation: 79

Is there a way to take the source of an html5 video as an input by the user?

Say I have a video element in my html page without the source specified

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

and an empty input element

<input></input>

I want the user to paste the source of the video he wants to see in the input element and press enter to see it. But I simply can't figure out even what to google/learn in order to be able to do it. Can anyone help? Here is a jsfiddle http://jsfiddle.net/aj9jy6tv/

So, just to clarify, what I want a text field where the user can enter a url location to a video source, then when they press enter, the application grabs that text and populates the source of the video tag with it

Upvotes: 0

Views: 93

Answers (1)

kemotoe
kemotoe

Reputation: 1777

This will grab the value from the input and change the src attribute. You must then call load() and play(). You can mess with how you want to do the input to get it the way you want.

Fiddle here showing functionality. 

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

Upvotes: 3

Related Questions