chrishurlburt/vue-scrollview

Playing video

scarroll32 opened this issue · 1 comments

Does this component support playing a video when scrolled to and then pausing when out of view?

Not directly. You'd have to create a vue component to wrap your video, then toggle video playback based on visibility.

The video component would look something like this:

// videoWrapper.vue
...
watch: {
  play(isVisible) {
    if (isVisible) {
      this.playVideo() // some method to play your video
    } else {
      this.pauseVideo() // some method to pause your video
    }
}
...

and the scrollview markup:

<Scroll-view>
  <template slot-scope="inView">
    <Video-wrapper :play="inView.player" key="player"></Video-wrapper>
  </template>
</Scroll-view>

In VideoWrapper.vue, you're watching for it to become visible or exit visibility and toggling video playback accordingly.