更改視頻按鈕點擊用戶輸入

我有這個代碼，改變了按鈕點擊視頻，我希望用戶輸入一個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

更改視頻按鈕點擊用戶輸入

回答

相關問題