课程学习页面中的功能,左边是播放器,右边是播放列表,要求点击播放列表高亮显示并且播放对应的视频,当然我们没有小破站那么完善的功能,这里的重点是交互
首先左边是一个video元素,默认加载右边列表中的第一个视频,右边列表里面的每一个元素都要绑定一个mouseenter和mouseleave事件,并且第一个元素默认高亮,每一个元素都应该看成一个单选按钮,有且只有一个被选中,已经高亮的元素会被移出的动作取消高亮,要么在回调里面做判断,要么每次点击都取消绑定到当前元素的mouseenter和mouseleave事件
html部分的模板源码
<video style="width: 100%; height: 100%;" controls autoplay id="video">
</video>
<ul class="course" id="course"></ul>
//渲染课程列表,为每一个列表项加lid
function renderCourseList() {
getRequest(null, 'getCourse', {
id: getQuery('id')
}, (res) => {
let content = '';
res.lecture.forEach((obj, index) => {
if (index == 0) {
content = `<li style="margin: 20px 0" onclick="playContent(this)"
lid="${obj.ID}">
<img src="../img/course/play.png">
<span style="color:#41a0e9">${obj.Name}</span>
</li>`
}else{
content = `<li style="margin: 20px 0" onclick="playContent(this)"
lid="${obj.ID}">
<img src="../img/course/stop.png">
<span>${obj.Name}</span>
</li>`
}
}
$('#course').html(content);
})
}
//点击课程列表中的内容,原生js和jquery的混合写法
function playContent(obj) {
//读取内存中的lecture找到对应的数据
lecture.forEach(elem => {
if (elem.ID == $(obj).attr('did')) {
const source = `<source src="${serverIp}${elem.FjPath}"
type="video/mp4">`
$('#video').html(source);
document.getElementById('video').load();
//把其他的颜色设置未默认
$(obj).children('span').css('color', '#333');
$(obj).children('img').attr('src', '../img/course/stop.png');
//把鼠标悬停的事件绑定
$(obj).children('span').mouseenter(function(){
$(this).css('color', '#41a0e9');
$(this).prev().attr('src', '../img/course/play.png');
})
$(obj).children('span').mouseleave(function(){
$(this).css('color', '#333');
$(this).prev().attr('src', '../img/course/stop.png');
})
//把选中的那个颜色设置未高亮
$(obj).children('span').css('color', '#41a0e9');
$(obj).children('img').attr('src', '../img/course/play.png');
//悬停事件取消
$(obj).children('span').unbind('mouseenter');
$(obj).children('span').unbind('mouseleave');
}
})
}
video元素中的source被替换之后要调用一次video.load()才会重新载入视频否则没有任何效果,点击之后要调用jquery的unbind()解绑dom的事件,jquery绑定到dom的事件必须在dom载入之后,否则是不会生效的,原生js可以直接写在dom的onclick属性里面,这样就不会有时间顺序的问题