网页视频播放插件

1.HTML代码

  <div class="video-popup">
    <div class="video-container">
      <video id="video-player" controls>
        <source src="" type="video/mp4" />
      </video>
      <button id="close-btn" @click="closeVideoPopup()">关闭</button>
    </div>
  </div>

2.CSS代码

.video-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.651);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.video-container {
  position: relative;
}

#video-player {
  width: 800px;
  height: 450px;
  background: #0000009d;
}

#close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
}

#close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  width: 30px;
  height: 30px;
  border-radius: 15px;
}

3.js代码

function openVideoPopup(coverVideo) {
  var videoPopup = document.querySelector('.video-popup')
  console.log('新的视频id', coverVideo)
  // 获取视频源标签
  var source = document.querySelector('#video-player source')

  // 更改src属性
  source.src = coverVideo

  // 获取视频元素
  var video = document.getElementById('video-player')

  // 重新加载视频
  video.load()
  videoPopup.style.display = 'flex'
}

function closeVideoPopup() {
  var videoPopup = document.querySelector('.video-popup')
  videoPopup.style.display = 'none'
}