Open godmar opened 1 year ago
PS: I believe that HTML5 video requires calling .load()
when the sources or src
changes, see HTMLMediaElement: load method.
The component as currently written doesn't appear to do this. I'm also not sure how to retrieve the <video>
element from it, but here's a work around I found works:
<script>
import VideoPlayer from 'svelte-video-player';
let src1 = 'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057414/blender/HERO_Blender_Grease_Pencil_Showcase_1080p_ctsjpy.mp4';
let src2 = 'https://res.cloudinary.com/dvm02rtnk/video/upload/v1628057411/blender/Agent_327_Operation_Barbershop_1080p_hf1iq7.mp4';
let source = "please select a video";
let player;
function select(k) {
source = k;
player.querySelectorAll('video')[0].load();
}
</script>
<h1>svelte-video-player</h1>
<div style="max-width: 40%">
<div>
Select
<button on:click={() => select(src1)}>Video 1</button>
<button on:click={() => select(src2)}>Video 2</button>
</div>
<div bind:this={player}>
Currently playing: {source}
<VideoPlayer source={source} />
</div>
</div>
Hi, when the components
source
property changes, should the video that's displayed be updated?My test case:
Pressing a button changes
source
, butVideoPlayer
seems to want to playplease select a video
(if I dolet source = src1
is player the first video, always.