I created a video playlist in HTML, and the videos play, but when you select another video, the previous one stays highlighted, and I want the highlight to be removed once another video name is clicked. http://www.evamagnus.com/OurServices.php In the video.js code, I have
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";
}
}
Thanks.
since you are using jQuery you should be able to replace all your code in your video.js file with this...
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";
}
}
here is an online example with a couple css enhancements that help show they are buttons with pointer cursor and hover bg. added button borders and gradient css styles.
http://jsfiddle.net/DaveAlger/AQYjY/8/
hope this works for you (be sure to mark the question as answered)