[BUG] MediaElement does not support all formats

[TimLandskron]

Is there an existing issue for this?

• I have searched the existing issues

Did you read the "Reporting a bug" section on Contributing file?

• I have read the "Reporting a bug" section on Contributing file: https://github.com/CommunityToolkit/Maui/blob/main/CONTRIBUTING.md#reporting-a-bug

Current Behavior

On iOS devices it seems that not all video formats are supported by the MediaElement. On Xamarin.Forms these worked (and when I understood it right, the AVPlayer was also used in Xamarin.Forms).
In our concrete case, we are working with the .m3u8 format.

When running the reproduction repository and trying to playback the following video stream, we get the sound, but no video(pictures) is shown.
https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8

Expected Behavior

The video (pictures) should also be shown, not only the sound. In addition, the playback controls should be visible.

Steps To Reproduce

1. Open the solution from the public reproduction repository
2. Build & Run the app on an iOS simulator
3. Turn your volume on and hear the sound

Link to public reproduction project repository

https://github.com/TimLandskron/MediaElementVideoStreamFormatIssue

Environment

- .NET MAUI CommunityToolkit: current main branch
- OS: Mac OS X 13.4.0
- .NET MAUI: 7.0.86

Anything else?

No response

[ne0rrmatrix]

I looked at the m3u8 file and it links to local files.

#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=10285391,CODECS="avc1.4d4033,mp4a.40.2",AUDIO="surround",RESOLUTION=4096x1744,SUBTITLES="subs"
video/10000kbit.m3u8 

I have from experience found that media element will play the first item in a m3u8 playlist unless you manually select one by parsing the file. The m3u8 file also links to another m3u8 file locally that will not load unless you have the file in a subdirectory called video. So without knowing any more details it is very hard to understand what the issue is. It could be an unsupported format, or it could be implementation of your parser?

I have an app that uses media element and it parses a m3u8 file for a livestream with multiple sub streams. So I know in general media element can load m3u8 files. I load the m3u8 file and I parse it down to additional m3u8 file that the media player can play in windows, android, and ios. I have not tested in mac.

Also the link to public repo should be to a sample repo of bug not the community toolkit repo.

[TimLandskron]

I'm not familiar with any media formats. I just know, that when I'm using the mentioned m3u8 file in a Xamarin.Forms App, then it gets loaded and shown correctly. Also, this only affects iOS.

And why should I set up a new public repository when there's one already that the contributors have cloned already?

[ghost]

Hi @TimLandskron. We have added the "needs reproduction" label to this issue, which indicates that we cannot take further action. This issue will be closed automatically in 5 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[bijington]

And why should I set up a new public repository when there's one already that the contributors have cloned already?

The purpose of the public project is to provide a sample that reproduces the issue to make it easier to prove and solve the issue.

[TimLandskron]

Public reproduction repository added
https://github.com/TimLandskron/MediaElementVideoStreamFormatIssue

[TheCodeTraveler]

Thanks Tim! The reproduction sample not only helps us reproduce the issue, but it also helps us confirm that we have indeed fixed the bug reported

[ne0rrmatrix]

I don't know what is happening here. I have been using media element for months. I just downloaded and tested the project. Media element was behaving weirdly. I went and made my own project and it had same exact issues with multiple different videos that I have used for testing. It behaves with the same issues. I have spent the last 2 hours looking over this.

The issue I am having is the video controls do not work atm and I have no clue why. This is a IOS only issue as far as I can tell. I reused my custom controls to test if it was just the controls not being visible and that appears to be an issue. I can click on middle of screen and that pauses and un-pauses video. After adding custom transport controls I was able to verify everything works. But after remaking multiple different version using the last 3 major builds of each media element, and adding community toolkit versions, multiple versions, every single build shows same issue. No video controls in IOS. I have no clue why.

I will spend some time and find out where and when it broke. I honestly am very baffled at this issue.

[bijington]

Have there been any recent updates to iOS that may have affected this?

[ne0rrmatrix]

