在 HTML 中嵌入和自定义视频 - 完整指南

介绍

在本实验中，你将学习如何使用强大的 <video> 标签在 HTML 中嵌入和自定义视频元素。实验内容涵盖了创建交互式视频播放器的关键技术，包括添加控件、配置视频源、实现自定义缩略图，以及探索各种视频标签属性以增强播放体验。

通过逐步的学习，你将掌握 HTML5 视频嵌入的实用技能，从基本的视频元素创建到高级配置。你将了解如何添加多个视频源、控制播放设置、设置自定义缩略图，并直接在网页中创建更具吸引力和用户友好的视频体验。

创建带控件的基本视频元素

在这一步中，你将学习如何在 HTML 中创建一个带有基本控件的视频元素。HTML5 提供了一个简单而强大的 <video> 标签，允许你直接将视频嵌入到网页中。

首先，让我们创建一个 HTML 文件来演示视频嵌入。打开 WebIDE，在 ~/project 目录下创建一个名为 video-demo.html 的新文件。

touch ~/project/video-demo.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Basic Video Element</title>
  </head>
  <body>
    <h1>我的第一个视频元素</h1>

    <video controls width="640" height="360">
      你的浏览器不支持 video 标签。
    </video>
  </body>
</html>

让我们分解视频元素的关键组成部分：

<video> 标签：嵌入视频内容的主要容器
controls 属性：添加默认的视频播放器控件（播放、暂停、音量）
width 和 height 属性：设置视频播放器的尺寸
标签内的文本：用于不支持 HTML5 视频的浏览器的回退消息

controls 属性至关重要，因为它为用户提供了标准的播放控件，如播放、暂停、音量调节和全屏模式。

注意：了解更多关于如何在 WebIDE 中预览 HTML 文件。

添加视频源并静音播放

在这一步中，你将学习如何为 HTML 视频元素添加视频源并控制其初始播放状态。我们将修改之前的 video-demo.html 文件，以包含视频源并演示如何默认静音视频。

在 WebIDE 中打开 ~/project/video-demo.html 文件并更新其内容：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Video Source and Mute</title>
  </head>
  <body>
    <h1>多源视频</h1>

    <video controls width="640" height="360" muted>
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      你的浏览器不支持 video 标签。
    </video>
  </body>
</html>

让我们分解新增的内容：

<source> 标签：允许你指定多种视频格式以实现跨浏览器兼容性
- 第一个源是 MP4 文件
- 第二个源是 WebM 文件（替代格式）
- 浏览器将使用第一个支持的格式
muted 属性：在视频加载时自动静音
- 用于防止意外的音频播放
- 如果希望默认有声音，可以移除该属性
type 属性：指定视频源的 MIME 类型
- 帮助浏览器确定是否可以播放该视频

示例视频 URL 是公共领域的示例视频，用于演示多种源格式。在实际场景中，你需要将这些替换为你自己的视频文件路径。

实现自定义缩略图的视频海报

在这一步中，你将学习如何使用 poster 属性在视频播放开始前为视频元素添加自定义缩略图。首先，让我们下载一个示例图片作为我们的海报。

使用以下命令下载示例图片：

wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png

现在，使用 poster 属性更新 ~/project/video-demo.html 文件：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>带自定义海报的视频</title>
  </head>
  <body>
    <h1>带自定义缩略图的视频</h1>

    <video controls width="640" height="360" muted poster="video-thumbnail.png">
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

关于 poster 属性的关键点：

在视频播放开始前显示自定义图片
替换第一帧视频作为预览
帮助创建更具吸引力的用户界面
支持本地或远程图片文件

海报图片提供了视频内容的预览，可以在播放开始前提供上下文，从而改善用户体验。

探索视频标签属性和配置

