HTML5 Video標簽詳細教程

HTML5 Video標簽詳細教程

簡介

HTML5引入的<video>標簽為網頁提供了原生視頻播放功能，無需依賴Flash等第三方插件。它使得在網頁中嵌入和控制視頻內容變得簡單而強大。本教程將詳細介紹<video>標簽的使用方法、屬性、事件以及相關技術。

基本用法

最簡單的視頻嵌入

<video src="movie.mp4" controls></video>

帶有后備內容的視頻嵌入

<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm"><p>您的瀏覽器不支持HTML5視頻。這里是<a href="movie.mp4">視頻鏈接</a>。</p>
</video>

屬性詳解

標簽支持多種屬性來控制視頻的播放行為：

屬性值說明
srcURL視頻文件的URL
controlscontrols顯示播放控件
widthpixels視頻播放器寬度
heightpixels視頻播放器高度
autoplayautoplay視頻自動播放(不推薦)
mutedmuted視頻靜音
looploop視頻循環播放
posterURL視頻封面圖片URL
preloadauto/metadata/none視頻預加載方式
playsinlineplaysinline使視頻在iOS設備上不全屏播放

poster屬性

<video controls poster="preview.jpg"><source src="movie.mp4" type="video/mp4">
</video>

preload屬性選項

  • auto：瀏覽器自動加載整個視頻
  • metadata：只加載視頻元數據（時長、尺寸等）
  • none：不預加載視頻
<video preload="metadata" controls><source src="movie.mp4" type="video/mp4">
</video>

格式支持

不同瀏覽器支持不同的視頻格式，常見的視頻格式有：

格式MIME類型瀏覽器支持
MP4video/mp4Chrome, IE9+, Safari, Firefox, Opera
WebMvideo/webmChrome, Firefox, Opera
Oggvideo/oggChrome, Firefox, Opera

為了最大兼容性，建議提供多種格式：

<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm"><source src="movie.ogv" type="video/ogg">
</video>

事件處理

元素支持多種事件，可用于監控和控制視頻播放：

事件說明
play視頻開始播放
pause視頻暫停
ended視頻播放結束
timeupdate當前播放位置改變
volumechange音量改變
loadedmetadata視頻元數據加載完成
loadeddata視頻當前幀加載完成
canplay視頻可以播放但可能需要緩沖
canplaythrough視頻可以流暢播放
error視頻加載錯誤

示例：

<video id="myVideo" controls><source src="movie.mp4" type="video/mp4">
</video><script>const video = document.getElementById('myVideo');video.addEventListener('play', function() {console.log('視頻開始播放');});video.addEventListener('pause', function() {console.log('視頻暫停');});video.addEventListener('ended', function() {console.log('視頻播放結束');});
</script>

JavaScript控制

通過JavaScript可以完全控制視頻播放：

const video = document.getElementById('myVideo');// 播放/暫停
function togglePlay() {if (video.paused) {video.play();} else {video.pause();}
}// 進度跳轉
function seekTo(time) {video.currentTime = time;
}// 調整音量 (0.0 - 1.0)
function setVolume(vol) {video.volume = vol;
}// 靜音切換
function toggleMute() {video.muted = !video.muted;
}// 全屏
function enterFullScreen() {if (video.requestFullscreen) {video.requestFullscreen();} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();} else if (video.msRequestFullscreen) {video.msRequestFullscreen();}
}

常用屬性和方法

屬性/方法說明
currentTime當前播放位置(秒)
duration視頻總時長(秒)
paused是否暫停
ended是否播放結束
muted是否靜音
volume音量(0.0-1.0)
playbackRate播放速率
play()播放視頻
pause()暫停視頻
load()重新加載視頻

響應式視頻

使視頻適應不同屏幕尺寸的幾種方法：

方法1：使用百分比寬度

<video controls style="width: 100%; height: auto;"><source src="movie.mp4" type="video/mp4">
</video>

