最近我學習了HTML5的視頻播放部分，并研究了嗶哩嗶哩視頻的源代碼，發現嗶哩嗶哩的視頻播放也是基于HTML5的，因此我決定將其仿寫一下。

<video id="video" autoplay controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogv">
<p>您的瀏覽器不支持HTML5視頻，請使用其他瀏覽器.</p>
</video>
<script>
var video = document.getElementById("video");
var btnPlay = document.getElementById("btnPlay");
var btnPause = document.getElementById("btnPause");
var btnFullScreen = document.getElementById("btnFullScreen");
var progress = document.getElementById("progress");
var progressBar = document.getElementById("progressBar");
btnPlay.onclick = function() {
video.play();
};
btnPause.onclick = function() {
video.pause();
};
btnFullScreen.onclick = function() {
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
};
video.addEventListener("timeupdate", function() {
var percent = (video.currentTime / video.duration) * 100;
progressBar.style.width = percent + "%";
});
progress.onclick = function(e) {
var x = e.pageX - progress.offsetLeft;
var width = progress.clientWidth;
var percent = (x / width);
video.currentTime = video.duration * percent;
};
</script>

以上是仿寫的嗶哩嗶哩視頻播放的HTML代碼，實現了視頻的播放、暫停、全屏以及進度條控制等功能。其中，<video>標簽用于定義視頻播放器，其中的<source>標簽用于定義視頻源，一般提供多個源，不同瀏覽器支持的視頻格式不同。在代碼中，通過JavaScript代碼監聽視頻的時間更新事件，實現進度條的動態更新;通過<button>標簽實現播放、暫停和全屏的功能。需要注意的是，在不同瀏覽器中，全屏的方式有所不同，需要分別處理。