微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

想用输入字段更改视频源

如何解决想用输入字段更改视频源

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。