更改视频按钮点击用户输入

我有这个代码，改变了按钮点击视频，我希望用户输入一个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>

来源

2016-05-23 Emirhan Bayrak

为了使信息更易于检索，我在文本输入字段中添加了一个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>

来源

2016-05-23 12:43:34 Remysc

感谢您的帮助，现在工作得很好！ –

不客气，如果您对整件事情有任何疑问，请不要犹豫。 – Remysc

试试这个

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

来源

2016-05-23 12:46:56 keziah

更改视频按钮点击用户输入

回答

相关问题