課程學(xué)習(xí)頁面中的功能，左邊是播放器，右邊是播放列表，要求點擊播放列表高亮顯示并且播放對應(yīng)的視頻，當然我們沒有小破站那么完善的功能，這里的重點是交互

首先左邊是一個video元素，默認加載右邊列表中的第一個視頻，右邊列表里面的每一個元素都要綁定一個mouseenter和mouseleave事件，并且第一個元素默認高亮，每一個元素都應(yīng)該看成一個單選按鈕，有且只有一個被選中，已經(jīng)高亮的元素會被移出的動作取消高亮，要么在回調(diào)里面做判斷，要么每次點擊都取消綁定到當前元素的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);}) } //點擊課程列表中的內(nèi)容，原生js和jquery的混合寫法function playContent(obj) {//讀取內(nèi)存中的lecture找到對應(yīng)的數(shù)據(jù)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();//把其他的顏色設(shè)置未默認$(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');})//把選中的那個顏色設(shè)置未高亮$(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被替換之后要調(diào)用一次video.load()才會重新載入視頻否則沒有任何效果，點擊之后要調(diào)用jquery的unbind()解綁dom的事件，jquery綁定到dom的事件必須在dom載入之后，否則是不會生效的，原生js可以直接寫在dom的onclick屬性里面，這樣就不會有時間順序的問題

?

總結(jié)

以上是生活随笔為你收集整理的html播放列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。