CODEWITHSUNDEEP
javascripthtml
ThanhLam112358
ThanhLam112358

Reputation: 916

How to pass textbox value to src link in HTML and javascript?

I want to enter video name to textbox, press ENTER button then browser play video I have stored in my disk. But I don't know how to get textbox value to HTML video src.

This link "love.mpe" is fixed. How can I replace it with value I enter textbox?

enter image description here

Here is my code

<script type="text/javascript">
	function nhap_so(value)
	{
		document.getElementById("txtText").value += value;
	}
	function clearText() 
	{
    	document.getElementById("txtText").value = "";
	}
	function playVideo() 
	{ 
    	myVideo.play(); 
	} 

	function stopVideo() 
	{ 
    	myVideo.pause(); 
	} 
	/*function getValue()
	{
		var myString = document.getElementById("txtText").value;
		return myString;
		
	}*/
</script>
<script type="text/javascript" src="demo_getvalue.js"></script>
<body>
<input name="txtText" type="text" id="txtText" size="20" maxlength="10" disabled="disabled"/>
<br />
<br />
<br />
<input type="button" value="1" width="20" height="20" onclick="nhap_so(1);" id="so_1"  />
<input type="button" value="2" width="20" height="20" onclick="nhap_so(2);" id="so_2" />
<input type="button" value="3" width="20" height="20" onclick="nhap_so(3);" id="so_3" />
<br />
<input type="button" value="4" width="20" height="20" onclick="nhap_so(4);" id="so_4"  />
<input type="button" value="5" width="20" height="20" onclick="nhap_so(5);" id="so_5" />
<input type="button" value="6" width="20" height="20" onclick="nhap_so(6);" id="so_6" />
<br />
<input type="button" value="7" width="20" height="20" onclick="nhap_so(7);" id="so_7"  />
<input type="button" value="8" width="20" height="20" onclick="nhap_so(8);" id="so_8" />
<input type="button" value="9" width="20" height="20" onclick="nhap_so(9);" id="so_9" />
<br />
<input type="button" value="0" width="20" height="20" onclick="nhap_so(0);" id="so_0" />
<input type="button" value="ENTER" width="20" height="20" onclick="getValue();"/>
<input type="button" value="CLEAR" width="20" height="20" onclick="clearText();"/>
<br />
<br />
<video id="myVideo" width="640" height="360">
  <source src="love.mp4" type="video/mp4"> 
</video>
<br />
<br />
<input type="button"  value="PLAY" width="20" height="20" onclick="playVideo();" />
<input type="button" value="PAUSE" width="20" height="20" onclick="stopVideo();" />

Upvotes: 0

Views: 1430

Answers (2)

Mustaghees
Mustaghees

Reputation: 526

Change your getValue() function to changeValue() and change its code to this:

changeValue () {
 newVal = document.getElementById('txtText').value;
 document.getElementById('myVideo').firstChild.src = newVal + ".mp4";
}

Make sure to uncomment it so it works.

Upvotes: 1

Zohaib Waqar
Zohaib Waqar

Reputation: 1239

1.Make you HTML like this 

<video id='videoPlayer' width="320" height="240" controls="controls">
   <source id='mp4Source' src="movie.mp4" type="video/mp4" />
   <source id='oggSource' src="movie.ogg" type="video/ogg" />
</video>

2.Get get Textbox value 

var VideoLink = document.getElementById("myText").value;

3: now set the source

var player = document.getElementById('videoPlayer');

      var mp4Vid = document.getElementById('mp4Source');

      player.pause();

      // Now simply set the 'src' attribute of the mp4Vid variable!!!!
      // (...using the jQuery library in this case)

      $(mp4Vid).attr('src', VideoLink);

      player.load();
      player.play();

Upvotes: 0

Related Questions