色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

html5全屏列表播放代碼

榮姿康2年前9瀏覽0評論

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;
}

如你所見,全屏列表播放代碼是相當簡單和易于理解。