enhancement: use Vidstack instead of video.js

[mazz]

Vidstack is an up-and-coming JS-based web video player that has recently hit 1.0-RC and already far-outshines video.js as a web player.

https://www.vidstack.io/

[zcesur]

Does it support LL-HLS? I'm down to give it a try once #60 lands

[mazz]

Does it support LL-HLS? I'm down to give it a try once #60 lands

Yes, apparently it does.

https://www.vidstack.io/docs/player/core-concepts/loading#stream-type

it looks like you do

<MediaPlayer streamType="ll-live">

or

<MediaPlayer streamType="ll-live:dvr">

if you want dvr-like features like back-seeking.

[zcesur]

Adding a /bounty $100 if anyone wants to tackle this. To make sure the new player behaves like the current, we need to:

• Use the appropriate provider based on video type (YouTube, HLS, MP4)
• Autoplay all videos with sound on (except the ones with an analytics- prefix). Most browsers won't allow autoplay with sound so we should fallback to muted autoplay. More info here
• Enable seeking for all video types including livestreams
• Enable picture-in-picture (PiP) mode and fullscreen on rotation
• Start videos at the specified timestamp if provided (via ?t=123 query param)

Relevant files:

• assets/vendor/video.js: replace with a minimized Vidstack JavaScript build w/o framework
• assets/js/app.ts: rewrite VideoPlayer hook to use the new player
• lib/algora_web/live/player_component.ex: see params passed to the player

[algora-pbc[bot]]

~~## 💎 $100 bounty • Algora~~

~~### Steps to solve:~~ ~~1. Start working: Comment /attempt #45 with your implementation plan~~ ~~2. Submit work: Create a pull request including /claim #45 in the PR body to claim the bounty~~ ~~3. Receive payment: 100% of the bounty is received 2-5 days post-reward. Make sure you are eligible for payouts~~

~~### ❗ Important guidelines:~~ ~~- To claim a bounty, you need to provide a short demo video of your changes in your pull request~~ ~~- If anything is unclear, ask for clarification before starting as this will help avoid potential rework~~ ~~- For assistance or questions, join our Discord~~

~~Thank you for contributing to algora-io/tv!~~

~~Add a bounty • Share on socials~~

Attempt	Started (GMT+0)	Solution
🟢 @kaf-lamed-beyt	Sep 2, 2024, 4:51:35 AM	#84

[kaf-lamed-beyt]

hi @zcesur, I'd love to try this. Please assign me.

/attempt #45

Algora profile	Completed bounties	Tech	Active attempts	Options
@kaf-lamed-beyt	7 bounties from 3 projects	JavaScript, HTML, TypeScript & more		Cancel attempt

[kaf-lamed-beyt]

BTW @zcesur, any idea how i can see the changes I'm making to the player?

I followed the guide here. I've been able to do that successfully. Can I get any info on how to see the player in the browser?

[zcesur]

Hi @kaf-lamed-beyt, thanks for attempting and consider yourself assigned! (I'm away from my laptop rn)

To test the player, you can create a video by streaming into your local server via OBS. You can find your RTMP URL in your user settings

On Mon, Sep 2, 2024, 10:40 null (for now) @.***> wrote:

BTW @zcesur https://github.com/zcesur, any idea how i can see the changes I'm making to the player?

I followed the guide here https://github.com/algora-io/tv?tab=readme-ov-file#setting-up-the-project. I've been able to do that successfully. Can I get any info on how to see the player in the browser?

— Reply to this email directly, view it on GitHub https://github.com/algora-io/tv/issues/45#issuecomment-2324030576, or unsubscribe https://github.com/notifications/unsubscribe-auth/AECBOW4YMLDH3I3NO7YROXDZUQI5HAVCNFSM6AAAAABITTKQZCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMRUGAZTANJXGY . You are receiving this because you were mentioned.Message ID: @.***>

[kaf-lamed-beyt]

Ayy! Thank you, @zcesur!

I've installed OBS on my PC. But, I have no idea why it keeps failing to start up. Lemme make some findings and get back to this.

[EDIT]: I've fixed it now. I was missing a wayland plugin.

[zcesur]

Awesome, let me know if I can help with anything else!

[kaf-lamed-beyt]

Yes. If you're free now... can i DM you on discord?

[zcesur]

I'm heading out soon but I'll reply once I can, feel free to DM any time

[kaf-lamed-beyt]

Okay... sounds good!

I've somewhat been able to setup a RTMP server with nginx. I'm trying to see if it is possible to stream to my VLC player.

[algora-pbc[bot]]

💡 @kaf-lamed-beyt submitted a pull request that claims the bounty. You can visit your bounty board to reward.

[algora-pbc[bot]]

🎉🎈 @kaf-lamed-beyt has been awarded $100! 🎈🎊

• Share on socials
• Give feedback