阅读量:0
HTML5 video 标签用于在网页中嵌入视频，支持多种格式和属性，如控制条、字幕等。
HTML5引入了<video>标签，允许开发者在网页中直接嵌入视频文件，而不需要依赖第三方插件，本文将全面介绍<video>标签的各种属性，并通过实例代码详细说明其用法。
基础用法
1、基本结构：HTML5中使用<video>标签嵌入视频文件，最简单的形式如下：
<video src="videofile.mp4" controls></video>
在这个示例中，src属性指定视频文件的路径，controls属性使浏览器显示视频控件。
2、示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>HTML5 Video Example</title> </head> <body> <h1>HTML5 Video Example</h1> <video src="videofile.mp4" controls> Your browser does not support the video element. </video> </body> </html>
这段代码将在网页上显示一个视频播放器，如果浏览器不支持<video>标签，将显示替代文本“Your browser does not support the video element.”。
属性详解
1、src：指定视频文件的URL，可以是相对路径或绝对路径。
<video src="path/to/yourvideofile.mp4" controls></video>
2、controls：显示视频控件（播放、暂停、音量、全屏等）。
<video src="videofile.mp4" controls></video>
3、autoplay：视频文件在页面加载完成后自动播放，需要注意的是，为了用户体验，很多浏览器默认禁止自动播放，特别是移动设备。
<video src="videofile.mp4" controls autoplay></video>
4、loop：视频文件播放结束后自动重新播放。
<video src="videofile.mp4" controls loop></video>
5、muted：初始加载时将视频设置为静音。
<video src="videofile.mp4" controls muted></video>
6、preload：提示浏览器在页面加载时如何处理视频文件，可能的值有：none（不预加载视频文件）、metadata（只预加载视频文件的元数据）、auto（浏览器选择最佳方式预加载视频文件）。
<video src="videofile.mp4" controls preload="auto"></video>
7、width 和 height：设置视频播放器的宽度和高度（以像素为单位）。
<video src="videofile.mp4" controls width="640" height="360"></video>
8、poster：在视频播放之前显示的预览图像（封面图）。
<video src="videofile.mp4" controls poster="posterimage.jpg"></video>
9、crossorigin：控制跨域资源共享 (CORS)，允许你配置是否可以加载跨域资源，anonymous（不使用凭据）、usecredentials（使用凭据如Cookies）。
<video src="videofile.mp4" controls crossorigin="anonymous"></video>
支持多种视频格式
由于不同浏览器对视频格式的支持不同，通常需要提供多种格式的视频文件，以确保兼容性，可以使用多个<source>标签来定义不同格式的视频文件。
<video controls width="640" height="360" poster="posterimage.jpg"> <source src="videofile.mp4" type="video/mp4"> <source src="videofile.webm" type="video/webm"> <source src="videofile.ogv" type="video/ogg"> Your browser does not support the video element. </video>
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>HTML5 Video Example with Multiple Formats</title> </head> <body> <h1>HTML5 Video Example with Multiple Formats</h1> <video controls width="640" height="360" poster="posterimage.jpg"> <source src="videofile.mp4" type="video/mp4"> <source src="videofile.webm" type="video/webm"> <source src="videofile.ogv" type="video/ogg"> Your browser does not support the video element. </video> </body> </html>
使用 JavaScript 控制视频
HTML5 提供了丰富的 JavaScript API，可以用来控制视频播放，以下是一些常用的属性和方法：
1、常用属性：
currentTime：获取或设置当前播放时间（秒）。
duration：获取视频总时长（秒）。
paused：返回视频是否暂停。
volume：获取或设置音量（0.0 到 1.0）。
playbackRate：获取或设置播放速度。
2、常用方法：
play()：开始播放或继续播放视频，如果视频已经处于播放状态，则此方法无效。
pause()：暂停视频播放。
load()：重新加载视频源或初始化当前选定的来源，这会清除任何现有播放位置或错误状态。
addEventListener()：用于监听视频相关的事件，如 play、pause、ended 等。
FAQs：
1、问：如何在网页中嵌入视频并确保兼容所有主流浏览器？
答：为确保兼容所有主流浏览器，建议使用多种格式的视频文件，如 MP4、WebM 和 Ogg，可以通过多个<source> 标签来定义不同格式的视频文件，并在<video> 标签中包含这些<source> 标签。
<video controls width="640" height="360" poster="posterimage.jpg"> <source src="videofile.mp4" type="video/mp4"> <source src="videofile.webm" type="video/webm"> <source src="videofile.ogv" type="video/ogg"> Your browser does not support the video element. </video>
2、问：如何通过 JavaScript 控制 HTML5 视频的播放和暂停？
答：可以使用 HTML5 提供的 JavaScript API 来控制视频的播放和暂停，通过document.querySelector('video') 或其他选择器获取视频元素，然后调用play() 方法开始播放或继续播放视频，调用pause() 方法暂停视频播放，示例代码如下：
var myVideo = document.querySelector('video'); myVideo.play(); // 开始播放或继续播放视频 myVideo.pause(); // 暂停视频播放HTML5 video 视频标签使用介绍
HTML5 的video 标签提供了在网页中嵌入视频的功能，无需依赖第三方插件如 Flash，它支持多种视频格式，使得视频在网页上的播放变得更加便捷和兼容。
标签属性
video 标签拥有多种属性，以下是一些常用的属性及其描述：
| 属性 | 描述 |
| controls | 添加播放控件，如播放、暂停、音量等。 |
| autoplay | 视频加载就自动播放。 |
| loop | 视频播放结束后重新开始播放。 |
| muted | 视频初始状态为静音。 |
| poster | 视频开始播放前显示的图片。 |
| src | 视频文件的路径。 |
| width | 视频播放区域的宽度。 |
| height | 视频播放区域的高度。 |
| preload | 视频在页面加载时预加载的策略，可选值有 'auto'、'metadata'、'none'。 |
支持的视频格式
video 标签支持多种视频格式，包括：
MP4 (.mp4)
WebM (.webm)
Ogg (.ogv)
以及一些容器格式，如：
MP4 (.mp4)
WebM (.webm)
Ogg (.ogv)
示例代码
以下是一个简单的video 标签使用示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <title>Video Example</title> </head> <body> <video controls poster="poster.jpg"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogv" type="video/ogg"> 您的浏览器不支持视频标签。 </video> </body> </html>
在这个示例中，我们尝试加载了三种不同格式的视频源，如果浏览器支持这些格式之一，它将自动播放第一个可用的源，如果都不支持，将显示最后的提示信息。
使用video 标签可以轻松地在网页中嵌入视频，通过合理配置属性和提供多种视频格式，可以确保在不同设备和浏览器上都能正常播放视频。
