Hugh Hou Hugh Hou - 14 days ago 9
AngularJS Question

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...

Answer

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="http://fast.wistia.com/assets/external/E-v1.js"></script>

Solves it!

Comments