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上并在我的手机上运行时。它只显示一个白色屏幕（没有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中包含了这个：

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

Answer 1

哇，我发现了这个问题。在iOs和/或Android上构建离子应用程序时，这实际上是一个非常常见的问题。当您在<script>中加入index.html代码时，请始终填写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上工作。

1 个答案: