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

超、凢脫俗 2023-01-23 13:54 761阅读 0赞

> #### 有时候我们在做项目的过程中会遇到这样的需求： ####
> 
> ###### 使用H5中的video标签播放一个视频，并在视频的中心位置放置一个暂停的图标，点击后视频播放，图标消失；再次点击后，视频暂停，图标出现。 ######

想要的效果，例下：

![在这里插入图片描述][20210715134128156.gif_pic_center]

*  **我们可以配合使用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）：

*  示例代码如下（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();
      }
    },

--------------------

[20210715134128156.gif_pic_center]: /images/20221004/4aedeb5dc4b8441091fa8f4bf1d1fb5c.png