[Bug] MediaElement Fails to play m3u8

[Neotrickster]

Description

MediaElement Fails to play m3u8 link live video type

Steps to Reproduce

1. Using sample application for Media Element
2. Use as example "http://icsbaldeastd.aldeasolutions.mx/EVLiveCan18ABR/7NBH6B8L/playlist.m3u8"
3. Run on Android/iOS

Expected Behavior

Play video

Actual Behavior

No play video

Basic Information

I already play the previous link in other media players like:

https://github.com/Xamarians/MediaPlayer (from 3 years ago, still works) https://github.com/Baseflow/XamarinMediaManager

• Version with issue: Xamarin forms 4.7.0.1142

• Last known good version: none

• IDE: visual Studio 2019 16.6.5

• Platform Target Frameworks:

  • iOS: 13.18.3.2
  • Android: 10.3.1.4
  • Android Support Library Version: 28.0.0.3

• Affected Devices: android/iOS

[brminnick]

In my app, GitTrends, I hit the same problem with MediaElement when trying to stream my tutorial video from Azure Media Services:

https://gittrendsmedia-usw22.streaming.media.azure.net/4e645800-af72-4469-8b0a-71ce209ca291/ChartVideo_White.ism/manifest(format=m3u8-aapl)

(You can confirm that this streaming url works by copy/pasting it into the Safari browser on macOS)

Custom Renders

Here are the custom renderers I created on iOS and Android for it to work.

They aren't feature-complete, but should help you get started with your Renderer implementation 👍

iOS Custom Renderer

• https://github.com/brminnick/GitTrends/blob/master/GitTrends.iOS/CustomRenderers/VideoPlayerViewCustomRenderer.cs

Android Custom Renderer

• Requires ExoPlayer NuGet Package)
• https://github.com/brminnick/GitTrends/blob/master/GitTrends.Android/CustomRenderers/VideoPlayerViewCustomRenderer.cs

[Neotrickster]

Thanks a lot Brandon, I will study your solution (I´m a rookie) and will try to make it work in my project. But still not sure why something like this is out of radar as a media element. Hopefully will see it soon.

[jessejiang0214]

Hi @Neotrickster , I try to play your URL and I found error when MediaElement starts to play, it because your URL is HTTP not HTTPS.

You need to enable HTTP in your .plist file to request the HTTP https://stackoverflow.com/questions/31254725/transport-security-has-blocked-a-cleartext-http The something for Android https://stackoverflow.com/questions/51902629/how-to-allow-all-network-connection-types-http-and-https-in-android-9-pie

[Neotrickster]

Hi @jessejiang0214 , I will make some test, but even https links, like the one from @brminnick have some troubles but not with in other media players like:

https://github.com/Xamarians/MediaPlayer (from 3 years ago, still works) https://github.com/Baseflow/XamarinMediaManager

However I still appreciate this bug still been looking at now on the Community Toolkit so they can fix it as a integrated solution for all the lost souls like me. :)

[JoacimWall]

If you add support for m3u8 it woul be nice if you can add support to add Headers to the native render functions.So the the player are able to use with azure media service with Authorization. Below is a sample.

Android in your protected virtual void UpdateSource(): Dictionary<string, string> RequestHeaders = new Dictionary<string, string>(); RequestHeaders.Add("Authorization", bearer); videoView.SetVideoURI(Android.Net.Uri.Parse(uri), RequestHeaders);

Ios in your protected virtual void UpdateSource(): NSMutableDictionary nativeHeaders = new NSMutableDictionary(); nativeHeaders.Add(new NSString("Authorization"), (NSString)bearer);

                var nativeHeadersKey = (NSString)"AVURLAssetHTTPHeaderFieldsKey";

                var options = new AVUrlAssetOptions(NSDictionary.FromObjectAndKey(
                    nativeHeaders,
                    nativeHeadersKey
                ));

                asset = new AVUrlAsset(new NSUrl(uri), options);

[eramrit78]

I have same issue. trying to pay m3u8 URL but it not work with media element. any plan to support m3u8 URL in media element?

Thanks