視頻選擇使用 <select>標簽不起作用

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有一個方便的事件列表 。 您將要使用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();
    // }
}

您將遇到的另一個問題是在<video>標記中使用<source> ; 如果您只是在視頻標記中使用src=屬性，那么您可能會遇到更少麻煩：

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