Yes XCode was updated to 14.3.1 on 1st of June 2023

[bijington]

Yes XCode was updated to 14.3.1 on 1st of June 2023

If you revert that back do you see the old expected behaviour?

[ne0rrmatrix]

Yes XCode was updated to 14.3.1 on 1st of June 2023

If you revert that back do you see the old expected behaviour?

I have spent a couple hours trying to figure out how to target IOS version and rollback either dotnet or xcode with zero success. I have tried many different ways of doing either. Zero luck. I have given up trying to target old version of dotnet, maui, and xcode. I have failed to target any of them. As for the bug I am not sure exactly what the issue is but I am pretty sure it is in xcode as there are previous bug reports of similar issues with xamarin from Nov 2022.
xamarin/XamarinCommunityToolkit#1927

[bijington]

If you want an easy way to manage the Xcode version you have installed I thoroughly recommend the Xcodes app: https://www.xcodes.app/

[ne0rrmatrix]

If you want an easy way to manage the Xcode version you have installed I thoroughly recommend the Xcodes app: https://www.xcodes.app/

I am unable to use that. I am on windows and do not own a mac. I was building using visual studio 2022 and testing on an Ipad. I was trying to help out the OP with some trouble shooting and when I discovered this thread I went and made a bunch of different samples to try and test. I will be trying out some of the work arounds from previous threads on same issue and seeing if they work. TY for the suggestion though.

For the app I have currently I am using custom controls so this problem does not apply to me. I was just honestly a little suprised this issue popped up again and I am going to spend some time investing further.

[jfversluis]

@TimLandskron I've been looking into this just now and I think this is some special case and not much to worry about. Just to verify, what did you test this on? Which iOS version? Simulator or physical device?

Here's my findings. Running this on the iOS 16 Simulator (specifically iPhone 14 Pro, but I don't think that matters), it doesn't show me anything in the MediaElement. However, it also doesn't show me anything when I navigate to that same URL in the Safari browser (still on the Simulator).

When I go to the URL on the browser on my physical device it does show me an image. I've tested this on an iPhone 12 Mini and 13 Mini, both just work when the URL is opened in a browser.

Then I ran the MediaElement sample app on a iPhone 13 Simulator with iOS 15.5 and there it does show an image. So I think this is just some quirk from Apple with the iOS 16 Simulator.

Would you be able to test this on some different configurations? Maybe even confirm that the Xamarin MediaElement also probably doesn't work on iOS 16 Simulator with this same URL?

I see you also mention the playback controls, that is a separate bug which I have on my radar, so let's focus this one on the not showing image.

[TimLandskron]

In my repro repo, both simulators iOS and Android are not showing any images. Running on a real iPhone does show images tho. Can't run it on an android device because I don't have any.

[jfversluis]

I didn't try Android as you mentioned iOS specifically in your initial post? Has that changed? I can try Android as well on a physical device if needed. Also, what version of the iOS Simulator did you try? Did you also try different versions as the ones I mentioned?

For iOS I'm 99% sure nothing should be different between this implementation and the Xamarin.Forms one so it would be very curious if there is a difference in what formats are supported. For Android I'm a little less sure because the whole implementation is completely different from what was available for Xamarin.Forms. However, what is still true for both of these platforms: they should play whatever is supported by the Android or iOS version they are running on. These are merely players that use all that is available on the operating system. We have never done anything with own video codecs or such.

[BeepBeepBopBop]

I am also experiencing issue with m3u8. Providing an URI to a m3u8 file to "MediaSource.FromUri" method systematically fails to open the video, both with Android and UWP.

[ne0rrmatrix]

The Sample app has working HLS using m3u8 file from a url.

2024-06-17.19-24-22.mp4

@vhugogarcia MediaElement works with an HLS file with an M3U8 extension in our sample app.

[vhugogarcia]

thanks @ne0rrmatrix for sharing a video testing it. I also ran some tests and it worked OK on iOS and Android. I'm closing this issue, and in case the issue persist we can reopen it.