方法2：使用CSS媒體查詢

@media (max-width: 768px) {.video-container video {width: 100%;height: auto;}
}@media (min-width: 769px) {.video-container video {width: 640px;height: 360px;}
}

方法3：視頻容器

<div class="video-container"><video controls><source src="movie.mp4" type="video/mp4"></video>
</div>
.video-container {position: relative;padding-bottom: 56.25%; /* 16:9的寬高比 */height: 0;overflow: hidden;
}.video-container video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}

自定義視頻控件

創建自定義控件以替代瀏覽器默認控件：

<div class="video-player"><video id="customVideo" src="movie.mp4"></video><div class="custom-controls"><button id="playBtn">播放</button><input type="range" id="progressBar" min="0" value="0" step="0.1"><span id="currentTime">00:00</span> / <span id="duration">00:00</span><input type="range" id="volumeControl" min="0" max="1" value="1" step="0.1"><button id="muteBtn">靜音</button><button id="fullscreenBtn">全屏</button></div>
</div>
const video = document.getElementById('customVideo');
const playBtn = document.getElementById('playBtn');
const progressBar = document.getElementById('progressBar');
const currentTimeEl = document.getElementById('currentTime');
const durationEl = document.getElementById('duration');
const volumeControl = document.getElementById('volumeControl');
const muteBtn = document.getElementById('muteBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');// 播放/暫停
playBtn.addEventListener('click', function() {if (video.paused) {video.play();playBtn.textContent = '暫停';} else {video.pause();playBtn.textContent = '播放';}
});// 更新進度條
video.addEventListener('timeupdate', function() {progressBar.value = video.currentTime;currentTimeEl.textContent = formatTime(video.currentTime);
});// 加載元數據后設置進度條最大值和顯示時長
video.addEventListener('loadedmetadata', function() {progressBar.max = video.duration;durationEl.textContent = formatTime(video.duration);
});// 使用進度條跳轉
progressBar.addEventListener('input', function() {video.currentTime = progressBar.value;
});// 音量控制
volumeControl.addEventListener('input', function() {video.volume = volumeControl.value;
});// 靜音切換
muteBtn.addEventListener('click', function() {video.muted = !video.muted;muteBtn.textContent = video.muted ? '取消靜音' : '靜音';
});// 全屏
fullscreenBtn.addEventListener('click', function() {if (video.requestFullscreen) {video.requestFullscreen();} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();} else if (video.msRequestFullscreen) {video.msRequestFullscreen();}
});// 格式化時間
function formatTime(seconds) {const mins = Math.floor(seconds / 60);const secs = Math.floor(seconds % 60);return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

視頻字幕和軌道

使用<track>標簽為視頻添加字幕：

<video controls><source src="movie.mp4" type="video/mp4"><track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文" default><track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
</video>

WebVTT字幕文件格式

WEBVTT00:00:01.000 --> 00:00:04.000
大家好，歡迎觀看本視頻。00:00:05.000 --> 00:00:08.000
今天我們將學習HTML5視頻標簽的使用。

track標簽屬性

屬性值說明
srcURL字幕文件URL
kindsubtitles/captions/descriptions/chapters/metadata軌道類型
srclang語言代碼字幕語言
label文本字幕選擇菜單中顯示的標簽
defaultdefault默認顯示該字幕

瀏覽器兼容性

各主流瀏覽器對HTML5視頻的支持情況：

瀏覽器MP4WebMOgg
Chrome4.0+6.0+5.0+
Firefox21.0+4.0+3.5+
IE/Edge9.0+Edge不支持
Safari3.0+不支持不支持
Opera25.0+10.6+10.5+

最大兼容性方案

<video controls><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm"><source src="movie.ogv" type="video/ogg"><!-- Flash回退 --><object width="320" height="240" type="application/x-shockwave-flash" data="flashplayer.swf"><param name="movie" value="flashplayer.swf" /><param name="flashvars" value="controlbar=over&amp;image=poster.jpg&amp;file=movie.mp4" /><img src="poster.jpg" width="320" height="240" alt="視頻封面圖" /></object>
</video>

性能優化

1. 使用適當的預加載策略

<!-- 僅加載元數據，減少初始加載時間 -->
<video preload="metadata" controls><source src="movie.mp4" type="video/mp4">
</video>

2. 提供多種分辨率

<video controls><source src="movie-hd.mp4" type="video/mp4" media="(min-width: 1080px)"><source src="movie-sd.mp4" type="video/mp4">
</video>

3. 使用視頻分片和流媒體技術

  • HLS (HTTP Live Streaming)
  • DASH (Dynamic Adaptive Streaming over HTTP)

4. 延遲加載視頻

document.addEventListener('DOMContentLoaded', function() {const videoPlaceholder = document.getElementById('videoPlaceholder');const videoContainer = document.getElementById('videoContainer');videoPlaceholder.addEventListener('click', function() {videoContainer.innerHTML = `<video controls autoplay><source src="movie.mp4" type="video/mp4"></video>`;videoPlaceholder.style.display = 'none';});
});

常見問題排查

視頻無法播放

檢查點：

  1. 文件路徑是否正確
  2. 視頻格式是否被瀏覽器支持
  3. 服務器是否設置了正確的MIME類型
  4. 跨域資源共享(CORS)問題

自動播放不生效

現代瀏覽器限制自動播放策略：

  1. 添加

    muted

    屬性可以繞過部分限制

    <video autoplay muted controls>

  2. 通過用戶交互觸發播放

    document.addEventListener('click', function() {  video.play();}, { once: true });

全屏問題

不同瀏覽器的全屏API：

function openFullscreen(element) {if (element.requestFullscreen) {element.requestFullscreen();} else if (element.webkitRequestFullscreen) { /* Safari */element.webkitRequestFullscreen();} else if (element.msRequestFullscreen) { /* IE11 */element.msRequestFullscreen();} else if (element.mozRequestFullScreen) { /* Firefox */element.mozRequestFullScreen();}
}

實例展示

基礎視頻播放器

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>HTML5視頻播放器</title><style>.video-container {max-width: 800px;margin: 0 auto;}video {width: 100%;height: auto;}</style>
</head>
<body><div class="video-container"><video controls poster="preview.jpg"><source src="movie.mp4" type="video/mp4"><source src="movie.webm" type="video/webm"><p>您的瀏覽器不支持HTML5視頻。請升級瀏覽器或下載<a href="movie.mp4">視頻文件</a>。</p></video></div>
</body>
</html>

高級自定義播放器

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>自定義HTML5視頻播放器</title><style>.video-player {max-width: 800px;margin: 0 auto;position: relative;}video {width: 100%;height: auto;display: block;}.custom-controls {position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.5);color: white;padding: 10px;display: flex;align-items: center;opacity: 0;transition: opacity 0.3s;}.video-player:hover .custom-controls {opacity: 1;}button {background: transparent;border: 1px solid white;color: white;margin: 0 5px;padding: 5px 10px;cursor: pointer;}input[type="range"] {margin: 0 5px;}#progressBar {flex-grow: 1;}</style>
</head>
<body><div class="video-player"><video id="customVideo" poster="preview.jpg"><source src="movie.mp4" type="video/mp4"></video><div class="custom-controls"><button id="playBtn">播放</button><input type="range" id="progressBar" min="0" value="0" step="0.1"><span id="currentTime">00:00</span> / <span id="duration">00:00</span><input type="range" id="volumeControl" min="0" max="1" value="1" step="0.1"><button id="muteBtn">靜音</button><button id="fullscreenBtn">全屏</button></div></div><script>const video = document.getElementById('customVideo');const playBtn = document.getElementById('playBtn');const progressBar = document.getElementById('progressBar');const currentTimeEl = document.getElementById('currentTime');const durationEl = document.getElementById('duration');const volumeControl = document.getElementById('volumeControl');const muteBtn = document.getElementById('muteBtn');const fullscreenBtn = document.getElementById('fullscreenBtn');// 播放/暫停playBtn.addEventListener('click', function() {if (video.paused) {video.play();playBtn.textContent = '暫停';} else {video.pause();playBtn.textContent = '播放';}});// 更新進度條video.addEventListener('timeupdate', function() {progressBar.value = video.currentTime;currentTimeEl.textContent = formatTime(video.currentTime);});// 加載元數據后設置進度條最大值和顯示時長video.addEventListener('loadedmetadata', function() {progressBar.max = video.duration;durationEl.textContent = formatTime(video.duration);});// 使用進度條跳轉progressBar.addEventListener('input', function() {video.currentTime = progressBar.value;});// 音量控制volumeControl.addEventListener('input', function() {video.volume = volumeControl.value;});// 靜音切換muteBtn.addEventListener('click', function() {video.muted = !video.muted;muteBtn.textContent = video.muted ? '取消靜音' : '靜音';});// 全屏fullscreenBtn.addEventListener('click', function() {if (video.requestFullscreen) {video.requestFullscreen();} else if (video.webkitRequestFullscreen) {video.webkitRequestFullscreen();} else if (video.msRequestFullscreen) {video.msRequestFullscreen();}});// 格式化時間function formatTime(seconds) {const mins = Math.floor(seconds / 60);const secs = Math.floor(seconds % 60);return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;}</script>
</body>
</html>

