CODEWITHSUNDEEP
javascripthtmlvideo
Firas E.
Firas E.

Reputation: 51

Dynamically edit a link to change video source

I am trying to make a page where I can dynamically change <video> source link by inputting an episode number.

Here is an example: Example of page

And here is the code I have at the moment:

$(document).ready(function(){

    $('#button').click(function(e) {  
        var inputvalue = $("#input").val();
        window.location.replace("http://www.example.com/episode/"+inputvalue+"/somemoretext.mp4");

    });
});
<div><input type="text" value="Episode Number" id="input"> 
<button type="button" class='btn' id="button">Watch</button></div>

<video width="100%" controls="controls">
<source src="http://www.example.com/episode/24/somemoretext.mp4">
Your browser does not support this video's playback.
</video>

I would like the javascript to change the url of the video tag instead of the button.

Upvotes: 0

Views: 159

Answers (2)

zer00ne
zer00ne

Reputation: 43860

In the following Snippet, there are 5 videos.

  1. The click event was changed to to delegate click event (.on)
  2. The episode was assigned the value of #input and converted to a real Number.
  3. The video API doesn't understand what a jQuery object is so we must us plain JavaScript to reference the <video>
  4. Next we change the src property of <video/source> (when targeting a <video> that has a <source> we can target either one regardless of which element actually has the attribute).
  5. Last step is to load() the new url of the src property. This is necessary when the src is changed.

Note: I added $('#counter').val(episode) just because it looks neat but it's not necessary.

SNIPPET

$(document).ready(function() {

  $('#button').on('click', function(e) {
    var episode = Number($("#input").val());
    $('#counter').val(episode);
    var vid = document.getElementById('vid1');
    vid.src = 'http://glpjt.s3.amazonaws.com/so/av/vid' + episode + '.mp4';
    vid.load();
    vid.play();

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <legend>Video Episode:
    <output id='counter'></output>
  </legend>
  <input type="number" value="Episode Number" id="input" style='width:4ex' min='1' max='5'>
  <button type="button" class='btn' id="button">Watch</button>
</fieldset>

<video id="vid1" class="vid" style='width: 90vw;' controls>
  <source src="http://glpjt.s3.amazonaws.com/so/av/vid1.mp4" type='video/mp4'>
</video>

Upvotes: 1

Firas E.
Firas E.

Reputation: 51

Here is what worked for me thanks to @Tushar

$('#button').on({
    'click': function(){
    var inputvalue = $("#input").val();
    $('#videot').attr('src', "http://example.com/episode/" + inputvalue + "/something.mp4");
    }
});
<div>
<input type="text" value="Episode Number" id="input">
<button type="button" class='btn' id="button">Watch</button>
</div>

<video id='videot' width="100%" controls="controls">
<source src="http://example.com/episode/25/something.mp4" type="video/mp4">
Your browser does not support this video's playback.</video>

Upvotes: 1

Related Questions