如何刪除播放列表中先前選擇的視頻的高光？

Question

我在HTML中創建了一個視頻播放列表，並且視頻播放，但是當您選擇另一個視頻時，前一個視頻保持突出顯示，並且我希望在點擊另一個視頻名稱後刪除突出顯示。 http://www.evamagnus.com/OurServices.php 在了Video.js代碼，我有

var position = 0; 
var playlist; 
var video; 

window.onload = function() { 
    video = document.getElementById('video'); 
    addClickHandlers(); 
    video.src = "video/" + getFormatExtension(); 
    video.load(); 
    video.play(); 
} 

function addClickHandlers() { 
    var liElements = document.querySelectorAll("ul#videolist li"); 
    for (var i = 0; i < liElements.length; i++) { 
     var li = liElements[i]; 
     li.onclick = handleVideoSelection; 
    } 
} 

function handleVideoSelection(e) { 
    console.log(e); 
    var li = e.target; 
    var src = li.getAttribute("data-src"); 
    var isSelected = li.getAttribute("class"); 
    if (isSelected == "selected") { 
     if (video.paused) { 
      video.play(); 
     } 
     else if (video.ended) { 
      video.load(); 
      video.play(); 
     } 
     else { 
      video.pause(); 
     } 
    } 
    else { 
     li.setAttribute("class", "selected"); 
     video.src = src + getFormatExtension(); 
     video.load(); 
     video.play(); 
    } 
} 

function getFormatExtension() { 
    if (video.canPlayType("video/mp4") != "") { 
     return ".mp4"; 
    } else if (video.canPlayType("video/ogg") != "") { 
     return ".ogg"; 
    } else if (video.canPlayType("video/webm") != "") { 
     return ".webm"; 
    } 
} 

感謝。

Answer 1

因爲你使用jQuery，你應該能夠取代在此您的Video.js文件中的所有代碼...

var video = document.getElementById('video'); 
var ext = getFormatExtension(); // only need to get the extension once 

$("ul#videolist li").click(function(e){ 
    video.src = e.target.getAttribute("data-src") + ext; 
    video.load(); 
    video.play(); 

    // 1 - clear them all 
    $("ul#videolist li").removeClass(); 

    // 2 - set the clicked one 
    e.target.setAttribute("class", "selected"); 
}); 

function getFormatExtension() { 
    if (video.canPlayType("video/mp4") != "") { 
     return ".mp4"; 
    } else if (video.canPlayType("video/ogg") != "") { 
     return ".ogg"; 
    } else if (video.canPlayType("video/webm") != "") { 
     return ".webm"; 
    } 
} 

這裏是一對夫婦的CSS增強功能可以幫助顯示在線例如，它們是指針光標和懸停bg的按鈕。添加了按鈕邊框和漸變css樣式。

http://jsfiddle.net/DaveAlger/AQYjY/8/

希望這對你的作品（一定要標記了一個問題，回答）