【vue2】登录页循环播放视频，实时设置播放器宽高

最新推荐文章于 2023-11-10 16:31:44 发布

原创最新推荐文章于 2023-11-10 16:31:44 发布 · 701 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue #视频

vue学习专栏收录该内容

2 篇文章

订阅专栏

文章描述了一个使用JavaScript和CSS实现的视频播放器，它能根据屏幕大小实时调整宽高，确保在不同设备上提供良好的观看体验。

    <div class="videoContainer">
      <video :style="fixStyle" class="fillWidth" playsinline autoplay muted loop>
        <source src="static/video/loginVideo.mp4" type="video/mp4" />
      </video>
    </div>

data

fixStyle: '', //屏幕发生变化时给播放器设置的样式

//监听屏幕大小实时给播放器设置宽高
    getVideoStyle() {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        console.log(
          windowWidth,
          windowHeight,
          windowAspectRatio,
          '屏幕实时大小'
        )
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial',
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial',
          }
        }
      }
      window.onresize()
    },

css

.videoContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}