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.mzph.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