Unable to support multi resolution HLS playback?

[upmin-l]

Hello!

I encountered a problem and tried to play an M3u8 file that supports multiple resolutions, but unfortunately it would report a source error.

M3u8 file format:

#EXTM3U #EXT-X-VERSION:3 #EXT-X-STREAM-INF:BANDWIDTH=2800000,RESOLUTION=720x1280 720x1280/video.m3u8 #EXT-X-STREAM-INF:BANDWIDTH=5000000,RESOLUTION=1080x1920 1080x1920/video.m3u8

The above information appears to have two folders, 720x1280 and 1080x1920, respectively.

I use video_player to play, which automatically selects the appropriate video stream based on this information for playback and successfully displays the playback.

[OutdatedGuy]

Hi, are you trying to play this video from network or from somewhere else (assets, file, etc.).

Can you provide some sample/reproducible code?

[JonasJW]

@OutdatedGuy Having the same error.

Initially the video plays just fine (when it plays from network) but when showing the video a second time (accessing cached video), the following error occurs:

E/ExoPlayerImplInternal(12471): Playback error
E/ExoPlayerImplInternal(12471):   androidx.media3.exoplayer.ExoPlaybackException: Source error
E/ExoPlayerImplInternal(12471):       at androidx.media3.exoplayer.ExoPlayerImplInternal.handleIoException(ExoPlayerImplInternal.java:717)
E/ExoPlayerImplInternal(12471):       at androidx.media3.exoplayer.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:687)
E/ExoPlayerImplInternal(12471):       at android.os.Handler.dispatchMessage(Handler.java:102)
E/ExoPlayerImplInternal(12471):       at android.os.Looper.loopOnce(Looper.java:226)
E/ExoPlayerImplInternal(12471):       at android.os.Looper.loop(Looper.java:313)
E/ExoPlayerImplInternal(12471):       at android.os.HandlerThread.run(HandlerThread.java:67)
E/ExoPlayerImplInternal(12471):   Caused by: androidx.media3.exoplayer.source.UnrecognizedInputFormatException: None of the available extractors (FlvExtractor, FlacExtractor, WavExtractor, FragmentedMp4Extractor, Mp4Extractor, AmrExtractor, PsExtractor, OggExtractor, TsExtractor, MatroskaExtractor, AdtsExtractor, Ac3Extractor, Ac4Extractor, Mp3Extractor, AviExtractor, JpegExtractor, PngExtractor, WebpExtractor, BmpExtractor, HeifExtractor) could read the stream.{contentIsMalformed=false, dataType=1}
E/ExoPlayerImplInternal(12471):       at androidx.media3.exoplayer.source.BundledExtractorsAdapter.init(BundledExtractorsAdapter.java:94)
E/ExoPlayerImplInternal(12471):       at androidx.media3.exoplayer.source.ProgressiveMediaPeriod$ExtractingLoadable.load(ProgressiveMediaPeriod.java:1044)
E/ExoPlayerImplInternal(12471):       at androidx.media3.exoplayer.upstream.Loader$LoadTask.run(Loader.java:421)
E/ExoPlayerImplInternal(12471):       at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
E/ExoPlayerImplInternal(12471):       at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:644)
E/ExoPlayerImplInternal(12471):       at java.lang.Thread.run(Thread.java:1012)

Here is my VideoPlayer code

class CachedVideoItem extends StatefulWidget {
  final String? previewUrl;
  final double? aspectRatio;

  final String? assetUrl;
  final double? playbackSpeed;


  const CachedVideoItem({
    Key? key,
    required this.previewUrl,
    this.aspectRatio,
    this.assetUrl,
  }) : super(key: key);

  @override
  State<CachedVideoItem> createState() => _CachedVideoItem();
}

class _CachedVideoItem extends State<CachedVideoItem> {
  late CachedVideoPlayerPlusController _controller;

  dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  void didUpdateWidget(covariant CachedVideoItem oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.previewUrl != widget.previewUrl) {
      _controller.dispose().then((value) {
        initPlayer();
      });
    }
  }

  initPlayer() {
    if (widget.assetUrl != null) {
      _controller = CachedVideoPlayerPlusController.asset(
        widget.assetUrl!,
        videoPlayerOptions: VideoPlayerOptions(
          mixWithOthers: DevSettings().mixWithOthers,
          allowBackgroundPlayback: DevSettings().allowBackgroundPlayback,
        ),
      )..initialize().then((_) {
          _controller.setLooping(true);
          _controller.setVolume(0);
          _controller.play();

          setState(() {});
        });
    } else {

      if (widget.previewUrl == null) {
        throw Exception("No previewUrl provided");
      }

      _controller = CachedVideoPlayerPlusController.networkUrl(
        Uri.parse(widget.previewUrl!),
        videoPlayerOptions: VideoPlayerOptions(
          mixWithOthers: true,
          allowBackgroundPlayback: false,
        ),
      )..initialize().then((_) {

          _controller.setLooping(true);
          _controller.play();
          _controller.setVolume(0);
          // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
          setState(() {});
        });
    }
  }

  @override
  void initState() {
    print("VIDEO INIT ${widget.previewUrl}");
    super.initState();
    initPlayer();
  }

  @override
  Widget build(BuildContext context) {
    if (_controller.value.isInitialized) {
      return AspectRatio(
        aspectRatio: widget.aspectRatio ?? _controller.value.aspectRatio,
        child: CachedVideoPlayerPlus(_controller),
      );
    } else {
      return AspectRatio(
        aspectRatio: widget.aspectRatio ?? 16 / 9,
        child: Container(
          color: Colors.black,
          child: Center(
            child: CircularProgressIndicator(),
          ),
        ),
      );
    }
  }
}

[OutdatedGuy]

@JonasJW the problem seems to be that the video that is loaded initially is the only one cached (downloaded) and not the other resolutions (i.e. only the initial resolution is downloaded)

I don't really know how to fix the issues with HLS videos. Will mark this as Help wanted so if someone knows how to solve it, they can submit a PR.

[esuljich]

I got around this limitation by providing the link to a specific video. I used the HLS Parser package to get the master playlist, then got the video with the highest bitrate

final hlsRaw =
        await Dio().get(playlistUrl);

final HlsMasterPlaylist masterPlaylist = await HlsPlaylistParser.create().parseString(
        Uri.parse(playlistUrl), hlsRaw.data);

final variants = masterPlaylist.variants;

variants.sort((a, b) {
  final aBitrate = a.format.bitrate;
  final bBitrate = b.format.bitrate;

  if (aBitrate == null || bBitrate == null) return 0;

  return bBitrate.compareTo(aBitrate);
});

final url = variants.first;

Perhaps we could use something like this, before caching the video

[OutdatedGuy]

@esuljich thanks for the insight. I'll try to explore the implementation possibilities for it, however I'm busy with other work so cannot guarantee when.

As always PRs are welcomed.