HTML5視頻播放器是一種強大的工具，用于在web頁面中添加視頻，并支持跨平臺播放。這篇文章將提供一些示例代碼，以介紹如何創(chuàng)建html5視頻播放器。 首先，我們需要創(chuàng)建一個video標簽，它將用于嵌入我們的視頻。下面是一個基本的示例：

在上面的代碼中，我們創(chuàng)建了一個寬度為640像素，高度為360像素的video標簽，并為其添加了controls屬性，以啟用瀏覽器默認的播放控件。我們還為其添加了兩個元素，用于指定視頻文件的路徑和格式。如果瀏覽器不支持video標簽，則會顯示“Your browser does not support the video tag.”文本。 接下來，讓我們看一下如何通過JavaScript添加一些交互性。以下示例代碼演示如何在用戶單擊“播放”按鈕時，顯示自定義控件：

var video = document.querySelector('video');
var playButton = document.querySelector('.play-button');
var customControls = document.querySelector('.custom-controls');
playButton.addEventListener('click', function() {
customControls.classList.add('visible');
video.play();
});

在上面的代碼中，我們使用document.querySelector()方法獲取video、playButton和customControls元素，并使用addEventListener()方法在playButton上添加一個單擊事件偵聽器。當用戶單擊“播放”按鈕時，我們添加一個“visible”類，用于顯示customControls元素，然后使用video.play()方法開始播放視頻。 最后，讓我們看一下如何在視頻播放期間將視頻時間顯示在進度條上。以下示例代碼演示如何使用JavaScript實現(xiàn)這一點：

var video = document.querySelector('video');
var progressBar = document.querySelector('.progress-bar');
video.addEventListener('timeupdate', function() {
var progress = video.currentTime / video.duration;
progressBar.style.width = progress * 100 + '%';
});

在上面的代碼中，我們使用瀏覽器提供的timeupdate事件，將視頻的當前時間除以其總時間得到一個進度百分比，然后將該值乘以100并應用于progressBar元素的寬度樣式。 總之，HTML5視頻播放器是一種有用的工具，可以為web頁面添加視頻并提供交互性和自定義控件。上述示例代碼可以幫助你開始使用該工具，并在需要時進行自定義。