c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-06 03:46:47 +01:00
Code Releases Activity

fix(web): play videos on safari (#3748)

Browse source 
* fix(web): play videos on safari

* autoplay

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen 2023-08-17 14:52:50 -04:00 committed by GitHub
parent cdb45364c3
commit 2ff71b0d27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/lib/components/asset-viewer/video-viewer.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { api } from '@api'; import { ThumbnailFormat, api } from '@api';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { videoViewerVolume } from '$lib/stores/preferences.store'; import { videoViewerVolume } from '$lib/stores/preferences.store';
@ -18,21 +18,24 @@
video.muted = true; video.muted = true;
await video.play(); await video.play();
video.muted = false; video.muted = false;
isVideoLoading = false;
} catch (error) { } catch (error) {
handleError(error, 'Unable to play video'); handleError(error, 'Unable to play video');
} finally {
isVideoLoading = false;
} }
}; };
</script> </script>
<div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center"> <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
<video <video
autoplay
playsinline
controls controls
class="h-full object-contain" class="h-full object-contain"
on:canplay={handleCanPlay} on:canplay={handleCanPlay}
on:ended={() => dispatch('onVideoEnded')} on:ended={() => dispatch('onVideoEnded')}
bind:volume={$videoViewerVolume} bind:volume={$videoViewerVolume}
poster={api.getAssetThumbnailUrl(assetId, ThumbnailFormat.Jpeg)}
> >
<source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" /> <source src={api.getAssetFileUrl(assetId, false, true, publicSharedKey)} type="video/mp4" />
<track kind="captions" /> <track kind="captions" />