Using Wistia videos (Nativescript + Angular )


#1

Hi All,

I would like to use Wistia videos in my mobile app developed using Nativescript & Angular.

I am not sure whether we have any plugins already to use Wistia Videos.

Any help is highly apreciated. Thanks !


#2

I don’t think there is any plugin for Wistia. You can always search available plugins here
https://market.nativescript.org
https://plugins.nativescript.rocks


#3

Is there any player that uses wistia videos ? Or any possibility to use WebView for this ?


#4

You can use the JS Player API and embed it inside a webview
https://wistia.com/doc/player-api


#5

For using API player we need to include some scripts. If its an angular application we an include these scripts in index page. But in case of Nativescript how shall we do it. Do you have any code samples for this ?


#6

You can inject the script into webview


#7

Hi,
I did insert a webview and used below code. But unfortunately nothing happens. No error as well. But if i use same code inside a web application it works fine. Any idea ?

<div class="wistia_embed wistia_async_5bbw8l7kl5" style="width:640px;height:360px;"></div>
<script>
    window._wq = window._wq || [];
    _wq.push({
        id: "5bbw8l7kl5", onReady: function (video) {
            console.log("I got a handle to the video!", video);
        }
    });
</script>

#8

try putting it inside a full html page (i mean, inside the body tag of a html page code)


#9

Tried but unfortunately no changes. I can see my title “Wistia video below” in the screen, which means web view rendered fine. But just no video.

Wistia video below

<div class="wistia_embed wistia_async_5bbw8l7kl5" style="width:500px;height:200px;"></div>
<script>
    window._wq = window._wq || [];
    _wq.push({
        id: "5bbw8l7kl5", onReady: function (video) {
            console.log("I got a handle to the video!", video);
        }
    });
</script> 

#10

Does it require any other library to be included?


#11

Nope. It doesn’t require any other library.

Because if i include same code in a new web app in a simple html page it works fine.


#12

@imran2489 I gave it a try, it plays the video perfectly in iOS.

But in Android in loads the video thumbnail but still doesn’t play. I suspect the issue with Android is that it uses android.webkit.WebViewClient, overriding that with android.webkit.WebChromeClient will solve the issue.

If you are looking for examples how you can override WebClient refer below one. It was to by pass SSL errors but the approach will be similar, you will just have to use WebChromeClient instead of WebViewClient

Update: The above example concentrates on retaining events of WebView implemented by NativeScript Core. If you are not using those events, you can make it more simple. Here is another example from @multishiv19