Question

我正在为我的视频播放实施视频选择功能，以便人们可以选择他们想要观看的视频。我目前的代码是这样的：

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（））。

我显然在某个地方出了问题，并希望能提供任何指导。

非常感谢。

Answer 1

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

在addEventListener来电中，您告诉它听取onchange这不是真实的事件。 MDN有一个方便的list of events。您将要使用change事件。

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

旁注：由于您已在此处附加了事件监听器：

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

Answer 2

你的javascript有一个“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();
    // }
}

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

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

使用<select>标签的视频选择不起作用</select>

2 个答案: