Hi all,
I am working on a simple Ionic app that acts as a front end viewer for a WordPress site. Our WordPress installation uses Kaltura as the video host, and I would like to have the videos be playable from the app.
The architecture currently:
Angular controller receives data via JSON, which it then sends to the template from which HTML content is displayed using ng-bind-html. This works correctly for non-video posts.
The data being sent to the app via JSON is correct for videos: that is to say, if I copy and paste the code into an empty HTML file and open it in Chrome everything works as expected.
assume $scope.post.content is set by a JSONP request and is returned via a callback:
<script src="http://www.kaltura.com/p/1630402/sp/163040200/embedIframeJs/uiconf_id/26628541/partner_id/1630402"></script>
<div id="kaltura_player_a499ee5e998e4172357467e9c6644260_wrapper" class="kaltura-player-wrapper">
<div id="kaltura_player_a499ee5e998e4172357467e9c6644260" style="width:550px;height:397px;float:;">
</div>
<div class="kaltura-powered-by" style="width: 550px; ">
<div><a href="http://corp.kaltura.com/Products/Features/Video-Player" target="_blank">Video Player</a> by <a href="http://corp.kaltura.com/" target="_blank">Kaltura</a>
</div>
</div>
</div>
<script>
kWidget.embed({
"targetId": "kaltura_player_a499ee5e998e4172357467e9c6644260",
"wid": "_1630402",
"uiconf_id": "26628541",
"flashvars": {},
"entry_id": "1_nyixjtgr"
});
</script>
In post.html I have:
<ion-view title="Post">
<ion-content has-header="true">
<div class="list card">
<div class="item item-text-wrap">
<h2 class="post-title">{{post.title}}</h2>
<p>Posted by {{post.author.name}}</p>
</div>
<div ng-bind-html="post.content | unsafe" class="item item-body">
</div>
</div>
</ion-content>
</ion-view>
However the video does not display.
Any idea in the direction towards a solution?
Thanks!
Tim