时间戳

首页 > 解决方案 > 想要使用输入字段更改视频 src

javascript - 想要使用输入字段更改视频 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>

标签： javascripthtmlvideoinputsrc

解决方案

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

推荐阅读