所以我正在使用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 ......但是没有运气......
答案 0 :(得分:4)
<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>
解决它!