Kaltura embed within Ionic


#1

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