[Bug] Video Displays on iOS, but not Android

[tpitman]

Description

I am embedding a mp4 video into my Xamarin Forms app. It plays fine on iOS, but not on Android. I am using the MediaElement and have the video in the iOS Resources folder and Android Resources/raw folder. I have set the permissions according to the documentation for the MediaElement shown on this page:

https://docs.microsoft.com/en-us/xamarin/community-toolkit/views/mediaelement

I also tried using the https link to see if that would work. That also works on iOS, but not on Android.

I get no errors or exceptions. It just ends up being the color of the Frame the MediaElement control is living in.

Basic Information

• IDE: Visual Studio 2019 for Mac
• Xamarin Community Toolkit: 1.2.0

XAML

...
xmlns:views="http://xamarin.com/schemas/2020/toolkit"
...
<views:MediaElement Source="https://sec.ch9.ms/ch9/5d93/a1eab4bf-3288-4faf-81c4-294402a85d93/XamarinShow_mid.mp4" ShowsPlaybackControls="True" AutoPlay="False" VerticalOptions="FillAndExpand"/>

[t4lm1d]

We've found that the control does not work in Android if in a StackLayout. If your MediaElement is in a StackLayout, try moving it to a Grid. If it is not in a StackLayout, you can ignore this comment.

[tpitman]

We've found that the control does not work in Android if in a StackLayout. If your MediaElement is in a StackLayout, try moving it to a Grid. If it is not in a StackLayout, you can ignore this comment.

Thank you for responding.

I was excited for a minute because my MediaElement was inside a Grid that was inside a StackLayout.

Then I was sad because I changed the StackLayout to a Grid and that didn't fix it. So then I decided to put the MediaElement inside the Top level Grid just to make sure there was nothing else in the way. I had it down several levels in several Grids and a Frame.

The I was happy when I remembered that this View is actually embedded inside a Page and when I looked there I saw that this View was wrapped in a StackLayout, so I changed that one to a Grid.

Then I was sad again because changing that to a Grid didn't work.

Then I decided to see what would happen if I put the MediaElement in the page directly in its own row of the main Grid on the main page.

Now I am sort of happy and sad. It works this way, but this means I don't know what element is causing the issue. There are no more StackLayouts around the MediaElement, but I am not sure I want to embed the tutorial video at the top level page. If you have any guidance about what else might prevent this so I can figure this out it would be helpful.

[tpitman]

So I have some more information. This also seems to be related to whether I have an IsVisible attribute on the element or its parent.

I can embed the MediaElement inside of a Grid container as long as it is showing all the time. What I mean by this is that my app doesn't need to show this video unless the user has drilled down into the help section and then clicked to show the tutorial video.

In order to figure out what exactly was going on I got to the point where my I have the MediaElement embedded on my main page. I then slowly backed it out back into my tutorial view that is referenced from the main page.

I finally discovered that the issue has to do with both StackLayout as a parent AND if I have an IsVisible attribute.

Since I can't have the tutorial page showing all the time, I need you to fix this. On the other hand is there maybe some method I can call on the MediaElement class after it becomes Visible that will refresh it or something like that?

[t4lm1d]

Ha! Sorry. I'm not with the team. I'm just some random guy who had your same issue on Android and fixed it by pulling out the StackLayout. So I thought I'd mention what fixed our issue.

I assume the core issue has something to do with the MediaElement not resizing correctly when everything is rendered. My bet is it's there but with a zero height and/or width?

[tpitman]

I suspect the same thing.

Thank you for sharing what fixed it for you because it put me on this path of finding a work around.

[t4lm1d]

No problem! I have not seen anyone else talk about this issue anywhere I looked so thought this is the best place to put the information in hopes that perhaps it's fixed before it's included in Maui.