HTML5視頻相冊制作代碼 HTML5在視頻方面的支持得到了極大的加強。我們可以使用HTML5的video標簽播放視頻，也可以使用canvas標簽播放視頻并實現各種特效效果。在本文中，我們將學習如何使用HTML5完成一個視頻相冊的制作。下面是HTML代碼的實現。

首先我們需要在HTML文檔中引入視頻目錄的JavaScript，如下所示：

<script src="js/videoGallery.js"></script>

然后，我們需要為每個視頻創建縮略圖和對應的預覽視頻，如下所示：

<div id="videoGallery">
<div class="thumbWrapper">
<img src="img/video1_thumb.jpg" class="thumbnail" onclick="playVideo('video1.mp4')"/>
</div>
<div class="thumbWrapper">
<img src="img/video2_thumb.jpg" class="thumbnail" onclick="playVideo('video2.mp4')"/>
</div>
<div class="thumbWrapper">
<img src="img/video3_thumb.jpg" class="thumbnail" onclick="playVideo('video3.mp4')"/>
</div>
</div>

我們使用class =“thumbnail”為每個縮略圖創建一個點擊事件。當用戶單擊縮略圖時，將調用JavaScript函數playVideo（）播放相應的預覽視頻。下面是JavaScript代碼的實現。

function playVideo(filename) {
var videoElem = document.createElement('video');
videoElem.setAttribute('src', './videos/' + filename);
videoElem.setAttribute('controls', true);
videoElem.play();
}

JavaScript代碼非常簡單。我們創建一個新的視頻元素，然后為其設置src屬性和controls屬性。最后，我們調用play（）方法播放視頻。

完成這些步驟后，我們就成功創建了一個基本的HTML5視頻相冊。用戶可以點擊縮略圖來查看視頻的預覽。這里我們只展示了如何使用HTML5播放視頻，您可以根據實際情況增加更多的效果。