想要更改带有输入字段的视频src



这里是第一次使用JavaScript的初学者。我想在我的网站上播放视频,但当我在输入字段中输入某个单词并提交它时,我希望它更改视频的src属性。

我会有五六个不同的单词,每个单词都有一个不同的视频";指定";他们。

以下是我迄今为止尝试的内容:

const myInputField = document.getElementById('field');
const myButton = document.getElementById('button');
const myVideo = document.getElementById('video');
myButton.addEventListener("click", changeSrc);
var a = myInputField.value;
function changeSrc(event) {
event.preventDefault();
if (a === "BRUH") {
myVideo.src = "vid2.mp4";
} else {;
}
}
<body>
<div>
<form>
<input type="text" id="field" oninput="let p=this.selectionStart;this.value=this.value.toUpperCase();this.setSelectionRange(p, p);">
<button type="submit" id="button">CONFIRM</button>
</form>
</div>
<div>
<video src="vid1.mp4" id="video" width="640" height="480" loop="true" autoplay="autoplay" muted></video>
</div>
</body>

const myInputField = document.getElementById('field');
const myButton = document.getElementById('button');
const myVideo = document.getElementById('video');

myButton.addEventListener("click", changeSrc);
var a = myInputField.value;
function changeSrc(event) {
event.preventDefault ();
switch(myInputField.value){
case "WORD1":
myVideo.src = "vid1.mp4";
break;
case "WORD2":
myVideo.src = "vid2.mp4";
break;
case "WORD3":
myVideo.src = "vid3.mp4";
break;
case "WORD4":
myVideo.src = "vid4.mp4";
break;
case "WORD5":
myVideo.src = "vid5.mp4";
break;

}

}

最新更新