How to get video quality options for locally stored m3u8 files

[shaShvat07]

Hello everyone,

I'm new to using Vidstack and currently working on integrating HLS-based video streaming into a React app. I've generated m3u8 files for different resolutions locally and aim to implement manual video quality control. However, I'm unsure how to integrate the necessary hooks effectively due to lack of detailed examples. Any guidance would be greatly appreciated!

[mihar-22]

There's heaps of examples using hooks and styling:

• The useVideoQualityOptions hook API page shows how to use it and how to build a unstyled menu.

• The Menu component docs has different styled menus for various submenus including quality. You can select a different styling option (Default Theme, CSS, Tailwind) in the left sidebar at the top.

• Examples repo contains many frameworks and styling options. Check out how to build and style menus, it will apply across all types of menus you want to build whether it's captions, quality, audio, etc.

[shaShvat07]

Thanks for your assistance! Just wanted to let you know that I found the solution to my problem. Initially, I thought I had to create a map of resolutions with corresponding source files and adjust the source addresses manually. However, all I needed to do was create a master.m3u8 file. In this master playlist, I listed the different quality files, and VidStack automatically detected and handled them. This saved me a lot of time, as I initially thought I'd have to handle the process manually. Thanks again for your help!.