通過本教程，您應該能夠掌握HTML5 video標簽的各種用法和技巧，從簡單的視頻嵌入到復雜的自定義播放器開發。希望這些內容對您的Web開發工作有所幫助！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/73057.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/73057.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/73057.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Linux系統崩潰破案實錄

Linux系統崩潰破案實錄

現代計算環境中&#xff0c;系統的穩定性和可靠性至關重要。然而&#xff0c;即使是最優化的系統也可能會由于硬件故障、軟件漏洞或配置錯誤而崩潰。為了解決這一問題&#xff0c;Linux系統提供了強大的內核崩潰轉儲機制&#xff0c;本文介紹如何收集和分析崩潰日志&#xff0c…
閱讀更多...
tcping 命令的使用，ping IP 和端口

tcping 命令的使用，ping IP 和端口

1. ?Windows系統安裝? ?下載tcping工具?&#xff1a;根據系統位數&#xff08;32位或64位&#xff09;下載對應的tcping.exe文件。?安裝步驟?&#xff1a; 將下載的tcping.exe文件復制到C:\Windows\System32目錄下。如果下載的是64位版本&#xff0c;需將文件名改為tcpi…
閱讀更多...
深度學習框架PyTorch——從入門到精通（6.1）自動微分

深度學習框架PyTorch——從入門到精通（6.1）自動微分

