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エラーはありません！）

2 番目のオプション: iframe - iframe は iO で正常にロードされるため ( http://wistia.com/doc/player-api#using_iframes_and_the_player_api )。2 番目のオプションは、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 コンソールが undefined をログに記録します。そしてエラーログ:

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 with Wistia Playerのような AngularJS ライブラリが大好き です...しかし、運はありません...

4

1 に答える 1

4

うわー、私は問題を見つけました。これは、実際には、iOS や Android で ionic アプリを構築する際によくある問題です。<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 に答える