1

所以我正在使用 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 在 iO 上加载正常（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 ......但没有运气......

4

1 回答 1

4

哇，我发现问题了。在 iO 和/或 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>

解决它！

于 2015-05-29T07:37:50.653 回答