help

[DevNHQ]

not supported playvideo in IOS
ex : <iframe src="https://embed.vietnamnettv.vn/v/208042.html" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>

[erickok]

If you use an <iframe>, flutter_html uses a WebView to display the inner html. If you were to load this html content yourself in a WebView, does the video play?

[tneotia]

You may need to disable Apple ATS for it to work? I tried on my Simulator and I get an infinite loader, so it seems some network issue is preventing it from loading. It does work on Android and on the website itself.

[erickok]

I tested this and it is because we do set the initialMediaPlaybackPolicy which means it is the default AutoMediaPlaybackPolicy.require_user_action_for_all_media_types. If I change this explicitly to initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow it works. We don't want that to be the default in flutter_html though, I think. For people and do want this option, one should be able to set this. For now (until we have a better solution for modularization) you may use a custom tag render for iframes. Something like this:

          customRender: {
            "iframe": (RenderContext context, Widget child, attributes, _) {
              final width = MediaQuery.of(context.buildContext).size.width;
              final height = (width * 9) / 16;
              return SizedBox(
                width: width,
                height: height,
                child: WebView(
                  initialUrl: attributes["src"],
                  javascriptMode: JavascriptMode.unrestricted,
                    initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
                  // gestureRecognizers: {
                  //   Factory(() => PlatformViewVerticalGestureRecognizer())
                  // },
                ),
              );
            },
          }

Which will give you something like this:

[DevNHQ]

@erickok thank you, This problem only happened on IOS, I handled it using Inappwebview in customRender .

        // ignore: missing_return
        "iframe": (context, child, attr, element) {
          return AspectRatio(
            aspectRatio: 16 / 9,
            child: InAppWebView(
              initialUrl: attr["src"],
              androidOnPermissionRequest: (InAppWebViewController controller,
                  String origin, List<String> resources) async {
                return PermissionRequestResponse(
                    resources: resources,
                    action: PermissionRequestResponseAction.GRANT);
              },
              initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(
                    debuggingEnabled: true,
                    preferredContentMode: UserPreferredContentMode.RECOMMENDED,
                    disableHorizontalScroll: false,
                    mediaPlaybackRequiresUserGesture: false,
                    horizontalScrollBarEnabled: false,
                    verticalScrollBarEnabled: false,
                    cacheEnabled: true,
                    clearCache: true,
                    javaScriptCanOpenWindowsAutomatically: true,
                    useOnLoadResource: true,
                    javaScriptEnabled: true,
                    disableVerticalScroll: true,
                  ),
                  android: AndroidInAppWebViewOptions(
                    disableDefaultErrorPage: true,
                    hardwareAcceleration: true,
                  ),
                  ios: IOSInAppWebViewOptions(
                      allowsInlineMediaPlayback: true,
                      allowsPictureInPictureMediaPlayback: true,
                      enableViewportScale: true,
                      allowsBackForwardNavigationGestures: true,
                      scrollsToTop: false,
                      disallowOverScroll: true
                  )
              ),
              onWebViewCreated: (InAppWebViewController controller) {
                webView = controller;
              },
              onLoadStop: (InAppWebViewController controller, String url){
              },
            ),
          );
        },
      },```