想要使用输入字段更改视频 src答案

【问题标题】：Want to change video src with input field想要使用输入字段更改视频 src
【发布时间】：2021-04-03 15:45:19
【问题描述】：

这里是第一次使用 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>

【问题讨论】：

标签： javascript html video input src

【解决方案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;
       
       }
       
    }

【讨论】：