Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Webview Plugin: is there any loadDataWithBaseURL alternative? #34920

Closed
Praveena0989 opened this issue Jun 22, 2019 · 10 comments
Closed

Webview Plugin: is there any loadDataWithBaseURL alternative? #34920

Praveena0989 opened this issue Jun 22, 2019 · 10 comments
Labels
c: new feature Nothing broken; request for a new capability p: webview The WebView plugin P2 Important issues not at the top of the work list package flutter/packages repository. See also p: labels.

Comments

@Praveena0989
Copy link

In the android version of my app, I use loadDataWithBaseURL to load the local HTML file and I use it to play youtube videos using youtube JS SDK.
loadDataWithBaseURL("https://www.youtube.com", htmlPageString, "text/html", "utf-8", null)

In flutter, I am able to load the local HTML file but I am not able to play youtube video as Youtube throws video not available error and I used to get same error while using loadData api insead of loadDataWithBaseURL in android.
@Piinks
Copy link
Contributor

Piinks commented Jun 26, 2019

Hi @Praveena0989, Can you post a reproduction of the issue? We will need more information to help you resolve it.

@Piinks Piinks added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 26, 2019
@Praveena0989
Copy link
Author

This is my HTML file

<!DOCTYPE html>
<html>
<style type="text/css">
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
        overflow: hidden;
        position: fixed;
    }
</style>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://www.youtube.com/iframe_api"></script>
</head>

<body>
    <div id="youTubePlayerDOM"></div>
</body>

<script type="text/javascript">
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('youTubePlayerDOM', {
            height: '100%',
            width: '100%',
            videoId:"Q-GOFPM01d0",
            playerVars: {
                controls: 1,
                fs:0,
                autoplay:1,
                playsinline:1,
                modestbranding:1
            }
        });
    }
</script>

</html>

And I am using it in my code like this

void didChangeDependencies() {
    DefaultAssetBundle.of(context)
        .loadString('assets/youtube_player.html')
        .then((html) {
      setState(() {
        _html = html;
      });
    });
    super.didChangeDependencies();
  }

@override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SafeArea(
          child: AspectRatio(
            aspectRatio: 16.0 / 9.0,
            child: _html == null
                ? CupertinoActivityIndicator()
                : WebView(
                      initialUrl:
                          new Uri.dataFromString(_html, mimeType: 'text/html')
                              .toString(),
                      javascriptMode: JavascriptMode.unrestricted)))
}

But youtube video won't play but shows video unavailable it's because youtube doesn't allow playing from local HTML which can be solved in android using loadDataWithBaseURL("https://www.youtube.com", htmlPageString, "text/html", "utf-8", null) but I don't see any alternative for this in flutter.

@no-response no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Jun 28, 2019
@shamnex
Copy link

shamnex commented Sep 13, 2019

Did you ever find a solution to this?

@BondarenkoStas BondarenkoStas added p: webview The WebView plugin plugin labels Oct 3, 2019
@Hixie Hixie added this to the Goals milestone Jan 9, 2020
@Hixie Hixie added the c: new feature Nothing broken; request for a new capability label Jan 9, 2020
@kf6gpe kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020
@AhmedNourJamalElDin
Copy link

@Praveena0989 did you find a solution?

@AhmedNourJamalElDin
Copy link

AhmedNourJamalElDin commented Jun 12, 2020 •
edited
Loading

Any guidance to help in implementing this?
I'm not sure I can do it all on my own because I have 0 knowledge in Swift and IDK if loadDataWithBaseUrl is available for iOS.

so if someone can help, I may help in implementing this.

@Hixie @kf6gpe

@AhmedNourJamalElDin
Copy link

@Piinks any idea, please?

@uc-apa
Copy link

uc-apa commented Aug 7, 2020

I had opened pull request for this, in which the flutter webview has the support for baseUrl and localHtml support same as react native. I don't know why it is still not merged.

flutter/plugins#2830
by adding simply two new attributes, html string with baseUrl(optional) can be loaded.

html: "Sample",
baseUrl: "file://" + HOME_PATH + '/',

also if required the html inside webview can be replaced with other other using webviewController.

webViewController.loadHtml(html);

---This needs to be added in pubspec.yaml---
webview_flutter:
git:
url: https://github.com/uc-apa/plugins.git
path: packages/webview_flutter

@Hixie Hixie removed this from the None. milestone Aug 17, 2020
@uc-dve
Copy link

uc-dve commented Jun 10, 2021

I had opened pull request for this, in which the flutter webview has the support for baseUrl and localHtml support same as react native. I don't know why it is still not merged.

flutter/plugins#2830
by adding simply two new attributes, html string with baseUrl(optional) can be loaded.

html: "Sample",
baseUrl: "file://" + HOME_PATH + '/',

also if required the html inside webview can be replaced with other other using webviewController.

webViewController.loadHtml(html);

---This needs to be added in pubspec.yaml---
webview_flutter:
git:
url: https://github.com/uc-apa/plugins.git
path: packages/webview_flutter

Hey! please let us know when it will be merged?
and is there any way to provide assets path in baseUrl

@mvanbeusekom mvanbeusekom mentioned this issue Oct 22, 2021
Merged
11 tasks
@mvanbeusekom mvanbeusekom mentioned this issue Nov 8, 2021
Merged
11 tasks
This was referenced Nov 25, 2021
Merged
Merged
@stuartmorgan
Copy link
Contributor

Closing as resolved; the current API has loadHtmlString, which can take a base URL.

@github-actions
Copy link

github-actions bot commented Apr 1, 2023

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 1, 2023
@flutter-triage-bot flutter-triage-bot bot added the package flutter/packages repository. See also p: labels. label Jul 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
c: new feature Nothing broken; request for a new capability p: webview The WebView plugin P2 Important issues not at the top of the work list package flutter/packages repository. See also p: labels.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@stuartmorgan @Hixie @kf6gpe @Praveena0989 @Piinks @AhmedNourJamalElDin @BondarenkoStas @shamnex @uc-apa @uc-dve