使用torch.autograd自動微分 張量、函數和計算圖計算梯度禁用梯度追蹤關于計算圖的更多信息張量梯度和雅可比乘積 在訓練神經網絡時&#xff0c;最常用的算法是反向傳播。在該算法中&#xff0c;參數&#xff08;模型權重&#xff09;根據損失函數的梯度相對于給定參數進行調整…
閱讀更多...
跟我學C++中級篇——std::not_fn

跟我學C++中級篇——std::not_fn

一、std::not_fn定義和說明 std::not_fn這個模板函數非常有意思&#xff0c;在前面我們學習過wrapper&#xff08;包裝器&#xff09;&#xff0c;其實它就是通過封裝一個包裝器來實現返回值的非。它的基本定義如下&#xff1a; template< class F > /* 未指定 */ not_…
閱讀更多...
階躍星辰開源300億參數視頻模型Step-Video-TI2V：運動可控+102幀長視頻生成

階躍星辰開源300億參數視頻模型Step-Video-TI2V：運動可控+102幀長視頻生成

階躍星辰&#xff08;StepFun&#xff09;正式開源其新一代圖生視頻模型 Step-Video-TI2V &#xff0c;該模型基于300億參數的Step-Video-T2V訓練&#xff0c;支持文本與圖像聯合驅動生成長達102幀的高質量視頻&#xff0c;在運動控制與場景適配性上實現突破。 核心亮點 …
閱讀更多...
java查詢es超過10000條數據

