Question

HTML5 提供了用于在文档中嵌入富媒体的元素 — <video>和<audio> — 这些元素通过自带的 API 来控制视频或音频的播放，定位进度等。本文将向你展示如何执行一些常见的任务，如创建自定义播放控件。

HTML5 视频和音频

<video>和<audio> 元素允许我们把视频和音频嵌入到网页当中。就像我们在音频和视频内容文中展示的一样，一个典型的实现如下所示：

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

HTMLMediaElement API

作为 HTML5 规范的一部分，HTMLMediaElement API 提供允许你以编程方式来控制视频和音频播放的功能—例如 HTMLMediaElement.play(), HTMLMediaElement.pause(),等。该接口对 <audio>和<video> 两个元素都是可用的，因为在这两个元素中要实现的功能几乎是相同的。让我们通过一个例子来一步步演示一些功能。

探索 HTML

打开 HTML index 文件。你将看到一些功能；HTML 由视频播放器和它的控件所控制：

<div class="player">
  <video controls>
    <source src="video/sintel-short.mp4" type="video/mp4">
    <source src="video/sintel-short.mp4" type="video/webm">
    <!-- fallback content here -->
  </video>
  <div class="controls">
    <button class="play" data-icon="P" aria-label="play pause toggle"></button>
    <button class="stop" data-icon="S" aria-label="stop"></button>
    <div class="timer">
      <div></div>
      <span aria-label="timer">00:00</span>
    </div>
    <button class="rwd" data-icon="B" aria-label="rewind"></button>
    <button class="fwd" data-icon="F" aria-label="fast forward"></button>
  </div>
</div>

我们从设置为 hidden 的自定义控件 visibility 开始。稍后在我们的 JavaScript 中，我们将控件设置为 visible, 并且从

默认情况下，我们将控件的 opacity 设置为 0.5 opacity，这样当您尝试观看视频时，它们就不会分散注意力。只有当您将鼠标悬停/聚焦在播放器上时，控件才会完全不透明。

我们使用 Flexbox(display: flex) 布置控制栏内的按钮，以简化操作。

按钮图标：

@font-face {
   font-family: 'HeydingsControlsRegular';
   src: url('fonts/heydings_controls-webfont.eot');
   src: url('fonts/heydings_controls-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/heydings_controls-webfont.woff') format('woff'),
        url('fonts/heydings_controls-webfont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

button:before {
  font-family: HeydingsControlsRegular;
  font-size: 20px;
  position: relative;
  content: attr(data-icon);
  color: #aaa;
  text-shadow: 1px 1px 0px black;
}

首先在 CSS 的最上方我们使用 @font-face 块来导入自定义 Web 字体。这是一种图标字体 —— 字母表中的所有字符都是各种常用图标，你可以尝试在程序中调用。

我们使用 ::before 选择器在每个 元素之前显示内容。

我们使用 content 属性将各情况下要显示的内容设置为 data-icon 属性的内容。例如在播放按钮的情况下，data-icon 包含大写的“P”。

我们使用 font-family 将自定义 Web 字体应用于我们的按钮上。在该字体中“P”对应的是“播放”图标，因此播放按钮上显示“播放”图标。

图标字体非常酷有很多原因 —— 减少 HTTP 请求，因为您不需要将这些图标作为图像文件下载。同时具有出色的可扩展性，以及您可以使用文本属性来设置它们的样式 —— 例如 color 和 text-shadow。

播放和暂停视频

让我们实现或许是最重要的控制——播放/暂停按钮。

首先，将以下内容添加到您代码的底部，以便于在单击播放按钮时调用 playPauseMedia() 函数：

play.addEventListener('click', playPauseMedia);

现在定义 playPauseMedia() 函数——再次添加以下内容到您代码底部：

function playPauseMedia() {
  if(media.paused) {
    play.setAttribute('data-icon','u');
    media.play();
  } else {
    play.setAttribute('data-icon','P');
    media.pause();
  }
}

我们使用 if 语句来检查视频是否暂停。如果视频已暂停，HTMLMediaElement.paused 属性将返回 true，任何视频没有播放的时间，包括第一次加载时处于 0 的时间段都是视频暂停状态。如果已暂停，我们把 play 按钮的 data-icon 属性值设置成"u", 用以表示 "暂停" 按钮图标，并且调用 HTMLMediaElement.play() 函数播放视频。 点击第二次，按钮将会切换回去——"播放"按钮图标将会再次显示，并且视频将会被 HTMLMediaElement.paused() 函数暂停。

暂停视频

接下来，让我们添加处理视频停止的方法。添加以下的 addEventListener() 行在你之前添加的内容的下面：

stop.addEventListener('click', stopMedia);
media.addEventListener('ended', stopMedia);

click 事件很明显——我们想要在点击停止按钮的时候停止视频通过运行我们的 stopMedia() 函数。然而我们也希望停止视频当视频播放完成时——由 ended 事件标记，所以我们也会设置一个监听器在此事件触发时运行函数。

接下来，让我们定义 stopMedia()—— 在 playPauseMedia() 后面添加以下函数：

function stopMedia() {
  media.pause();
  media.currentTime = 0;
  play.setAttribute('data-icon','P');
}

探索快进和快退

首先，在前面的代码之下添加以下两个 addEventListener()：

rwd.addEventListener('click', mediaBackward);
fwd.addEventListener('click', mediaForward);

var intervalFwd;
var intervalRwd;

function mediaBackward() {
  clearInterval(intervalFwd);
  fwd.classList.remove('active');

  if(rwd.classList.contains('active')) {
    rwd.classList.remove('active');
    clearInterval(intervalRwd);
    media.play();
  } else {
    rwd.classList.add('active');
    media.pause();
    intervalRwd = setInterval(windBackward, 200);
  }
}

function mediaForward() {
  clearInterval(intervalRwd);
  rwd.classList.remove('active');

  if(fwd.classList.contains('active')) {
    fwd.classList.remove('active');
    clearInterval(intervalFwd);
    media.play();
  } else {
    fwd.classList.add('active');
    media.pause();
    intervalFwd = setInterval(windForward, 200);
  }
}

---