Hey,
So, I’m working with these HLS videos. And I’ve tried a few solutions (some of them were pretty complex and custom) but everything is leading to one common problem
The video glitches out in middle randomly. The BE team is using Cloudflare (CDN) and sending us URLs to play. At first this looked like a very simple task, but now its a pain…
Video Demo: Unique Download Link | WeTransfer
My appraoches so far:
Even I’m now concern that I might be blocked because of this issue chewie | Flutter package But I’m facing this on iOS and Android both.
Any help would really be appreciated, thanks.
chewie, AFAIK, is just a UI over video_player.
video_player is just a wrapper for native code.
If you check the video_player_android code, you’ll see that it has support for different types of network transports, including RTMP (which should be used to stream video - just stop trying to resolve the entire Universe using a text protocol such as HTTP) and there are 3 kinds of streamings in HTTP:
-
Microsoft’s SS (Smooth Streaming), created for Silverlight. It splits the video in small chunks (2 to 4 seconds). This is deprecated.
-
MPD (MPEG Dash or Dynamic Adaptive Streaming over HTTP): video is split into segments (usually MP4), client selects quality per segment. YouTube, Netflix, Android (ExoPlayer), Smart TVs and modern browser use that. Cache here is paramount.
-
m3U8 (Apple HLS - HTTP Live Streaming). Just a plain text file that points to media segments. Quality is switched by swapping playlists. Used on Apple stuff and compatible with smaprt tvs, browsers, android, etc.
Now, your server is giving the correct headers, segments, etc. for your video? Remember that web techs are very non strict (usually they fix things that should not be fixed, for example, a bad formatted HTML usually presents 0 problems).
Does video_player native packages (video_player_android, for instance) deal with web cache? It deals with streaming quality switches?
One thing I noticed recently: YouTube videos, when downloaded, are corrupt (it glitches and are unusable), but they work just fine on YouTube. Maybe they are slicing the video to make them corrupt so it works only on their platform (which are prepared to deal with that).
Just giving you some ideas so you can search where the problem is.
1 Like
Hey, thank you so much for this direction. The kind of HTTP streaming we are using is the option 3rd (m3u8).
So, would you suggest that I should build the native player to play these if a native android video player supports this?
Addtional context: I’ve tried playing the same URL on online HLS players too. Most of them 9/10 are behaving the same way (Glitches, stops or buffer for a long time) at exact same moments.
well then something is wrong with the stream itself, you should try to record it and analyze it, maybe you can do something to repair it, could be something trivial.
does it work with vlc?
video_player already uses a native player (and chewie uses video_player).
flutter_hls_video_player seems to use a web view to display the video (flutter_hls_video_player/lib/flutter_hls_video_player/view/hls_video_player_html.dart at main · dheeraj11qk/flutter_hls_video_player · GitHub). I would not use something that only opens a web browser >.<
And, if that is failing, probably ANYTHING is failing (i.e.: the last option uses a browser, so it is not flutter fault)
1 Like
Thank you, I’ll try to open the simple browser in-app so that user won’t leave the app and see how that works.
Actually I need to play the URLs, not any downloaded media. By VLC, I’m assuming you mean the stream is downloaded in some file? (Please correct me if i’m wrong)
This doesn’t smell like a problem with Flutter or Chewie at all. If it glitches in the middle of a stream on both iOS and Android, the HLS itself is probably broken or close to it.
Some common problems I’ve had with Cloudflare and HLS are:
bad EXT-X-TARGETDURATION or segment duration drift (segments don’t match what the playlist says)
missing or slow segment responses → player waits, then jumps
Cloudflare has a problem with its cache settings (range requests or short TTLs on .ts/.m4s)
Keyframes that aren’t lined up at segment boundaries (makes seeking impossible and causes random freezes)
The flutter video_player is just a wrapper around AVPlayer and ExoPlayer. If both of them choke, that’s your sign. Try playing the same HLS URL in Safari and VLC. If you see problems there, send it back to BE right away.
Also, see if they change URLs or tokens while the game is going on. HLS really doesn’t like segments that are about to end.
In short, fix the HLS stream, not Flutter. A package swap won’t fix a broken playlist.
1 Like
Thank you so much, feels way better to know my findings were correct. For context:
- I tried 4-5 online HLS players
- Tried a native iOS Swift app player
- Tried Flutter players
All of them caused the same glitching, stopping and playing again issues.
Thanks for the insights.