想用输入字段更改视频源

编程问答 2022-05-15

问题描述

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