Question

我想输入视频名称到文本框，按ENTER按钮然后浏览器播放我存储在磁盘中的视频。但我不知道如何获取HTML视频src的文本框值。

此链接“love.mpe”已修复。如何用输入文本框的值替换它？

enter image description here

这是我的代码

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

Answer 1

1.像这样使用HTML

<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.获取文本框值

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

3：现在设置源

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

Answer 2

将您的getValue()功能更改为changeValue()并将其代码更改为：

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

确保取消注释以使其有效。

如何将文本框值传递给HTML和JavaScript中的src链接？

2 个答案: