CODEWITHSUNDEEP
javascripthtml
Emirhan Bayrak
Emirhan Bayrak

Reputation: 63

Changing video on button click with user input

I have this code that changes the video on button click, I want the user to input a mp4 video link and that the video changes to the video of the user input on the button click, I have tried it by changing

var newmp4 = 'http://medias.jilion.com/sublimevideo/dartmoor.mp4';

to

var newmp4 = document.getElementById('myForm');

This is the whole code I have at the moment

 <!DOCTYPE html>
<head></head>
<body>
<p><a href="#" id="videolink1">Change video</a></p>
<video id="videoclip" controls="controls" title="Video title">
  <source id="mp4video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"  />
 </video>

    <form id="myForm" >
<input type="text"><br>
</form>


 <script type="text/javascript">
var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var newmp4 = 'http://medias.jilion.com/sublimevideo/dartmoor.mp4';


var videobutton = document.getElementById("videolink1");

videobutton.addEventListener("click", function(event) {
    videocontainer.pause();
    videosource.setAttribute('src', newmp4);
    videocontainer.load();
    //videocontainer.setAttribute('poster', newposter); //Changes video poster image
    videocontainer.play();
}, false);

</script>
</body>
</html>

Upvotes: 0

Views: 69

Answers (2)

keziah
keziah

Reputation: 574

Try this

<p><a href="#" id="videolink1">Change video</a></p>
<video id="videoclip" src="http://www.w3schools.com/html/mov_bbb.mp4" controls="controls" title="Video title"></video>

<form id="myForm" >
    <input type="text"><br>
</form>


<script type="text/javascript">
    var videocontainer = document.getElementById('videoclip');
    var newmp4 = 'http://medias.jilion.com/sublimevideo/dartmoor.mp4';


    var videobutton = document.getElementById("videolink1");

    videobutton.addEventListener("click", function (event) {
        videocontainer.pause();
        videocontainer.setAttribute('src', newmp4);
        videocontainer.load();
        //videocontainer.setAttribute('poster', newposter); //Changes video poster image
        videocontainer.play();

        return false;
    }, false);

</script>

Upvotes: 0

Remysc
Remysc

Reputation: 187

I added an ID to the text input field in order to make the information easier to retrieve, you don't actually need a form if you are going to use an event handler like that.

After that, you just have to get the information written in the text input and put it as src attribute, you were pretty much done to be honest.

 <!DOCTYPE html>
<head></head>
<body>
<p><a href="#" id="videolink1">Change video</a></p>
<video id="videoclip" controls="controls" title="Video title">
  <source id="mp4video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"  />
 </video>

    <form id="myForm" >
<input type="text" id="newlink"><br> <!-- Added id-->
</form>


 <script type="text/javascript">
var videocontainer = document.getElementById('videoclip');
var videosource = document.getElementById('mp4video');
var newmp4 = 'http://medias.jilion.com/sublimevideo/dartmoor.mp4';


var videobutton = document.getElementById("videolink1");

videobutton.addEventListener("click", function(event) {
    videocontainer.pause();
    videosource.setAttribute('src', document.getElementById("newlink").value);//Gets the element from the text input
    videocontainer.load();
    //videocontainer.setAttribute('poster', newposter); //Changes video poster image
    videocontainer.play();
}, false);

</script>
</body>
</html>

Upvotes: 1

Related Questions