HTML5 引入了内置的

1. 基本语法

基本的 HTML5 视频标签如下：

Your browser does not support the video tag.

2. 常用属性

controls: 显示播放控件，如播放/暂停按钮、音量控制等。

autoplay: 视频在加载后自动播放。

loop: 视频播放完后自动重新开始。

muted: 视频默认静音。

poster: 视频加载前显示的图像。

width: 视频的宽度。

height: 视频的高度。

3. 示例代码

以下是一个简单的 HTML5 视频示例，其中包含控件和其他属性：

HTML5 视频示例

您的浏览器不支持视频标签。

4. 使用注意事项

浏览器兼容性: 不是所有浏览器都支持所有视频格式，最常用的格式是 MP4 (使用 H.264 编码)，也可以使用 OGG 和 WebM 格式。

跨域请求: 如果视频文件来自不同的域，确保正确配置 CORS（跨源资源共享）来避免安全问题。

自适应设计: 可以使用 CSS 来使视频响应式调整大小，例如使用 width: 100%; height: auto;。

5. JavaScript 控制视频

您还可以使用 JavaScript 来控制视频的播放，例如：

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

// 播放视频

video.play();

// 暂停视频

video.pause();

// 切换静音

video.muted = !video.muted;

6. 小结

HTML5 视频标签简化了在网页中加入视频的过程，同时提供了丰富的自定义选项和良好的浏览器支持。通过学习和实践，可以更好地利用这一功能提升用户体验。