I have a video using LibVLC and want to force the video to fit a specific size on the screen.(This will stretch the video slightly).
I was looking at the question why i can't change my video size in xamarin forms ios libvlcsharp as it seems to be a similar/same issue. I don't have enough reputation to leave a comment, and didn't want to provide a question as an answer. Doing what was suggested there (adding the scale = 0 on the media player) doesn't seem to fix the issue.
I have a grid with 2 rows of *. I then add a videoview in the top row.
I then load the videoView and media player in the code behind. On android this works as expected. On iOS the videoview initially loads with black bars around it. Rotating the screen landscape/ portrait fixes the issue. It's like iOS is rendering the video first and then applying the aspect ratio, but not redrawing until the device orientation forces it to be.
I have tried changing the visibility of the element and adding/removing it from the grid in the code behind to try and "trick" iOS into rendering it correctly.
I have also tried doing inside of a Device.BeginInvokeOnMainThread as I thought that might be the issue. Running it on the ui thread but that didn't seem to make a difference either.
I am doing this inside a xamarin shell project in case that makes any difference with how items are rendered.
Any help would be appreciated.
Below is some sample code:
<Grid BackgroundColor="LightGray" x:Name="MainGrid">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<shared:VideoView x:Name="VideoView"
Grid.Row="0"
Grid.Column="0"
BackgroundColor="Black">
</shared:VideoView>
</Grid.RowDefinitions>
Code behind
protected async override void OnAppearing()
{
base.OnAppearing();
VideoView.MediaPlayerChanged += VideoView_MediaPlayerChanged;
Core.Initialize();
_libVLC = new LibVLC();
CreateVideoPlayer();
}
async void CreateVideoPlayer()
{
using (var media = new Media(_libVLC, new Uri(url)))
{
_mediaPlayer = new MediaPlayer(_libVLC)
{
Media = media,
EnableHardwareDecoding = true,
};
}
VideoView.MediaPlayer = _mediaPlayer;
//fix aspect ratio so if the stream is a weird resolution it will fill the space with the grid.
VideoView.MediaPlayer.AspectRatio = $"{Height}:{Width}";//"1920:1080";//Aspect.Fill.ToString();
VideoView.MediaPlayer.Scale = 0
VideoView.MediaPlayer.EncounteredError += MediaPlayer_EncounteredError;
VideoView.MediaPlayer.Stopped += MediaPlayer_Stopped;
VideoView.MediaPlayer.Buffering += MediaPlayer_Buffering;
VideoView.MediaPlayer.Opening += MediaPlayer_Opening;
VideoView.MediaPlayer.PositionChanged += MediaPlayer_PositionChanged;
VideoView.MediaPlayer.Playing += MediaPlayer_Playing;
}
I have made a very simple sample based on the MediaElement sample in the libvlc-sharp-sample example.
I am using the MediaPlayerElement with the IsAspectRatioButtonVisible="true".
This works as expected on android. But has the same issue on ios. Clicking the button initally displays text to say "4:3" etc but the screen itself doesn't change. Rotating the ios device then causes the button to behave as expected.
This seems to be an issue with both a "blank" xamarin project and within the shell.
I am using a real iphone se (not a simulator) on software version 15.6.
This also happens with an ios emulator running iphone 13 pro 15.5.
I have created a simple github app here: https://github.com/developerfiveneosoftware/VideoAspectRatioTest