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.

Sign up for GitHub

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

Jump to bottom

svelte kit window is not defined #15

Open
MarcDAFrame opened this issue Jul 21, 2022 · 2 comments · May be fixed by #19
Open

svelte kit window is not defined #15

MarcDAFrame opened this issue Jul 21, 2022 · 2 comments · May be fixed by #19

Comments

@MarcDAFrame
Copy link

does this work for SvelteKit?
@Eudritch
Copy link

Eudritch commented Aug 4, 2022 •
edited

First and foremost, I recommend SvelteKit over plain svelte. SvelteKit is a svelte extension that simplifies routing and includes features that plain svelte does not, such as layouts.

SvelteKit uses (SSR) server-side rendering by default. Yes, windows work on SvelteKit without an adapter; however, you must add the window on the built-in svelte function, onMount. If you wish to use windows as freely as you do in svelte (SPA). You must install @sveltejs/adapter-static

  • install SvelteKit static adapter: run npm i -D @sveltejs/adapter-static'
  • Add adapter in svelte.config.js
import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      fallback: true,
    })

@EmilTholin
Copy link

You can disable server-side rendering on the page you use the video player.

// +page.js
export const ssr = false;

You can also import the component in onMount to make sure it is only loaded in the browser. This way you don't need to disable SSR.

<!-- +page.svelte -->
<script>
  import { onMount } from 'svelte';

  let VideoPlayer;

  const poster = 'https://res.cloudinary.com/dvm02rtnk/image/upload/c_scale,w_1024,q_auto/v1628058523/blender/HERO_Blender_Grease_Pencil_Showcase_g86hfo.jpg';
  const source = [
    'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.mp4',
    'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.webm',
    'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.ogv',
  ];

  onMount(async () => {
    const component = await import('svelte-video-player');

    VideoPlayer = component.default;
  });
</script>

<svelte:component this={VideoPlayer} {poster} {source} />

@burleight burleight linked a pull request Jun 13, 2023 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

SvelteKit SSR fix in screenfull.js burleight/svelte-video-player
3 participants
@EmilTholin @MarcDAFrame @Eudritch