HTML5 – 視頻播放器

隨著互聯網的普及和帶寬的提高，視頻已成為網絡媒體內容的重要組成部分。愛掏網 - it200.comHTML5 中新增加的 video 標簽為我們提供了一種更加方便的嵌入視頻的方式。愛掏網 - it200.com在本篇文章中，我們將會介紹如何使用 HTML5 中的 video 標簽來實現視頻播放器。愛掏網 - it200.com

使用 HTML5 中的 video 標簽，我們可以很容易地添加并自定義一個視頻播放器。愛掏網 - it200.com首先，我們需要在 HTML 文件中添加 video 標簽：

<video src="https://deepinout.com/html/html5-tutorials/video.mp4" controls></video>

上述代碼中，我們定義了一個 video 標簽，其中的 src 屬性指向要播放的視頻文件的路徑，并添加了 controls 屬性表示在播放器中顯示控制條。愛掏網 - it200.com接下來，我們需要在 CSS 文件中定義播放器的樣式：

video {
  width: 500px;
  height: 300px;
}

在這里，我們定義了 video 元素的寬度和高度。愛掏網 - it200.com

最后，我們需要處理兼容性問題：在一些舊版瀏覽器可能無法正常播放視頻。愛掏網 - it200.com為了解決這個問題，我們可以使用一個 fallback 非 HTML5 版的相應內容。愛掏網 - it200.com這里我們使用一個簡單的條件判斷來實現：

<video src="https://deepinout.com/html/html5-tutorials/video.mp4" controls>
  <source src="https://deepinout.com/html/html5-tutorials/video.ogg" type="video/ogg">
  <source src="https://deepinout.com/html/html5-tutorials/video.webm" type="video/webm">
  <p>您的瀏覽器不支持 HTML5 視頻，請更新瀏覽器或使用其他瀏覽器</p>
</video>

在這段代碼中，我們通過添加 source 標簽來引入多個視頻文件，當瀏覽器支持播放這些文件格式的視頻時會自動解析播放這些文件；當瀏覽器不支持這些文件格式時，會顯示 p 標簽內的內容。愛掏網 - it200.com

JavaScript 控制播放

除了使用 HTML 中的 controls 屬性顯示控制條，我們還可以使用 JavaScript 來控制視頻的播放行為。愛掏網 - it200.com首先，我們需要先選取 video 元素:

const video = document.querySelector('video');

通過調用 video 元素上的方法，我們可以對視頻進行控制：

video.play(); // 播放
video.pause(); // 暫停

而因為視頻文件本身較大，所以我們可能需要通過 video 元素上的屬性來獲取視頻播放的狀態以確定視頻是否已經準備好：

console.log(video.readyState); // 0 - 當前 沒有關于視頻的可用數據
                                 // 1 - 當前已獲取視頻的meta數據
                                 // 2 - 當前可以開始在“加載"期間進行播放
                                 // 3 - 當前可以開始播放（緩沖時）
                                 // 4 - 當前已經緩沖足夠的數據，可以進行無間斷的播放

同時，我們還可以通過 cover 元素上的事件來監聽視頻的狀態：

video.addEventListener('play', () => {
  console.log('視頻開始播放');
});

video.addEventListener('pause', () => {
  console.log('視頻暫停播放');
});

video.addEventListener('ended', () => {
  console.log('視頻播放結束');
});

視頻字幕

HTML5 中，我們可以通過 VTT（WebVTT）文件格式來為視頻添加字幕。愛掏網 - it200.comVTT 是一種文本文件格式，可以在開始時間和結束時間之間指定要顯示的字幕內容。愛掏網 - it200.com

要為視頻添加字幕，我們首先需要創建一個 VTT 文件：

WEBVTT

1
00:00.000 --> 00:03.000
It's a wonderful day.

2
00:03.000 --> 00:06.000
The sun is shining and the birds are singing.

3
00:06.000 --> 00:10.000
I love spending time outdoors.

然后，我們需要在 video 元素中添加 track 標簽來引入字幕文件：

<video src="https://deepinout.com/html/html5-tutorials/video.mp4" controls>
  <track kind="subtitles" src="https://deepinout.com/html/html5-tutorials/subs.vtt" srclang="en" label="English">
</video>

在這里，我們使用 kind 屬性來指定這個 track 是字幕（subtitles），并使用 src 屬性來指定 VTT 文件的路徑，srclang 屬性指示字幕語言，label 屬性為字幕設置標簽。愛掏網 - it200.com

最后，我們還需要在 CSS 文件中設置字幕的樣式：

::cue {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 1.2rem;
  padding: 5px;
}

在這段代碼中，我們使用 ::cue 偽元素來設置字幕的樣式。愛掏網 - it200.com

自定義控制條

默認控制條的樣式可能無法滿足我們的需求，我們可以使用 CSS 和 JavaScript 來自定義播放器控制條的樣式。愛掏網 - it200.com

首先，我們需要隱藏默認的控制條：

video::-webkit-media-controls {
  display: none !important;
}

video::-webkit-media-controls-enclosure {
  display: none !important;
}

video::-webkit-media-controls-panel {
  display: none !important;
}

然后，我們可以使用 HTML 和 CSS 來創建我們自己的控制條。愛掏網 - it200.com為了使控制條可以控制視頻的播放，我們需要在 JavaScript 中添加一些代碼：

const playBtn = document.querySelector('.playBtn');
const progress = document.querySelector('.progress');
const timeIndicator = document.querySelector('.timeIndicator');

playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
  } else {
    video.pause();
    playBtn.innerHTML = '<i class="fas fa-play"></i>';
  }
});

video.addEventListener('timeupdate', () => {
  const percentage = (video.currentTime / video.duration) * 100;
  progress.style.width = `{percentage}%`;

  let minute = Math.floor(video.currentTime / 60);
  if (minute<10) {
    minute = `0{minute}`;
  }
  let second = Math.floor(video.currentTime % 60);
  if (second < 10) {
    second = `0{second}`;
  }
  timeIndicator.textContent = `{minute}:${second}`;
});

progress.addEventListener('click', (e) => {
  const offsetX = e.offsetX;
  const totalWidth = progress.clientWidth;
  const percentage = (offsetX / totalWidth);
  const current = video.duration * percentage;
  video.currentTime = current;
});

在這里，我們通過選取 playBtn、progress 和 timeIndicator 元素，分別為這些元素添加了 click 和 timeupdate 事件的監聽器以實現控制條的功能。愛掏網 - it200.com

結論

HTML5 中的 video 標簽為我們提供了一種簡單和方便的嵌入視頻的方式。愛掏網 - it200.com我們可以使用默認的控制條來控制視頻的播放，也可以使用 JavaScript 和 CSS 來自定義播放器和控制條的樣式。愛掏網 - it200.com除此之外，我們還可以使用 VTT 文件格式為視頻添加字幕。愛掏網 - it200.com在使用時，我們需要留意瀏覽器對于不同視頻格式的兼容性問題。愛掏網 - it200.com總的來說，HTML5 中的 video 標簽為我們提供了一個更加靈活自由的視頻播放解決方案。愛掏網 - it200.com