使用<选择>标记不起作用

Video selection using <select> tag does not work

本文关键字：不起作用 选择 lt 使用 gt      更新时间：2023-09-26

我正在为我的视频播放实现视频选择功能，这样人们就可以选择他们想看的视频。我当前的代码是这样的：

html:

<video id="media" width="600" height="400" preload="none">
       <source id="myvideos" src="files/Best of 60s.m4v"> </source>
</video>
<select id="videos">
        <option value="PleaseSelect" selected="selected">Please Select...</option>
        <option value="files/Best of 60s.m4v">Best of 60s</option>
        <option value="files/Black and White Gems.m4v">Black and White Gems</option>
</select>

Javascript：

var selectmenu, mmedia;
selectmenu=document.getElementById('videos'); 
mmedia = document.getElementById('media');
selectmenu.addEventListener('onchange', loadvid);
function loadvid(){
selectmenu.onchange=function(){
    var chosenoption=this.options[this.selectedIndex];
    if (chosenoption.value != "PleaseSelect"){
        mmedia.src = chosenoption.value;
    }
    mmedia.load();  
  }
}

当我运行这段代码时，除了我在src元素中所说的之外，我在选择菜单中选择的内容和播放的内容之间不会创建任何"链接"。

我以以下心态实现了这一点：

将onchange事件附加到select元素，以便函数loadvid（）仅在菜单中发生更改时才会启动。

loadvid函数通过定义所选索引的值并将其传递给mmedia来管理视频的选择；其是视频元素并且具有src属性。

一旦做出选择，视频就应该加载（mmedia.load（））。

我显然在某个地方出了问题，如果你能提供任何指导，我将不胜感激。

非常感谢。

您的javascript有一个需要"change"的"onchange"；此外，以下注释了无关功能：

var selectmenu, mmedia;
selectmenu = document.getElementById('videos');
mmedia = document.getElementById('media');
selectmenu.addEventListener('change', loadvid);
function loadvid() {
    //selectmenu.onchange=function(){
    var chosenoption = this.options[this.selectedIndex];
    if (chosenoption.value != "PleaseSelect") {
        alert(chosenoption.value);
        mmedia.src = chosenoption.value;
    }
    mmedia.load();
    // }
}

您将遇到的另一个问题是在<video>标签中使用<source>；如果您只在视频标签中使用src=属性：，您可能会遇到较少的麻烦

<video name="media" id="media" width="600" height="400" preload="none" src="files/Best of 60s.m4v"></video>

你走在了正确的轨道上，然而，有一个"打字错误"阻止了你的代码工作：

在addEventListener调用中，您告诉它侦听onchange，这不是实际事件。MDN有一个方便的事件列表。您将需要使用change事件。

当您像<select onchange="loadvid()">那样直接将侦听器添加为HTML属性时，将使用on前缀。

旁注：由于您已经在此处附加了一个事件侦听器：

selectmenu.addEventListener('change', loadvid);

你不需要在这里再做一次：

function loadvid(){
selectmenu.onchange=function(){

照顾好这2个，你就会得到这个工作代码：

var selectmenu, mmedia;
selectmenu = document.getElementById('videos'); 
mmedia = document.getElementById('media');
selectmenu.addEventListener('change', loadvid);
function loadvid(){
    var chosenoption=this.options[this.selectedIndex];
    console.log(chosenoption);
    if (chosenoption.value != "PleaseSelect"){
        mmedia.src = chosenoption.value;
    }
    mmedia.load();  
}
相关文章：