html播放列表

课程学习页面中的功能，左边是播放器，右边是播放列表，要求点击播放列表高亮显示并且播放对应的视频，当然我们没有小破站那么完善的功能，这里的重点是交互

首先左边是一个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属性里面，这样就不会有时间顺序的问题