在这一步中，你将深入了解 HTML5 视频元素的各种属性和配置。更新 ~/project/video-demo.html 文件以探索这些高级设置：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>高级视频配置</title>
  </head>
  <body>
    <h1>探索视频标签属性</h1>

    <video
      controls
      width="640"
      height="360"
      muted
      poster="video-thumbnail.png"
      preload="metadata"
      loop
      playsinline
    >
      <source
        src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
        type="video/mp4"
      />
      <source
        src="https://sample-videos.com/video321/webm/720/big_buck_bunny_720p_1mb.webm"
        type="video/webm"
      />
      Your browser does not support the video tag.
    </video>
  </body>
</html>

让我们探索这些新属性：

preload="metadata"：
- 控制视频在播放前的加载方式
- 选项：auto（加载整个视频）、metadata（仅加载元数据）、none（不预加载）
loop：
- 使视频在结束时自动重新播放
- 适用于背景或重复内容
playsinline：
- 允许视频在移动设备上内联播放
- 防止 iOS 设备自动进入全屏模式

你可以尝试的其他有用属性：

autoplay：自动开始视频播放
crossorigin：处理跨域视频源
disablepictureinpicture：防止画中画模式

专业提示：

并非所有浏览器都支持每个属性
始终在不同设备和浏览器上进行测试
使用 autoplay 或 loop 时需考虑用户体验

增强视频播放体验

在这一步中，你将学习如何通过添加自定义控件和样式来增强视频播放体验。创建一个新文件 ~/project/video-enhanced.html，内容如下：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>增强版视频播放器</title>
    <style>
      .video-container {
        max-width: 640px;
        margin: 0 auto;
        position: relative;
      }
      .custom-controls {
        display: flex;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
      }
      .custom-controls button {
        background: none;
        border: none;
        color: white;
        margin-right: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="video-container">
      <video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
        <source
          src="https://sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4"
          type="video/mp4"
        />
        Your browser does not support the video tag.
      </video>

      <div class="custom-controls">
        <button onclick="togglePlay()">播放/暂停</button>
        <button onclick="muteToggle()">静音/取消静音</button>
        <input
          type="range"
          min="0"
          max="100"
          value="50"
          onchange="changeVolume(this.value)"
        />
      </div>
    </div>

    <script>
      const video = document.getElementById("myVideo");

      function togglePlay() {
        if (video.paused) {
          video.play();
        } else {
          video.pause();
        }
      }

      function muteToggle() {
        video.muted = !video.muted;
      }

      function changeVolume(value) {
        video.volume = value / 100;
      }
    </script>
  </body>
</html>

如果你对 CSS 和 JavaScript 不熟悉，不用担心。这个示例提供了一种简单的方法来创建自定义视频控件并设计视频播放器界面。

此示例中的关键增强功能：

自定义视频控件：
- 创建一个带有播放/暂停和静音按钮的自定义控制面板
- 添加音量滑块以实现精确的音量控制
CSS 样式：
- 设计视频容器和控件的样式
- 使用 flexbox 进行布局
- 为控件添加半透明背景
JavaScript 交互：
- togglePlay()：手动控制视频的播放/暂停
- muteToggle()：切换视频的静音状态
- changeVolume()：以编程方式调整视频音量

与默认的浏览器控件相比，这种方法为设计视频播放器界面提供了更大的灵活性。

总结

在本实验中，参与者学习了如何使用 <video> 标签在 HTML 中嵌入和自定义视频元素。实验涵盖了创建交互式视频播放器的关键技术，包括添加基本控件、指定多个视频源以及配置播放设置。参与者掌握了设置视频尺寸、实现回退内容、添加默认播放器控件以及管理视频静音和源选择等关键技能。

通过创建一个具有标准功能（如播放/暂停控件、宽度和高度配置以及对不同视频格式的支持）的演示视频元素，参与者探索了实用的 HTML5 视频嵌入技术。实验提供了动手实践的机会，帮助理解视频标签属性，并通过各种配置选项增强用户与嵌入视频内容的交互体验。