java查詢es超過10000條數據

java查詢es超過10000條數據 背景:需要每天零點導出es中日志數據到數據庫中給數據分析人員做清洗&#xff0c;然后展示給業務人員。但在es中默認一次最多只能查詢10000條數據。 在這里我就只貼一下關鍵代碼 SearchRequest searchRequest new SearchRequest("索引名"…
閱讀更多...
使用 libevent 構建高性能網絡應用

使用 libevent 構建高性能網絡應用

使用 libevent 構建高性能網絡應用 在現代網絡編程中&#xff0c;高性能和可擴展性是開發者追求的核心目標。為了實現這一目標&#xff0c;許多開發者選擇使用事件驅動庫來管理 I/O 操作和事件處理。libevent 是一個輕量級、高性能的事件通知庫&#xff0c;廣泛應用于網絡服務…
閱讀更多...
HeyGem.ai 全離線數字人生成引擎加入 GitCode：開啟本地化 AIGC 創作新時代

HeyGem.ai 全離線數字人生成引擎加入 GitCode：開啟本地化 AIGC 創作新時代

在人工智能技術飛速演進的時代&#xff0c;數據隱私與創作自由正成為全球開發者關注的焦點。硅基智能旗下開源項目 HeyGem.ai 近日正式加入 GitCode&#xff0c;以全球首個全離線數字人生成引擎的顛覆性技術&#xff0c;重新定義人工智能生成內容&#xff08;AIGC&#xff09;的…
閱讀更多...
【leetcode hot 100 39】組合總和

【leetcode hot 100 39】組合總和

錯誤解法一&#xff1a;每一次回溯都遍歷提供的數組 class Solution {public List<List<Integer>> combinationSum(int[] candidates, int target) {List<List<Integer>> result new ArrayList<List<Integer>>();List<Integer> te…
閱讀更多...
VSCODE右下角切換環境沒用

VSCODE右下角切換環境沒用

VSCODE惦記右下角python版本&#xff0c;切換別的虛擬環境時&#xff0c;始終切換不了&#xff0c;同時右下角彈出&#xff1a; Client Pylance: connection to server is erroring. 取消繼承環境也改了。https://www.cnblogs.com/coreylin/p/17509610.html 還是不行&#xf…
閱讀更多...
【sql靶場】第23、25，25a關過濾繞過保姆級教程

【sql靶場】第23、25，25a關過濾繞過保姆級教程

目錄 【sql靶場】第23、25-28關過濾繞過保姆級教程 第二十三關 第二十五關 1.爆出數據庫 2.爆出表名 3.爆出字段 4.爆出賬號密碼 【sql靶場】第23、25&#xff0c;25a關過濾繞過保姆級教程 第二十三關 從本關開始又是get傳參&#xff0c;并且還有了對某些字符或字段的過…
閱讀更多...
python每日十題(5)

python每日十題(5)

保留字&#xff0c;也稱關鍵字&#xff0c;是指被編程語言內部定義并保留使用的標識符。Python 3.x版本中有35個保留字&#xff0c;分別為&#xff1a;and, as,assert,async,await,break,class,continue,def,del,elif,else, except, False, finally,for,from,global, if,import…
閱讀更多...
Pytorch使用手冊—自定義 C++ 和 CUDA 擴展（專題五十二）

Pytorch使用手冊—自定義 C++ 和 CUDA 擴展（專題五十二）

