`ftd.video`
`ftd.video` is the kernel element used to embed video content in `ftd`.
Usage
Input
-- ftd.video:
src: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: true
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
Output
Attributes
`ftd.video` accepts the below attributes as well all the [common
attributes](ftd/common/).
`src`
Required: True
The `src` attribute specifies the path to the video to embed. This is the only
required attribute. `src` stores video URLs for both light and dark mode.
Video
-- ftd.video:
src: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
Output: Video
Video using assets
-- import: fastn.com/assets
Lang:
ftd
Then, use the `files` field of `assets` variable to access files present in the
package. For example:
Video using assets
-- import: fastn.com/assets
-- ftd.video:
src: $assets.files.videos.bunny.mp4
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
The output will look same as above.
`controls`
Type: `optional` [`boolean`](ftd/built-in-types/#boolean)
Required: False
Default: False
If this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
Sample code using `controls`
Input
-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
controls: true
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
Output
`muted`
Type: `optional` [`boolean`](ftd/built-in-types/#boolean)
Required: False
Default: False
A Boolean attribute that indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced.
Sample code using `muted`
Input
-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
muted: true
controls: true
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
Output
`autoplay`
Type: `optional` [`boolean`](ftd/built-in-types/#boolean)
Required: False
Default: False
A Boolean attribute; if specified, the video automatically begins to play back as soon as it can do so without stopping to finish loading the data.
**Note:** The autoplay option is only respected by the browser if the video is muted.
Sample code using `autoplay`
Input
-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
autoplay: true
muted: true
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
Output
`poster`
Type: `optional` [`string`](ftd/built-in-types/#string)
Required: False
A URL for an image to be shown while the video is downloading. If this attribute isn't specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.
Sample code using `poster`
Input
-- ftd.video: https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4
poster: https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg
width.fixed.px: 400
height.fixed.px: 300
Lang:
ftd
Output
Support `fastn`!
Enjoying `fastn`? Please consider giving us a star ⭐️ on
[GitHub](https://github.com/fastn-stack/fastn) to show your support!
[⭐️](https://github.com/fastn-stack/fastn)
Getting Help
Have a question or need help?
Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a)
to get answers and subscribe to it to stay tuned.
Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your
thoughts, suggestion, question etc.
Connect with our [community](/community/)!
[💻️](/community/)
Found an issue?
If you find some issue, please visit our [GitHub
issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.
Quick links:
- [Install `fastn`](install/)
- [Create `fastn` package](create-fastn-package/)
- [Expander Crash Course](expander/)
- [Syntax Highlighting in Sublime Text](/sublime/)
Join us
We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community
today.
We are trying to create the language for human beings and we do not believe it
would be possible without your support. We would love to hear from you.
Copyright © 2023 - fastn.com
