How to handle Youtube links in WebView (Android Export)

Post reply
0 favourites
  • 3 posts
From the Asset Store
Firebase Utilities PRO- Analytics, Dynamic Links, Remote Config, Performance, Crashlytics
$10.80 USD
10% off
Firebase: Analytics, Dynamic Links, Remote Config, Performance, Crashlytics on Android, iOS & Web Browser
Sparsha's avatar
Sparsha

  • I have a little app for our Kids Youtube channel what have a built-in Video Player and some games for kids.

    I used to use VideoJs with a dedicated website what provides HTML player for all my Playlists, and streamed videos from CDN.

    As it was too hard to re-encode and upload all our Youtube videos to the own CDN, I switched back to Youtube Iframe API, what is simply displays the official Playlists from our Youtube channel.

    My player URL in app WebView: "https://v.kerekmese.hu/"

    Thanks to the Iframe APIs "rel=0" parameter (used to disable related videos, but deprecated), the player on pause shows related videos only from our channel what is Ok, cause our goal is to keep user watch only our videos.

    My problem is when I test with Debug APK in Android device, and click on the displayed related video it starts YouTube Player Website inside the current WebView, example:

    "https://www.youtube.com/watch?v=S8gWfX0GKvQ"

    That makes me alot of problems:

    - its not the same iframe embed, so the UI is different

    - mutes the video

    - displays a big Open Youtube App link

    - the page has scrolling what is ugly

    - displays a lot of related videos from other channels :(

    I've searched for solutions for days now, and found, that I should Handle Navigation by setWebViewClient():

    developer.android.com/develop/ui/views/layout/webapps/webview

    Also found shouldOverrideUrlLoading, what should catch URLs before loading:

    developer.android.com/reference/android/webkit/WebViewClient.html

    I have 2 ideas to handle this:

    Better solution:

    - listen to clicks what's matches: "https://www.youtube.com/watch?v=videoID"

    - get the videoID variable from URL

    - open custom URL inside my Webview: "https://v.kerekmese.hu/videoID" (the same iframe embed made by my own site's html)

    Acceptable solution:

    - listen to clicks what's matches: "https://www.youtube.com/watch?v=videoID"

    - do nothing: do not open this, just wait for user to resume video play

    But I know nothing about Andriod Studio, only using C3 and C3 export/build service for this little project.

    Is it possible to handle link clicks inside C3/Webview?

    Or will I need to do all the coding and build in Android Studio?

    Just finished all the hard work to finally update our app, so many thanks for you kind of help in ancipation.

    Tagged:

  • When exporting a debug APK from Construct, the app runs in a WebView using the Cordova framework to communicate with the app that contains the WebView. It's not the same as a web browser, and so some things like opening links work differently, especially when trying to open a new tab/window: as it's not a browser it doesn't have the ability to use tabs or different windows, so it just opens in the same WebView.

    Construct's Browser object works around this, so if you can use the 'Open URL in new window' action, it will work correctly.

    If you are using JavaScript coding, you can also make use of the Cordova InAppBrowser plugin: calling cordova.InAppBrowser.open(url, "_system") will open the given URL in the system browser, which is what the Browser object does. (If you do this, add the Browser object to the project, as it includes the InAppBrowser plugin.)

    If you are clicking links inside an iframe showing other web content, it is much more difficult, as the web content inside the iframe is not under the control of Construct or Cordova and so neither of these things will work. You will have to do some customization in Android Studio as you were already looking at, but this is beyond the scope of what I can help with.

    Of course, a much easier solution is: publish a web app and skip the Android app completely. Then it always runs in a web browser and links will open normally.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Ashley, thank you very much for your fast and detailed reply.

    The related video links are inside an iframe (Youtube iframe API :) )and have target=_blank attribute.

    I'll test the Browser object, since I used iframe object till now. URL data is accessable in Browser.URL, but is it possible to detect URL changes in Browser in an elegant way?

    Anyway, I can store the prev. URL value in a variable and compare it in each tick to the current one.

    I also have Mobile Master Collection / Mobile Browser plugin, what have a "Before Load" setting what enables a "On Before Load" event, and has a MobileBrowser.recentURL value, what seems to be promising.

Post reply
  • 3 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)