Fixed the problem that Flutter WebView video streams played properly on Android but not ios

Recently, I developed a Video streaming app with Flutter via WebView. At first, I tested flutter on an Android phone and found nothing wrong. However, when I ran flutter on ios, I found that the video only had sound but no images.

Need to add code to info.plist:

<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
   <key>NSAllowsArbitraryLoads</key>
   <true/>
   <key>NSAllowsArbitraryLoadsInWebContent</key>
   <true/>
</dict>
Copy the code

Then, when initializing the WebView, increment

allowsInlineMediaPlayback: true.Copy the code

But it still doesn’t solve the problem.

Finally, I found a lot of information and found a solution

We need to add one more parameter when we initialize the WebView

initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
Copy the code

The overall code is as follows:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class Browser extends StatelessWidget {
  const Browser({Key key, this.url, this.title}) : super(key: key);

  final String url;
  final String title;

  @override
  Widget build(BuildContext context) {
    returnScaffold( appBar: title ! =' '
          ? AppBar(
              title: Text(title),
            )
          : null,
      body: WebView(
          initialUrl: url,
          javascriptMode: JavascriptMode.unrestricted,
          allowsInlineMediaPlayback: true, initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow), ); }}Copy the code

At this point, ios WebView plays video streaming images and sound.