Javascript 如何删除播放列表中先前选定的视频上的突出显示?
我用HTML创建了一个视频播放列表,然后播放视频,但是当您选择另一个视频时,上一个视频将保持高亮显示,我希望在单击另一个视频名称后删除高亮显示。 在video.js代码中,我有Javascript 如何删除播放列表中先前选定的视频上的突出显示?,javascript,html5-video,playlist,Javascript,Html5 Video,Playlist,我用HTML创建了一个视频播放列表,然后播放视频,但是当您选择另一个视频时,上一个视频将保持高亮显示,我希望在单击另一个视频名称后删除高亮显示。 在video.js代码中,我有 var position = 0; var playlist; var video; window.onload = function() { video = document.getElementById('video'); addClickHandlers(); video.src = "v
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";
}
}
var位置=0;
var播放列表;
var视频;
window.onload=函数(){
video=document.getElementById('video');
addClickHandlers();
video.src=“video/”+getFormatExtension();
video.load();
video.play();
}
函数addClickHandlers(){
变量元素=document.queryselectoral(“ul#videolist li”);
对于(var i=0;i
谢谢。既然您使用的是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样式
希望这对您有用(请确保将问题标记为已回答)因为您使用的是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样式
希望这对您有用(请务必将问题标记为已回答)我希望可以,但我不是牙医。事实上,这些视频现在不播放了。它们仍然不播放。我得再调查一下。谢谢。它们在我的本地服务器上播放,但不在evamagnus.com所在的服务器上播放。我需要在该服务器上做一些更改,并将发布结果。嗨,DaveAlger:我为没有播放视频的混乱道歉。最初,我把这个网站放在本地服务器上,然后我把它上传到另一个服务器上,以便问我的问题,这样其他人就可以看到它。视频无法播放的原因是该服务器没有.htaccess文件以允许播放视频格式。上传.htaccess文件后,他们开始播放。您确实回答了我最初关于删除先前选定视频上的突出显示的问题。非常感谢。嗨,DaveAlger:我在JSFIDLE中有与您相同的代码,但是菜单项没有用亮蓝色选择。解决方案是将jQuery库移到HTML的头部部分,而不是移到正文部分的底部。哇,这花了太长时间才弄明白。谢谢你的帮助。我希望我能,但我不是牙医。事实上,这些视频现在不播放了。它们仍然不播放。我得再调查一下。谢谢。它们在我的本地服务器上播放,但不在evamagnus.com所在的服务器上播放。我需要在该服务器上做一些更改,并将发布结果。嗨,DaveAlger:我为没有播放视频的混乱道歉。最初,我把这个网站放在本地服务器上,然后我把它上传到另一个服务器上,以便问我的问题,这样其他人就可以看到它。视频无法播放的原因是该服务器没有.htaccess文件以允许播放视频格式。上传.htaccess文件后,他们开始播放。您确实回答了我最初关于删除先前选定视频上的突出显示的问题。非常感谢。嗨,DaveAlger:我在JSFIDLE中有与您相同的代码,但是菜单项没有用亮蓝色选择。解决方案是将jQuery库移到HTML的头部部分,而不是移到正文部分的底部。哇,这花了太长时间才弄明白。谢谢你的帮助。