dbh!
dbh!
PostsComments
NNuxt
Created by dbh! on 6/16/2024 in #❓・help
Does anyone know if @canplaythrough is still a valid listener to use on a `<video /> ` element?
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.
8 replies
NNuxt
Created by dbh! on 6/16/2024 in #❓・help
Does anyone know if @canplaythrough is still a valid listener to use on a `<video /> ` element?
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)
8 replies
NNuxt
Created by dbh! on 6/16/2024 in #❓・help
Does anyone know if @canplaythrough is still a valid listener to use on a `<video /> ` element?
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>
8 replies