Nuxt•7mo ago

Does anyone know if @canplaythrough is still a valid listener to use on a `<video /> ` element?

Title! Thanks, and let me know if you have an implementation. I want to play a video only when it is loaded, here is what I have, but it doesn't quite work

6 Replies

dbh!OP•7mo ago

Here is a basic implementation that I am trying:

<template>
  <div id="#seqTest">
    <video ref="videoElement" @canplaythrough="handleCanPlayThrough()" v-if="!isLoading" muted loop>
      <source src="/load.mp4" type="video/mp4" />
    </video>
    <div v-else><span>Loading...</span></div>
  </div>
</template>

<script setup lang="ts">

const isLoading = ref(true);
const videoElement = ref<HTMLVideoElement | null>(null);

function handleCanPlayThrough() {
  isLoading.value = false;
  videoElement.value.play();
}

</script>

<template>
  <div id="#seqTest">
    <video ref="videoElement" @canplaythrough="handleCanPlayThrough()" v-if="!isLoading" muted loop>
      <source src="/load.mp4" type="video/mp4" />
    </video>
    <div v-else><span>Loading...</span></div>
  </div>
</template>

<script setup lang="ts">

const isLoading = ref(true);
const videoElement = ref<HTMLVideoElement | null>(null);

function handleCanPlayThrough() {
  isLoading.value = false;
  videoElement.value.play();
}

</script>

Fabian B.•7mo ago

Hi there! From your implementation, it looks like the video can never start to load, because you do not render it (isLoading is true on component load). Is there a reason you don't want to use the autoplay attribute on the <video>?

dbh!OP•7mo ago

That definitely helps 👍 And no, no reason specifically, I am not aware of any of its implications here (and all I'm really trying to do is lazy load a video! its really just a "welcome" animation,, so it will get hidden somehow in less than a second or two)

Fabian B.•7mo ago

Yeah I see, unfortunately, there is no native way of lazy loading videos. But you could add a short script that listens to the scroll event and when the video is inside the video, start rendering it.

dbh!OP•7mo ago

Ended up solving it, by isolating the video into a component that emits once it can play through, and looking back on this, the goal wasnt really lazy loading, but rather making sure that a video can play (and displaying a loading while it can’t) before triggering some css stuffs.

Fabian B.•7mo ago

Sounds great 🙂

Gaming

Programming

Does anyone know if @canplaythrough is still a valid listener to use on a `<video /> ` element?