Autoplay videos

autoplay-videos-directive.js

const elements = document.querySelectorAll('video[data-autoplay]')

const observer = new IntersectionObserver(handleIntersection, {
  rootMargin: '0px',
  threshold: 0.7
})

let visibleVideos = new Set()
let previouslyVisibleVideos = null

function handleIntersection (entries, observer) {
  entries.forEach((entry, index) => {
    const video = entry.target
    if (entry.isIntersecting) {
      video.play()
      visibleVideos.add(video)
    } else {
      visibleVideos.delete(video)
      video.pause()
    }
  })
}

function handleVisibilityChange (elements) {
  if (document.hidden) {
    if (!previouslyVisibleVideos) {
      previouslyVisibleVideos = visibleVideos
      visibleVideos = []
      previouslyVisibleVideos.forEach(video => video.pause())
    }
  } else {
    previouslyVisibleVideos.forEach(video => video.play())
    visibleVideos = previouslyVisibleVideos
    previouslyVisibleVideos = null
  }
}

export default {
  bind: (rootEl) => {
    elements.forEach((el, index) => {
      observer.observe(el)
    })

    document.addEventListener('visibilitychange', handleVisibilityChange, false)
  },
  unbind: () => {
    elements.forEach((el, index) => {
      observer.unobserve(el)
    })

    document.removeEventListener('visibilitychange', handleVisibilityChange, false)
  }
}