使用 Wistia Player API 构建 Ionic 应用程序无法在 iOs 上运行。

Question

所以我正在使用 Wistia 播放器 API 构建 Ionic / AngularJS 应用程序。我最终尝试过，一切都在浏览器测试模式下正常工作。但是当编译到 iOs 时，它只是显示白屏。这是详细信息：

查看 - HTML 页：

<!-- 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);

所以它完美地加载到 Chrome。但是当我将它编译到 xcode 和运行上时，它就在我的 phone 上。它只是显示一个白屏（没有 JS 错误！）

第二个选项：iframe - 因为 iframe 在 iOs (http://wistia.com/doc/player-api#using_iframes_and_the_player_api) 上加载正常。第二个选项是将 wistiaApi 附加到 iframe 上。但是代码不起作用。

查看 - HTML 页：

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

控制器：

$timeout(function() {

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

                    console.log (wistiaEmbed);

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

}, 100);

wistiaEmbed 控制台日志未定义。和错误日志：

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

很明显 .wistiaApi 不起作用...

我在 index.html 中加入了这个：

我会喜欢这样的 AngularJS 库 https://github.com/brandly/angular-youtube-embed 和 Wistia Player...但运气不好...

Answer 1

哇，我找到问题了。在 iOs and/or Android 上构建离子应用程序时，这实际上是一个非常常见的问题。当您在 index.html 中包含 <script> 标签时，请始终放置完整的 http://.... 而不是仅使用 //。

就我而言，我通过他们的官方文档包含了 Wistia API，例如：

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

它适用于浏览器，因为浏览器很智能。设备不像浏览器那么智能，所以像这样包含 http：

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

解决了！

使用 Wistia Player API 构建 Ionic 应用程序无法在 iOs 上运行。

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

iframe

angularjs

ionic-framework

wistia