提示 從 PyTorch 2.4 開始，本教程已被廢棄。請參考 PyTorch 自定義操作符，了解關于通過自定義 C++/CUDA 擴展擴展 PyTorch 的最新指南。 PyTorch 提供了大量與神經網絡、任意張量代數、數據處理等相關的操作。然而，您可能仍然會發現自己需要一個更自定義的操作。例如，您可能…
閱讀更多...
CHM（ConcurrentHashMap）中的 sizeCtl 的作用與值變化詳解

CHM（ConcurrentHashMap）中的 sizeCtl 的作用與值變化詳解

學海無涯&#xff0c;志當存遠。燃心礪志&#xff0c;奮進不輟。愿諸君得此雞湯&#xff0c;如沐春風&#xff0c;學業有成。若覺此言甚善&#xff0c;煩請賜贊一枚&#xff0c;共勵學途&#xff0c;同鑄輝煌 ConcurrentHashMap常簡寫為CHM&#xff0c;尤其是在討論并發編程時。…
閱讀更多...
VLAN綜合實驗報告

VLAN綜合實驗報告

一、實驗拓撲 網絡拓撲結構包括三臺交換機&#xff08;LSW1、LSW2、LSW3&#xff09;、一臺路由器&#xff08;AR1&#xff09;以及六臺PC&#xff08;PC1-PC6&#xff09;。交換機之間通過Trunk鏈路相連&#xff0c;交換機與PC、路由器通過Access或Hybrid鏈路連接。 二、實驗…
閱讀更多...
OpenGL ES -＞計算多個幀緩沖對象(Frame Buffer Object)+疊加多個濾鏡作用后的Bitmap

OpenGL ES -＞計算多個幀緩沖對象(Frame Buffer Object)+疊加多個濾鏡作用后的Bitmap

XML文件 <?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"><…
閱讀更多...
Java線程池深度解析：從使用到調優

Java線程池深度解析：從使用到調優

適合人群&#xff1a;Java中級開發者 | 并發編程入門者 | 系統調優實踐者 目錄 一、引言&#xff1a;為什么線程池是Java并發的核心&#xff1f; 二、線程池核心知識點詳解 1. 線程池核心參數與原理 2. 線程池的創建與使用 (1) 基礎用法示例 (2) 內置線程池的隱患 3. 線…
閱讀更多...
【工具變量】全國地級市地方ZF債務數據集（2014-2023年）

【工具變量】全國地級市地方ZF債務數據集（2014-2023年）

地方ZF債務是地方財政運作的重要組成部分&#xff0c;主要用于基礎設施建設、公共服務及經濟發展&#xff0c;是衡量地方財政健康狀況的重要指標。近年來&#xff0c;我國地級市的地方ZF債務規模不斷變化&#xff0c;涉及一般債務和專項債務等多個方面&#xff0c;對金融市場、…
閱讀更多...
大模型訓練的調參與算力調度技術分析

大模型訓練的調參與算力調度技術分析

大模型訓練的調參與算力調度 雖然從網絡上&#xff0c;還有通過和大模型交流&#xff0c;了解了很多訓練和微調的技術。但沒有實踐&#xff0c;也沒有什么機會實踐。因為大模型訓練門檻還是挺高的&#xff0c;想要有一手資料比較困難。如果需要多機多卡&#xff0c;硬件成本小…
閱讀更多...
深入理解 lt； 和 gt；：HTML 實體轉義的核心指南！！！

深入理解 lt； 和 gt；：HTML 實體轉義的核心指南！！！

&#x1f6e1;? 深入理解 < 和 >&#xff1a;HTML 實體轉義的核心指南 &#x1f6e1;? 在編程和文檔編寫中&#xff0c;< 和 > 符號無處不在&#xff0c;但它們也是引發語法錯誤、安全漏洞和渲染混亂的頭號元兇&#xff01;&#x1f525; 本文將聚焦 <&#…
閱讀更多...
最新文章

Copyright @ 2022~2023