Flutter: загрузка IFrame из WebView

Я ищу способ загрузить iFrame из Flutter WebView ( webview_flutter: ^ 0.1.2) и не смог найти никакой соответствующей информации.

                 Container(
                    child: WebView(
                      initialUrl: 'https://www.youtube.com/embed/abc',
                      javaScriptMode: JavaScriptMode.unrestricted,
                    )),

Любая идея, как передать IFrame в Webview, будет ли это частью initialUrl? Я пробовал то же самое, но он не загружался должным образом.

android webview flutter

31.01.2019 17:17

Коллекции (ArrayList , HashSet , HashMap)

25 012

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это может делать то, что вы хотите

 Container(
    child: WebView(
      initialUrl: Uri.dataFromString('<html><body><iframe src = "https://www.youtube.com/embed/abc"></iframe></body></html>', mimeType: 'text/html').toString(),
      javascriptMode: JavascriptMode.unrestricted,
    )),

Это передает URL-адрес данных, содержащий HTML-страницу с iframe.

Извините, я не знаю, и в ближайшие дни у вас не будет времени для более подробного изучения.

— 01.02.2019 10:20

Это то, что я называю геймерским ходом

— 23.05.2020 14:26

вы, ребята, поняли это? какой формат ссылки вы используете? Я попытался поменять местами embeded/ на watch?v?=, но появляется большая полоса YouTube. а при встроенной полноэкранной кнопке ТАКЖЕ не отображаются настройки качества и скорости. не показывает рекламу, почему?

— 02.07.2020 16:59

Этот подход имеет некоторые ограничения. Я не помню подробностей. Может быть связано с CORS. Вероятно, лучше использовать другой подход, например реализовать простой прокси-сервер в Dart внутри вашего приложения Flutter, где вы обслуживаете порт и перенаправляете все запросы и передаете http://localhost:1234 в веб-просмотр, где 1234 — это порт, который вы обслуживаете. У меня нет под рукой соответствующего кода.

— 02.07.2020 17:06

Я ничего не понял из того, что вы сказали, извините, ха-ха, что вы имеете в виду под портами? все, что я хочу, это отображать видео на YouTube. как это делает приложение ютуб

— 02.07.2020 17:07

31.01.2019 23:52

Основываясь на приведенном выше @Günter, у меня были небольшие корректировки, потому что я не мог заставить его работать на ios. Это основано на официальной странице webview_flutter pub.dev.

String html = """<!DOCTYPE html>
          <html>
            <head>
            <style>
            body {
              overflow: hidden; 
            }
        .embed-youtube {
            position: relative;
            padding-bottom: 56.25%; 
            padding-top: 0px;
            height: 0;
            overflow: hidden;
        }

        .embed-youtube iframe,
        .embed-youtube object,
        .embed-youtube embed {
            border: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        </style>

        <meta charset = "UTF-8">
         <meta name = "viewport" content = "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
          <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
           </head>
          <body bgcolor = "#121212">                                    
        <div class = "embed-youtube">
         <iframe
          id = "vjs_video_3_Youtube_api"
          style = "width:100%;height:100%;top:0;left:0;position:absolute;"
          class = "vjs-tech holds-the-iframe"
          frameborder = "0"
          allowfullscreen = "1"
          allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          webkitallowfullscreen mozallowfullscreen allowfullscreen
          title = "Live Tv"
          frameborder = "0"
          src = "$iframeUrl"
          ></iframe></div>
          </body>                                    
        </html>
  """;
final Completer<WebViewController> _controller =
    Completer<WebViewController>();
final String contentBase64 =
    base64Encode(const Utf8Encoder().convert(html));
return WebView(
  initialUrl: 'data:text/html;base64,$contentBase64',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController webViewController) {
    _controller.complete(webViewController);
  },
  onPageStarted: (String url) {
    print('Page started loading: $url');
  },
  onPageFinished: (String url) {
    print('Page finished loading: $url');
  },
  gestureNavigationEnabled: true,
);

Затем я использовал ответ @Lorenzo Pichilli, чтобы сделать это на Android. Я работал немного быстрее для меня. Надеюсь, это кому-нибудь поможет. Занял у меня целый день.

Это позволило мне воспроизводить видео с YouTube и Vimeo на Android и iOS. Работает пока нормально

Обновлено:

Чтобы добавить загрузчик до завершения загрузки веб-просмотра, ознакомьтесь с этим вопрос о том, как добавить круговой индикатор выполнения.

27.04.2020 10:57