42 lines
No EOL
1.5 KiB
Text
42 lines
No EOL
1.5 KiB
Text
---
|
|
Title: Audio Source
|
|
Type: Document
|
|
---
|
|
|
|
import {Prism} from "@astrojs/prism"
|
|
import {Zorn} from "@minpluto/zorn"
|
|
|
|
<Zorn
|
|
PlayerName="the_mark_on_the_wall"
|
|
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
|
|
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
|
|
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
|
|
VideoAttributes="muted"
|
|
AudioAttributes=""
|
|
/>
|
|
|
|
Since Zorn was originally built for the MinPluto frontend project, there are scenarios where the video source has no audio to get higher quality options. If you're in a scenario where the video source is missing audio, but you do have the audio itself, you can add that audio source to the video player. A separated `<audio/>` element is used, this will use a sync function in JavaScript to make sure the video and audio are synced. As before with the video source, it can be local or remote.
|
|
|
|
**Demo Used Above**
|
|
<Prism lang="jsx" code={
|
|
`---
|
|
import {Zorn} from "@minpluto/zorn"
|
|
---
|
|
|
|
<Zorn
|
|
PlayerName="the_mark_on_the_wall"
|
|
Poster="https://md.sudovanilla.org/images/wote-p-v.jpeg"
|
|
Video="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/1080.mp4"
|
|
Audio="https://ocean.sudovanilla.org/media/videos/The%20Mark%20On%20The%20Wall/audio.mp4"
|
|
VideoAttributes="muted"
|
|
AudioAttributes=""
|
|
/>
|
|
`}/>
|
|
|
|
**Local**
|
|
<Prism lang="jsx" code={`<Zorn Audio="/media/audio.ogg"/>`}/>
|
|
|
|
> Use the `/public/` folder in your Astro project.
|
|
|
|
**Remote**
|
|
<Prism lang="jsx" code={`<Zorn Audio="https://example.org/media/audio.ogg"/>`}/> |