Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video (Embed) Block enhancements #121

Open
jbmoelker opened this issue Jan 29, 2024 · 0 comments
Open

Video (Embed) Block enhancements #121

jbmoelker opened this issue Jan 29, 2024 · 0 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@jbmoelker
Copy link
Member

  • Option to add a custom poster image rather than first frame of uploaded video (Video Block) or image provided by 3rd party service (Video Embed Block)
  • Custom "Play button" overlay to improve affordability, shared between Video Block and Video Embed Block.
@jbmoelker jbmoelker mentioned this issue Jan 29, 2024
Merged
4 tasks
jbmoelker added a commit that referenced this issue Jan 29, 2024
@jbmoelker
feature: Video Block (#119)
5130cad 
# Changes

Adds Video Block that renders a video uploaded in DatoCMS with a cover
image, caption, support for subtitles and options to autoplay, mute and
loop. Features (also in block readme):

- Privacy first alternative to [Video Embed Block](../VideoEmbedBlock/),
as video uploaded in DatoCMS is served without tracking (no consent
required).
- Supports video streaming with adaptive bitrate (using HLS) for best UX
and performance.
- Fallback to mp4 video when streaming is not available.
- Fallback to video download link when HTML video element is not
supported.
- Supports subtitle tracks for enhanced accessibility, automatically
selecting default locale when available.
- Supports figcaption defaulting to external video's title and optional
custom title override.
- Supports autoplay, mute and loop.
- Autoplay is only triggered if no reduced motion is preferred (for
a11y) and save data mode is off.
- Conditionally loads video and streaming package (`hls.js`) on click or
when in view in case autoplay is enabled.

Moved [custom image and custom play button overlay to separate
ticket](#121).

# Associated issue

Resolves #33 

# How to test

1. Open
[`/en/overview-page/demos/video-block/`](https://feat-video-block.head-start.pages.dev/en/overview-page/demos/video-block/)
2. Test with different uploaded videos in CMS, with and without
subtitles
3. Verify streaming, mp4 and fallback work (by disabling one at a time
locally)
4. Verify autoplay and other block options work as expected

# Checklist

- [x] I have performed a self-review of my own code
- [x] I have made sure that my PR is easy to review (not too big,
includes comments)
- [x] I have made updated relevant documentation files (in project
README, docs/, etc)
- ~~I have added a decision log entry if the change affects the
architecture or changes a significant technology~~
- [x] I have notified a reviewer

<!-- Please strike through and check off all items that do not apply
(rather than removing them) -->
@jbmoelker jbmoelker added enhancement New feature or request good first issue Good for newcomers labels Feb 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jbmoelker