Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astro transitions break preloaded videos #11918

Closed
1 task
FormalSnake opened this issue Sep 4, 2024 · 2 comments
Closed
1 task

Astro transitions break preloaded videos #11918

FormalSnake opened this issue Sep 4, 2024 · 2 comments
Labels
needs repro Issue needs a reproduction

Comments

@FormalSnake
Copy link

Astro Info

Astro                    v4.15.2
Node                     v20.13.1
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react
                         @astrojs/tailwind
                         @astrojs/partytown
                         getblogs
                         astro-compress

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

So, I have a card that on hover plays a video that is preloaded for optimization reasons:

<Card
    className="bg-muted/40 overflow-hidden p-8 hiddenScroll relative group"
    transition:name="block-0"
  >
    <video
      class="absolute inset-0 w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity duration-300 video"
      loop
      muted
      preload="none"
      playsinline
    >
      <source
        src="https://utfs.io/f/c5f46a8f-e828-4d96-b5fe-f4194eb6c803-py3j3z.mp4"
        type="video/mp4"
      />
    </video>
    <Image
      src={solarBlockImage || placeholder}
      alt="Social"
      width={500}
      height={500}
      sizes="100vw"
      densities={[1.5, 2]}
      class="w-full h-full object-contain transition-all duration-300 relative z-10 pointer-events-none group-hover:opacity-50 opacity-100"
      loading={'eager'}
    />
    <OpenButton title={solarBlock.title} href={solarBlock.href} />
  </Card>

And with a script it plays the video on hover:

 <script is:inline>
    const videos = document.querySelectorAll('.video')

    videos.forEach((video) => {
      video.addEventListener('mouseenter', () => {
        video.play()
      })
    })
  </script>

but when using astro page transitions, if you go to another page and then back, the video doesn't load anymore

What's the expected result?

That the video would just keep playing.

Link to Minimal Reproducible Example

You can see it on my website: https://www.formalsnake.dev/

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Sep 4, 2024
@github-staff github-staff deleted a comment from FormalSnake Sep 4, 2024
@florian-lefebvre florian-lefebvre added the needs repro Issue needs a reproduction label Sep 6, 2024
Copy link
Contributor

github-actions bot commented Sep 6, 2024

Hello @FormalSnake. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Sep 6, 2024
@FormalSnake
Copy link
Author

It only happens in the dev server, not production.
probably should be fixed but i dont want to create a reproduction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs repro Issue needs a reproduction
Projects
None yet
Development

No branches or pull requests

3 participants
@florian-lefebvre @FormalSnake and others