html5 video上显示大播放按钮

原创

mob649e815c3b9e 2023-07-22 11:19:22 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e815c3b9e的原创作品，请联系作者获取转载授权，否则将追究法律责任

HTML5 Video上显示大播放按钮

HTML5 Video元素是Web开发中用于在网页上播放视频的一种标准化方式。它的使用非常简单，只需在HTML中插入一个<video>标签，并设置相应的属性就可以实现视频的播放和控制。然而，有时我们需要自定义视频播放器的样式，比如在视频上显示一个大的播放按钮，以提高用户体验。本文将介绍如何使用HTML和CSS来实现这一功能。

1. 创建HTML结构

首先，我们需要创建HTML结构来容纳视频和播放按钮。我们可以使用<div>元素来包裹视频，并在其中插入一个<button>元素作为播放按钮。同时，我们还可以在按钮中添加一个图标以更好地指示其功能。

下面是一个示例代码片段：

<div class="video-container">
  <video src="video.mp4" controls></video>
  <button class="play-button">
    <i class="fa fa-play"></i>
  </button>
</div>

在上述代码中，我们使用了video-container类来定义包裹视频的容器，并使用了play-button类来定义播放按钮。

2. 添加CSS样式

接下来，我们需要通过CSS样式来调整视频和播放按钮的外观。我们可以使用相对定位（position: relative）和绝对定位（position: absolute）来将播放按钮放置在视频上方，并通过z-index属性来设置其堆叠顺序。

以下是一个示例CSS代码片段：

.video-container {
  position: relative;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  padding: 16px;
  color: white;
  cursor: pointer;
}

.play-button i {
  font-size: 24px;
}

在上述代码中，我们将容器的位置设置为相对定位，以便播放按钮相对于容器进行定位。播放按钮的位置通过top、left和transform属性进行设置，使其居中显示在视频上方。我们还设置了按钮的背景颜色、边框、边框半径、内边距、字体颜色和鼠标指针样式。

3. 添加交互功能

最后，我们需要使用JavaScript来添加交互功能，以便在用户点击播放按钮时开始视频的播放。

以下是一个示例JavaScript代码片段：

const video = document.querySelector('video');
const playButton = document.querySelector('.play-button');

playButton.addEventListener('click', () => {
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});

在上述代码中，我们首先获取视频和播放按钮的元素。然后，我们使用addEventListener方法为播放按钮添加一个点击事件监听器。在事件处理程序中，我们检查视频的当前状态，如果视频是暂停状态，则调用play方法开始播放视频，否则调用pause方法暂停视频。