Search code examples
angularjsiframeionic-frameworkwistia

Build an Ionic App with Wistia Player API not working on iOs.

So I am building an Ionic / AngularJS app using Wistia player API. I finial tried and everything work right on browser test mode. But when compile onto iOs, it just show white screen. Here is the detail:

View - HTML page:

<!-- Wistia Embed -->
<div id="{{ 'wistia_' + mediaHashId }}" class="wistia_embed" style="width:398px;height:224px;" ng-if="mediaHashId"></div>

Controller: 

$timeout(function() {
                    var wistiaEmbed = Wistia.embed($scope.mediaHashId, {
                      videoFoam: true,
                      playerColor: "3B97D3"
                    });

                    wistiaEmbed.bind("end", function () {
                     alert ("Video is finished");
                    });
}, 100);

So it load perfectly onto Chrome. But when I compile it onto xcode and run it on my phone. It just show a white screen (with no JS error!)

SECOND OPTION: iframe - since iframe load okay on iOs (http://wistia.com/doc/player-api#using_iframes_and_the_player_api). The second option is attach wistiaApi onto an iframe. But the code does not work.

View - HTML page:

<div class="video-container">
                <iframe id="wistia_player" ng-src="{{ mediaHashId | wistiaEmbedUrl }}" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"></iframe>
</div>

Controller: 

$timeout(function() {

                    var wistiaEmbed = document.getElementById("wistia_player").wistiaApi;

                    console.log (wistiaEmbed);

                    wistiaEmbed.bind("end", function () {
                     alert ("Video is finished");
                    });

}, 100);

The wistiaEmbed console log an undefined. And error log: 

TypeError: Cannot read property 'bind' of undefined
    at lesson-detail-ctrl.js:46
    at ionic.bundle.js:24922
    at completeOutstandingRequest (ionic.bundle.js:13604)
    at ionic.bundle.js:13984

So clearly .wistiaApi does not work...

I do include this in my index.html:

I will love a AngularJS library like this https://github.com/brandly/angular-youtube-embed with Wistia Player...but no luck...

Solution

  • Wow, I've found the problem. This is actually a very common problem when building ionic apps on iOs and/or Android. When you include <script> tags in your index.html, always put the full http://.... instead of using just //.

    In my case, I included the Wistia API via their official documentation like: 

    <script src="//fast.wistia.com/assets/external/E-v1.js"></script>

    It works on browsers because browsers are smart. Devices are not as smart as browsers so by including the http like so:

    <script src="https://fast.wistia.com/assets/external/E-v1.js"></script>

    Solves it!