💡 [REQUEST] - Video based story

[Gauravdarkslayer]

Start Date

No response

Implementation PR

No response

Reference Issues

No response

Summary

Proposed Features:

Video Story Playback:

The ability to play videos seamlessly within the story carousel.
Automatic transition to the next story once the video has finished playing.
Playback controls like pause, play, and skip to the next story.

Story Progress Bar:

An interactive progress bar that reflects video duration, much like in the current image-based stories. It would update dynamically as the video progresses.

Video Formats:

Support for common video formats such as MP4, WebM, and Ogg.
Ability to handle both portrait and landscape videos with proper aspect ratio handling and cropping options.

Autoplay & Looping:

Autoplay videos when the story is active and in view.
Optional looping for short video clips.

Preloading:

To ensure smooth playback, videos can be preloaded in the background while the user is viewing previous stories.
Mute/Unmute Option:

Toggle to mute/unmute video audio by default, with optional sound controls in the UI.

Swipe & Keyboard Navigation:

Videos can be skipped or navigated through gestures (swipe left/right on touch devices) or keyboard arrow keys for desktop users.

Benefits:

Improved Engagement: Videos are proven to attract more attention and can convey more information in less time than static images.
Versatility: This feature can be used for tutorials, quick tips, product demos, or any form of interactive storytelling.
Compatibility: By supporting a variety of video formats and aspect ratios, ngx-stories would cater to a wider range of content creators.

Challenges to Address:

Performance Considerations: Handling large video files may affect performance, especially on slower networks or devices. Ensuring efficient video preloading and caching is essential.
User Controls: Need to balance between keeping the UI simple while offering essential controls like volume, playback speed, and fullscreen options.

Basic Example

No response

Drawbacks

No response

Unresolved questions

No response

[github-actions]

Hey @Gauravdarkslayer, Thanks for contributing and Congrats on opening Issue 🎉

We will try to review as soon as possible and a maintainer will get back to you soon!

[Sauhard74]

hey i would love to work on this as well as other issues can you assign them to me ?

[Gauravdarkslayer]

@Sauhard74 , Let's go step by step.
I've assigned one issue to you, so let me know once you finish that one, so that we can move forward.
Btw thanks for this great enthusiasm.