近年來,隨著HTML5技術的發展,越來越多的網站開始使用HTML5來實現視頻列表功能。下面我們來介紹一下HTML5實現視頻列表的js代碼。
// 定義視頻列表數組 var videos = [ { title: '視頻1', src: 'video1.mp4' }, { title: '視頻2', src: 'video2.mp4' }, { title: '視頻3', src: 'video3.mp4' } ]; // 獲取視頻列表容器 var videoList = document.getElementById('videoList'); // 循環遍歷視頻列表數組,將每個視頻添加到視頻列表中 for (var i = 0; i< videos.length; i++) { var item = document.createElement('li'); var link = document.createElement('a'); link.href = videos[i].src; link.textContent = videos[i].title; item.appendChild(link); videoList.appendChild(item); }
以上代碼實現了一個視頻列表,該列表包含了三個視頻,每個視頻都包含了視頻的標題和url地址。最后,將視頻列表添加到頁面中展示。