|
| 1 | +<script lang="ts"> |
| 2 | + /* USE <Image> component directly NOT this component */ |
| 3 | +
|
| 4 | + export let src: string; |
| 5 | + export let poster = ''; |
| 6 | + export let classes: string = 'object-cover w-full bg-cover rounded bg-black/50 aspect-video'; |
| 7 | +
|
| 8 | + import { lazyload, HtmlVideoLayer, type VideoSources } from '@cloudinary/html'; |
| 9 | + import { CloudinaryImage, CloudinaryVideo } from '@cloudinary/url-gen'; |
| 10 | + import { format, quality } from '@cloudinary/url-gen/actions/delivery'; |
| 11 | + import { auto } from '@cloudinary/url-gen/qualifiers/format'; |
| 12 | + import { onMount } from 'svelte'; |
| 13 | +
|
| 14 | + let bindVideo: HTMLVideoElement | null = null; |
| 15 | + onMount(() => { |
| 16 | + const matchVideo = src.match(/upload\/(?:v\d+\/)?(.+?)\.[^\.]+$/)?.at(1); |
| 17 | + const removeVideoFront = src.replace('https://media.codingcat.dev/video/upload/', ''); |
| 18 | + const newVideo = new CloudinaryVideo( |
| 19 | + matchVideo || removeVideoFront, |
| 20 | + { cloudName: 'none' }, |
| 21 | + { secureDistribution: 'media.codingcat.dev', privateCdn: true, secure: true } |
| 22 | + ) |
| 23 | + .delivery(format(auto())) |
| 24 | + .delivery(quality('auto')); |
| 25 | + let newImage; |
| 26 | + if (poster) { |
| 27 | + const matchImage = poster.match(/upload\/(?:v\d+\/)?(.+?)\.[^\.]+$/)?.at(1); |
| 28 | + const removeImageFront = poster.replace('https://media.codingcat.dev/image/upload/', ''); |
| 29 | + newImage = new CloudinaryImage( |
| 30 | + matchImage || removeImageFront, |
| 31 | + { cloudName: 'none' }, |
| 32 | + { secureDistribution: 'media.codingcat.dev', privateCdn: true, secure: true } |
| 33 | + ) |
| 34 | + .delivery(format(auto())) |
| 35 | + .delivery(quality('auto')); |
| 36 | + } |
| 37 | + console.log('newImage', newImage); |
| 38 | + new HtmlVideoLayer(bindVideo, newVideo, undefined, undefined, undefined, newImage); |
| 39 | + }); |
| 40 | +</script> |
| 41 | + |
| 42 | +<!-- svelte-ignore a11y-media-has-caption --> |
| 43 | +<video bind:this={bindVideo} class={`cld-video-player ${classes}`} controls autoplay /> |
0 commit comments