当前位置：首页 > VUE

vue实现视频滑入播放

2026-02-21 15:23:32VUE

实现视频滑入播放功能

在Vue中实现视频滑入播放功能，可以通过监听滚动事件并结合Intersection Observer API来实现。以下是具体实现方法：

使用Intersection Observer API

Intersection Observer API是现代浏览器提供的更高效的方法，用于监听元素是否进入视口：

<template>
  <div class="video-container">
    <video 
      ref="videoPlayer" 
      muted 
      loop 
      preload="auto"
      class="video-element"
    >
      <source src="your-video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  mounted() {
    const video = this.$refs.videoPlayer;
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          video.play();
        } else {
          video.pause();
        }
      });
    }, {
      threshold: 0.5 // 当50%的视频进入视口时触发
    });

    observer.observe(video);
  }
}
</script>

<style>
.video-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-element {
  max-width: 100%;
  max-height: 100%;
}
</style>

使用滚动事件监听

对于需要兼容旧浏览器的情况，可以使用传统的滚动事件监听：

<template>
  <div class="video-container" ref="videoContainer">
    <video 
      ref="videoPlayer" 
      muted 
      loop 
      preload="auto"
      class="video-element"
    >
      <source src="your-video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const video = this.$refs.videoPlayer;
      const container = this.$refs.videoContainer;
      const rect = container.getBoundingClientRect();

      // 当视频中心点进入视口时播放
      const videoCenter = rect.top + (rect.height / 2);
      const isVisible = videoCenter > 0 && videoCenter < window.innerHeight;

      if (isVisible) {
        video.play();
      } else {
        video.pause();
      }
    }
  }
}
</script>

添加平滑过渡效果

为了使视频滑入更加平滑，可以添加CSS过渡效果：

.video-element {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.video-element.visible {
  transform: translateY(0);
  opacity: 1;
}

然后在JavaScript中根据滚动位置添加/移除visible类：

handleScroll() {
  const video = this.$refs.videoPlayer;
  const container = this.$refs.videoContainer;
  const rect = container.getBoundingClientRect();

  const videoCenter = rect.top + (rect.height / 2);
  const isVisible = videoCenter > 0 && videoCenter < window.innerHeight;

  if (isVisible) {
    video.classList.add('visible');
    video.play();
  } else {
    video.classList.remove('visible');
    video.pause();
  }
}

性能优化建议

对于多视频页面，建议使用Intersection Observer API而不是滚动事件监听，因为前者性能更好。

考虑使用懒加载技术，只有当视频即将进入视口时才加载视频资源，可以减少初始页面加载时间。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const video = entry.target;
      video.src = video.dataset.src;
      video.play();
      observer.unobserve(video);
    }
  });
}, {
  rootMargin: '0px 0px 200px 0px' // 提前200px触发
});

// 对每个视频元素调用observer.observe()

vue实现视频滑入播放