参考资料

1. HTML 区块元素
2. HTML 书签属性格式化
3. HTML 文本格式化
4. HTML 文本对齐方式
5. HTML 链接语法
6. HTML 图像
7. 如何判断一个网站是否被采集
8. HTML移除边框 Iframe

HTML 视频(Videos)播放

HTML 视频(Videos)播放格式化

详细介绍

HTML5 引入了 <video> 元素，用于在网页中嵌入视频内容，无需使用插件如 Flash。现代浏览器都支持 HTML5 视频播放。

主要标签

<video> 标签

• 用于定义视频内容

• 主要属性：

• src：指定视频源文件

• controls：显示播放控件

• autoplay：自动播放

• loop：循环播放

• muted：静音

• poster：视频封面图像

• width/height：设置尺寸

• preload：预加载设置

<source> 标签

• 用于指定多个视频源文件

• 主要属性：

• src：视频文件路径

• type：视频文件类型

基本用法

<video controls width="640" height="360">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频。
</video>

实例

基本视频播放器

<video src="video.mp4" controls>
  您的浏览器不支持 HTML5 视频。
</video>

多源格式视频

<video controls width="640" height="360" poster="poster.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogv" type="video/ogg">
  您的浏览器不支持 HTML5 视频。
</video>

自动播放和循环

<video autoplay loop muted>
  <source src="video.mp4" type="video/mp4">
</video>

功能扩展

JavaScript 控制

const myVideo = document.getElementById("myVideo");

// 播放
myVideo.play();

// 暂停
myVideo.pause();

// 跳转到特定时间
myVideo.currentTime = 30;

// 全屏
myVideo.requestFullscreen();

CSS 扩展样式

/* 自定义视频播放器样式 */
video {
  background-color: #000;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  margin: 20px auto;
  display: block;
}

/* 自定义控制条 */
video::-webkit-media-controls-panel {
  background: rgba(0,0,0,0.5);
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-mute-button {
  background: #fff;
  border-radius: 50%;
}

/* 响应式视频 */
.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%;
}

响应式视频容器 HTML

<div class="video-container">
  <video controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</div>