HTML5是一種用于網站開發的標準語言,支持所有終端設備,包括桌面、手機和平板電腦。在HTML5中,全屏列表播放代碼對于網頁設計師來說非常有用。
<div id="player"> <ul id="playlist"> <li data-src="video1.mp4">視頻1</li> <li data-src="video2.mp4">視頻2</li> <li data-src="video3.mp4">視頻3</li> </ul> <video id="videoPlayer" autoplay="autoplay"> <source id="videoSrc" src="video1.mp4"> </video> </div>
上面的代碼演示了一個簡單的HTML5全屏列表播放器。它包括一個帶有音頻文件名的列表,以及一個視頻播放器。列表中的每個條目都具有一個data-src屬性,指定要播放的視頻文件。視頻播放器默認播放第一個視頻。
JavaScript代碼負責檢測何時單擊了列表中的條目。當這種情況發生時,它從條目的data-src屬性中提取文件名,并在播放器上設置新的視頻源。視頻播放器會自動開始播放新的視頻。
var playlist = document.getElementById('playlist'); var videoPlayer = document.getElementById('videoPlayer'); var videoSrc = document.getElementById('videoSrc'); playlist.addEventListener('click', function(e) { e.preventDefault(); var target = e.target; if (target.tagName === 'LI') { var src = target.getAttribute('data-src'); videoSrc.setAttribute('src', src); videoPlayer.load(); videoPlayer.play(); } });
最后,CSS代碼使播放器全屏顯示。
#player { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; } #videoPlayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #playlist { list-style: none; padding: 0; margin: 0; position: absolute; bottom: 0; left: 0; width: 100%; background: #fff; opacity: 0.5; }
如你所見,全屏列表播放代碼是相當簡單和易于理解。