Hugh Hou Hugh Hou - 10 months ago 71
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>


$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 (
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>


$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 with Wistia Player...but no luck...

Answer Source

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="//"></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=""></script>

Solves it!