想用输入字段更改视频源

Question

初学者第一次使用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>

Answer 1

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

想用输入字段更改视频源

Want to change video src with input field

html

javascript

video

input

src