Best way to embed youtube in nativescript?


#1

I posted to the slack channel about this, but thought I’d ask here as well for extra ideas:

What is the best performing way to embed youtube videos in nativescript?

I am building an app that will have a lot of youtube videos, and I am using angular.
The options I find available are 1) simple webview (https://docs.nativescript.org/angular/code-samples/ui/web-view) or 2) videoplayer plugin (https://github.com/nstudio/nativescript-videoplayer).

I’m not sure what the plugin does that webview doesn’t. Are there other options?

I have been able to get a sample going of the basic webview solution on the simulator–but it is VERY slow on simulator (6+ seconds to load single video). I have not been able to get the plugin to work–using angular code from README, just shows blank box.

Previously, when building in ionic, I used the youtube iframe api, which worked very well. Pretty sure this doesn’t work with native, because it puts an iframe directly into the view (no webview). Youtube has instructions for embedding their iframe api into ios apps, but they assume use of xcode, and I’m not sure how it translates to nativescript: https://developers.google.com/youtube/v3/guides/ios_youtube_helper.


#2

@WS123 Have you tried the player made specifically for youtube videos - https://market.nativescript.org/plugins/nativescript-youtubeplayer


#3

Thanks for the suggestion. I was not sure that option was sufficiently developed (README does not really have much description, and code sample is android only). More importantly, it seems to assume you want to go through the youtube “data api”, which requires a security token, has embed quotas, etc.

I have found the separate youtube “iframe api” to be great, and want to stick with something similar to that–sticking to the model of just putting in iframes (or something like it), which I have found the better solution.


#4

Some More Youtube Stuff:

Just a clarification: in looking further, it looks like the “nativescript-youtubeplayer” plugin is built on the youtube Android api player:https://developers.google.com/youtube/android/player/. This is slightly different, I think, than the “Data API”, but it is similar in that it requires an API key and likely incurs quota limits. The youtube iOS api player is totally separate, with separate requirements.

Having a nativescript youtubeplayer plugin that utilizes the ios api player from youtube would be cool, but I don’t think that exists yet.

So the youtube api has different ways of doing things (the “Iframe API” and the “Data API” are two methods for browser-based apps, and the “android player api” and “ios player api” are for mobile). I would expect it is still fine to use an iframe for youtube within a nativescript app using webview.

Video in Nativescript Generally:

Moving outside of the youtube weeds, what is the best way to play remote video (from https source, youtube or not) in nativescript? If the options are webview or the video player plugin, is the videoplayer plugin the latest and greatest suggestion?


#5

If you want to play videos from Youtube, still nativescript-youtubeplayer should be the best option. This plugin already implements the platform specific APIs for iOS and Android.

Unfortunately Youtube Player for iOS doesn’t provide a whole native solution. They just provide a wrapper over WebView in iOS. As Android is something they own, I believe they implemented however they liked it to be, with all usage limitations etc., So we have no choice than follow separate instructions for Android for best experience.

If you want to keep it simple and generic over platforms, you can use the iframe apis.


#6

Do you find that embedding iframes works ok in Nativescript for production? The simulator seemed to be pretty slow when I put an iframe into a webview tag.

I am considering how to embed different types of media. For the web and hybrid apps, I would just use iframes. I didn’t know if the native aspect of Nativescript made this problematic.

(Side note: haven’t yet been able to test out the youtube iframe api in nativescript. That api requires code: "document.createElement(‘script’). This is producing an error for me: ‘document.createElement is not a function.’ I see github issues on this, but they all seem resolved by removing rxjs imports. I have removed those and still get the error.)


#7

I prefer to avoid WebViews as much as possible in my apps, for what else NativeScript is for if not Cordova. Still at my end I don’t see any issues while embedding iFrame in WebView.


#8

Thanks. I agree about webviews–that occurred to me as well, that it goes against being “native” if you are using a webview layer.

I am just not sure what the alternative is when it comes to embedding various types of external media, like from youtube, vimeo, spotify, soundcloud, instagram, etc.

Sometimes there are specific apis you can use, but as a general solution if you need to put something in your app that is from a url, is there any alternative to webview?


#9

That seems a lot sources for video, so WebView could be a quick and easiest solution.


#10

What about for external audio?

Just as an example: like soundcloud, with a file like this: https://soundcloud.com/vancejoy/02-riptide .

I see a few nativescript audio player plugins, but they seem geared toward playing files that are locally on your phone. I assume for a file that is external (from an https source), I am stuck with webview, but just wanted to check in case there are other ideas.


#11

Update: this plugin looks promising for audio: https://github.com/nstudio/nativescript-audio.

Still figuring it out, but seems like a way to play external audio without webview.