原生js实现轮播图——卡片模式(视频)

1、需求

• 视频无限循环且无缝衔接，设置视频为未播放状态。
• 鼠标进入，定时器关闭；鼠标离开，定时器开启。
• 点击视频后，播放按钮消失，视频开始播放。
• 点击播放的视频后，视频暂停播放，播放按钮出现。

2、效果

3、代码

html代码：

<div class="palyBox">
    <div class="playList">
      <div class="list_div">
        <video
          class="videoItem"
          id="video1"
          controls
          muted="ture"
          src="../视频.mp4"
          poster=""
        >
          <source
            type="video/mp4"
          />
        </video>
        <div class="play-videoBtn" onclick="playPause(video1)">
          <span>►</span>
        </div>
      </div>
      <div class="list_div">
        <video
          class="videoItem"
          id="video2"
          controls
          muted="ture"
          src="../视频.mp4"
          poster=""
        >
          <source
            type="video/mp4"
          />
        </video>
        <div class="play-videoBtn" onclick="playPause(video2)">
          <span>►</span>
        </div>
      </div>
      <div class="list_div">
        <video
          class="videoItem"
          id="video3"
          controls
          muted="ture"
          src="../视频.mp4"
          poster=""
        >
          <source
            type="video/mp4"
          />
        </video>
        <div class="play-videoBtn" onclick="playPause(video3)">
          <span>►</span>
        </div>
      </div>
      <div class="list_div">
        <video
          class="videoItem"
          id="video4"
          controls
          muted="ture"
          src="../视频.mp4"
          poster=""
        >
          <source
            type="video/mp4"
          />
        </video>
        <div class="play-videoBtn" onclick="playPause(video4)">
          <span>►</span>
        </div>
      </div>
      <div class="list_div">
        <video
          class="videoItem"
          id="video5"
          controls
          muted="ture"
          src="../视频.mp4"
          poster=""
        >
          <source
            type="video/mp4"
          />
        </video>
        <div class="play-videoBtn" onclick="playPause(video5)">
          <span>►</span>
        </div>
      </div>
      <div class="list_div">
        <video
          class="videoItem six_div"
          id="video6"
          controls
          muted="ture"
          src="../视频.mp4"
          poster=""
        >
          <source
            type="video/mp4"
          />
        </video>
        <div class="play-videoBtn" onclick="playPause(video6)">
          <span>►</span>
        </div>
      </div>
    </div>
  </div>

css代码：

/* 隐藏视频默认的播放控件 */
      video::-webkit-media-controls-panel {
        display: none !important;
      }
      .palyBox {
        width: 100%;
        overflow: hidden;
        position: relative;
      }
      .playList {
        display: flex;
        position: absolute;
        left: 0px;
      }

      .list_div {
        position: relative;
      }
      .playList .videoItem {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2px;
        margin-right: 2px;
      }

      /* 隐藏视频默认的播放控件 */
      video::-webkit-media-controls-panel {
        display: none !important;
      }

      /* 自定义播放按钮的样式 */
      .play-videoBtn {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 2;
        left: 0;
        top: 0;
      }
      .play-videoBtn span {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        background-color: #000;
        color: #fff;
        text-align: center;
        line-height: 50px;
        border-radius: 25px;
        cursor: pointer;
        user-select: none;
        z-index: 1;
      }

      /* 隐藏视频标签，只显示自定义播放按钮 */
      video {
        position: relative;
      }
      @media screen and (max-width: 750px) {
        .palyBox {
          height: 150px;
        }
        .playList .videoItem {
          width: 200px;
          height: 150px;
        }
      }

      @media screen and (min-width: 751px) {
        .palyBox {
          height: 200px;
        }
        .playList .videoItem {
          width: 360px;
          height: 200px;
        }
      }

js代码：