HTML5 video not working on MAUI WebView

Description

If I want to add video in my MAUI Blazor App I have a problem with rendering this video on iOS. On Android works well. I think the problem is in BlazorWebView component.

UPDATE This applies to all MAUI webviews, so is not Blazor-specific.

Steps to Reproduce

Create a new blank .NET MAUI Blazor App
Add some sample video mp4 file into the wwwroot/videos folder
Replace content of Index.razor page with content below:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<video autoplay muted loop playsinline class="slideContent">
    <source src="videos/TRIMOTERM.mp4" type="video/mp4">
</video>

Run app on Android. All good.
Run app on iPhone 12 (iOS 15.2) and nothing is shown where video could be.

Version with bug

Preview 13 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iPhone 12 iOS 15.2, Xcode 13.2.1, VS 17.2.0 Preview 1.0

Did you find any workaround?

Relevant log output

Nothing

Issue Analytics

State:
Created 2 years ago
Comments:28 (10 by maintainers)

Top GitHub Comments

3reactions

Redthcommented, Nov 2, 2022

In the meantime, if you’re looking to make this work today, in .NET 7, you can customize the platform view factory or WebViewHandler like this:

#if IOS || MACCATALYST
Microsoft.Maui.Handlers.WebViewHandler.PlatformViewFactory = (handler) =>
{
	var config = Microsoft.Maui.Platform.MauiWKWebView.CreateConfiguration();
	config.AllowsAirPlayForMediaPlayback = true;
	config.AllowsInlineMediaPlayback = true;
	config.AllowsPictureInPictureMediaPlayback = true;
	config.MediaTypesRequiringUserActionForPlayback = WebKit.WKAudiovisualMediaTypes.None;
	
	var wv = new Microsoft.Maui.Platform.MauiWKWebView(
		CoreGraphics.CGRect.Empty,
		handler as Microsoft.Maui.Handlers.WebViewHandler,
		config);

	return wv;
};
#endif

3reactions

jfversluiscommented, Feb 21, 2022

Thank you for that! Had a quick look and here is the weird thing… If I add the controls attribute to the video to show the controls and actually click the play button it works just fine. So it seems like there is something preventing it from playing automatically. Not sure if this is a bug on our side then though.