Question

我有这个代码在按钮点击时更改视频，我希望用户输入mp4视频链接，并且视频在按钮点击时更改为用户输入的视频，我已经尝试通过更改

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

到

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

这是我目前的整个代码

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

Answer 1

我在文本输入字段中添加了一个ID，以便更容易检索信息，如果您打算使用这样的事件处理程序，则实际上并不需要表单。

之后，您只需要获取文本输入中写入的信息并将其作为src属性放置，说实话，您已经完成了很多工作。

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

Answer 2

试试这个

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

使用用户输入更改按钮上的视频

2 个答案: