How can I implement lazy loading for videos in Vue.js?

How can I implement lazy loading for videos in Vue.js?

You can implement lazy loading for videos in Vue.js by using the Intersection Observer API to detect when a video is in the viewport.

Can you provide a code example for that?

Sure! Here's a simple example:

<template>
  <video v-if="isVisible" controls>
    <source :src="videoSrc" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      videoSrc: ''
    };
  },
  mounted() {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.isVisible = true;
          this.videoSrc = 'path/to/your/video.mp4';
          observer.unobserve(entry.target);
        }
      });
    });
    observer.observe(this.$el);
  }
};
</script>

What if I want to preload the video metadata?

You can preload the video metadata by setting the preload attribute in the <video> tag. For example, <video preload="metadata" ...>. This will load the metadata without downloading the entire video.