HTML - Video Player：為您的網頁添加動態效果

您好，有志於網頁開發的各位！今天，我們將要深入探索 HTML 影片播放器的精彩世界。記得上個網站只是靜態文字和圖片的時代嗎？現在，那些日子已經一去不返了！現在，我們可以直接將動態影片內容嵌入到我們的網頁中，使其更具吸引力和互動性。讓我們開始這個令人興奮的旅程吧！

HTML - Video Player

HTML 本地影片播放器

HTML 影片播放器是什麼？

在我們跳進代碼之前，讓我們先了解 HTML 影片播放器是什麼。它是 HTML5 的內置功能，讓我們能夠直接將影片內容嵌入到我們的網頁中，而不需要依賴第三方插件，如 Flash。酷炫吧？

基本影片播放器結構

讓我們從最基本的影片播放器結構開始：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
您的瀏覽器不支持 video 標籤。
</video>

讓我們分解這個結構：

<video> 標籤是我們影片播放器的主要容器。
width 和 height 屬性設置播放器的尺寸。
controls 屬性為播放器添加播放、暫停和音量控制。
<source> 標籤指定要播放的影片文件。
<video> 標籤內的文本會在瀏覽器不支持 HTML5 影片時顯示。

添加多個來源

但是，如果有些瀏覽器不支持 MP4 呢？別擔心！我們可以添加多個來源：

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 video 標籤。
</video>

這樣，如果瀏覽器不支持 MP4，它會嘗試播放 OGG 文件。

自動播放和循環

想要您的影片自動開始播放並持續循環嗎？這樣做：

<video width="320" height="240" autoplay loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 video 標籤。
</video>

autoplay 屬性讓影片在準備好後立即開始播放，而 loop 屬性則讓影片在結束時從頭開始。

預覽圖片

如果我們想在影片開始播放之前顯示一幅圖片呢？這時可以使用 poster 屬性：

<video width="320" height="240" poster="movie_poster.jpg" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 video 標籤。
</video>

這會在用戶開始影片之前顯示 "movie_poster.jpg" 圖片。

屏幕擷取

現在，讓我們將事情提升一個層次，來谈谈屏幕擷取。這是一個更先進的功能，讓我們能夠從用戶的屏幕上擷取並顯示實時視頻流。

基本屏幕擷取

以下是如何實現屏幕擷取的基本示例：

<video id="screenCapture" autoplay></video>
<button id="startCapture">開始屏幕擷取</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;
} catch (err) {
console.error("錯誤：" + err);
}
});
</script>

讓我們分解這個結構：

我們有一個 <video> 元素來顯示擷取的屏幕。
一個按鈕觸發屏幕擷取過程。
當按鈕被點擊時，我們使用 navigator.mediaDevices.getDisplayMedia() 來請求屏幕擷取權限並獲得流。
然後，我們將這個流設為我們影片元素的源。

處理錯誤和流結束

我們還應該處理潛在的錯誤和用戶停止共享屏幕時的狀況：

<video id="screenCapture" autoplay></video>
<button id="startCapture">開始屏幕擷取</button>

<script>
const video = document.getElementById('screenCapture');
const startButton = document.getElementById('startCapture');

startButton.addEventListener('click', async () => {
try {
const captureStream = await navigator.mediaDevices.getDisplayMedia();
video.srcObject = captureStream;

const track = captureStream.getVideoTracks()[0];
track.onended = () => {
video.srcObject = null;
console.log('屏幕共享結束');
};
} catch (err) {
console.error("錯誤：" + err);
}
});
</script>

在這個增強版本中：

我們從擷取流中獲取視頻軌道。
我們為這個軌道添加一個 onended 事件監聽器。
當屏幕共享結束時，我們將影片的 srcObject 設為 null 並記錄一條消息。

結論

就是这样，各位！我們已經從基本的影片播放器一路探索到先進的屏幕擷取技術。記住，掌握這些概念關鍵在於練習。嘗試將影片整合到您的網頁中，嘗試不同的屬性，並不要害怕深入更複雜的功能，如屏幕擷取。

這裡是一個總結我們所討論的主要屬性和方法的表格：

屬性/方法	描述
controls	添加視頻控制（播放、暫停、音量）
autoplay	自動播放影片
loop	影片結束時重新開始
poster	在影片播放之前顯示的圖片
getDisplayMedia()	請求屏幕擷取權限並獲得流

持續編程，持續學習，很快您就會創建有教育意義、娛樂性和能夠吸引訪客的網頁。直到下一次，快樂編程！

Credits: Image by storyset