Adaptive HLS Streaming - Flutter video_player

Question

I am developing a new native App. I have chosen Flutter for it (over React Native). In this app, there will be a section for video streaming. These videos will have HLS streaming.

I am using video_player package in Flutter for it. I am able to play the video successfully but there is no option to change the quality (1080p, 720p etc.). How can I implement video quality selection in video_player package? Also, does video_player have adaptive bitrate streaming for HLS?

Answer 1

For those that might come here looking for a solution. It is a pretty trivial solution using the default video_player or even yoyo player. In front of the url, just add the file format type that you desire. For example for HLS just add ".m3u8" and for dash add ".mpd" and the video will work and still be adaptive.

So your full url should be something like this:

For HLS https://itvnnowoptimised-sano1.streaming.media.azure.net/3c0ecaef-002f-461f-854a-2397449d351f/thestoryofjoseph.ism/manifest(format=m3u8-aapl).m3u8

For dash https://itvnnowoptimised-sano1.streaming.media.azure.net/3c0ecaef-002f-461f-854a-2397449d351f/thestoryofjoseph.ism/manifest(format=mpd-time-cmaf).mpd

This was using azure Media Services.

Answer 2

There's a package which you can use to change the quality from 1080p to 720p, here's the package's link: yoyo_player

Answer 3

You can use stack widget adding there video player and button. After pressing button you change url of video from 1080 p to 720 p.