使用H5中的video标签时，页面中间显示“暂停”图标；点击播放，图标消失；点击暂停，图标出现（play、pause、ended）

最新推荐文章于 2025-02-20 00:57:25 发布

huangfuyk

最新推荐文章于 2025-02-20 00:57:25 发布

阅读量9.3k

点赞数 5

分类专栏： JavaScript Vue2 CSS3 文章标签： html5 css3 前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_42881768/article/details/118757567

版权

JavaScript 同时被 3 个专栏收录

98 篇文章

订阅专栏

38 篇文章

订阅专栏

CSS3

8 篇文章

订阅专栏

本文介绍了如何在Vue项目中利用video标签结合play、pause、ended事件，以及CSS和JavaScript实现视频播放时在中心位置显示/隐藏暂停图标的功能。通过设置data属性videoIsPlay控制图标显示状态，并绑定点击事件改变视频播放状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候我们在做项目的过程中会遇到这样的需求：

使用H5中的video标签播放一个视频，并在视频的中心位置放置一个暂停的图标，点击后视频播放，图标消失；再次点击后，视频暂停，图标出现。

想要的效果，例下：

在这里插入图片描述

我们可以配合使用video标签的pause、play、ended方法进行实现：

①因为是一个vue项目，先定义一个变量，暂且叫它videoIsPlay，默认为false，即视频暂停时状态；

data () {
  return {
    videoIsPlay: false,
  }
},

②配置video标签；

<video
   ref="videoRef" // 用来获取video所在的DOM元素
   :src="视频地址"
   controls // 规定浏览器应该为视频提供播放控件,比如：暂停、播放、声音、字幕等
   @play="videoIsPlay = true;" // play() 方法开始播放当前视频，改变videoIsPlay的值，使图标隐藏
   @pause="videoIsPlay = false;" // pause() 方法暂停播放当前视频，改变videoIsPlay的值，使图标显示
   @ended="videoIsPlay = false;"> // 视频播放完毕，改变videoIsPlay的值，使图标显示
</video>

③ 生成视频中心位置的暂停图标，可以找UI切图，或自己用CSS写一个样式出来，此处选择第二种方式，同时给该图标一个点击事件；

示例代码如下（HTML）：

<i
class="start-play"
v-show="!videoIsPlay"
@click="changeVideoStatus()"
>
</i>

示例代码如下（CSS）：

.start-play {
  cursor: pointer;
  width: 63px;
  height: 63px;
  background: linear-gradient(135deg, #1890FF 0%, #0059F4 100%);
  opacity: 0.7;
  border-radius: 50%;
  display: block;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  &::after {
    content: "";
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-left: 19px solid white;
    position: absolute;
    top: 32%;
    left: 40%;
  }
}

示例代码如下（JS）：

changeVideoStatus() {
 const video = this.$refs.videoRef;
  if(video.paused) {
    video.play();
  } else {
    video.pause();
  }
},