Losing my mind with Javascript API

4 replies [Last post]
Tue, 11/22/2011 - 16:50
pbwall
pbwall's picture
User offline. Last seen 17 weeks 6 days ago.
Joined: 10/13/2010
Points: 44

I've tried everything under the sun. I cannot get the javascript APIs to work with my player. For the record, I'm still on version 2.x and I'm using the community edition self hosted. If anyone can shed some light on this for me, I'd be forever grateful. Is there a default player on the CE edition to try?

I am using the code from this example and modified only slightly to pull my videos and player. The initial video pops up but the onKdpReady handler never gets called (debugging with Firebug). Is it my custom player? Do I have to do something to make it respond to the javascript API?

Thanks

Here is the main part of my code:

 function onKdpReady(playerId) {
         window.myKdp=get(playerId);
         get("Player_State").innerHTML="<br>&nbsp; READY (Id=" + playerId + ")";
         get("nowPlaying").innerHTML=(myKdp.evaluate('{entryId}'));
         getDuration();
         attachKdpEvents();
         addKdpListners();
 }

  <object name="player_123" id="player_123" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" allowFullScreen="true" height="332" width="400" data="http://media.mysite.com/index.php/kwidget/wid/_101/uiconf_id/1727904">

  <param name="allowScriptAccess" value="always"/>
  <param name="allowNetworking" value="all"/>
  <param name="allowFullScreen" value="true"/>
  <param name="bgcolor" value="#000000"/>
  <param name="movie" value="http://media.mysite.com/index.php/kwidget/wid/_101/uiconf_id/1727904"/>
  <param name="flashVars" value="id=player_123&name=player_123&emptyF=onKdpEmpty&readyF=onKdpReady&entryId=0_ffvoaoxn"/>
  <param name="wmode" value="opaque"/>
  <param name="id" value="player_123"/>
  <param name="name" value="player_123"/>
  <!-- enter you content for users who can't see flash here (google see's this too): -->

  <a href="http://corp.kaltura.com">video platform</a>
  <a href="http://corp.kaltura.com/technology/video_management">video management</a>
  <a href="http://corp.kaltura.com/solutions/overview">video solutions</a>
  <a href="http://corp.kaltura.com/technology/video_player">free video player</a>
 </object>

Here is my entire code in a nutshell:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kaltura Dynamic Player Example Page - Utilizing The JavaScript API</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="includes/jquery.js"></script>

<style>
 body { margin:22px 0 99px 22px;}
 div { float:left;}
 div#myPlayer { width:400px; min-height:100px;}
 div#doStuff { margin: -11px 0 0 22px;}
  #Player_State, #nowPlaying { font-style:italic;}
 #embedCode { float:left; margin-left:22px;}
  #embedCode textarea { width:400px; height:200px;}
  #embedCode h3 { margin:0; cursor:default;}
</style>

<script language="javascript">
 function get(el) {
         return document.getElementById(el);
 }
 
 function onKdpReady(playerId) {
         window.myKdp=get(playerId);
         get("Player_State").innerHTML="<br>&nbsp; READY (Id=" + playerId + ")";
         get("nowPlaying").innerHTML=(myKdp.evaluate('{entryId}'));
         getDuration();
         attachKdpEvents();
         addKdpListners();
 }
 
 function onKdpEmpty(playerId) {
         get("Player_State").innerHTML="<br>&nbsp; READY (Content not specified or not found; Id=" + playerId + ")";
 }
 
 function attachKdpEvents() {
        get("kdpPlay").onclick=function(){myKdp.dispatchKdpEvent('doPlay');return false;}
        get("kdpPause").onclick=function(){myKdp.dispatchKdpEvent('doPause');return false;}
        get("kdpStop").onclick=function(){myKdp.dispatchKdpEvent('doStop');myKdp.dispatchKdpEvent('stopFastForward');return false;}
        get("kdpFFX8").onclick=function(){myKdp.dispatchKdpEvent('fastForward',8);return false;}
        get("kdpMute").onclick=function(){myKdp.dispatchKdpEvent('volumeChange');return false;}
        get("kdpJumpTo").onclick=function(){myKdp.dispatchKdpEvent('doSeek',get('goSeek').value);return false;}
        get("kdpLoadVideo").onclick=function(){kdpDoLoadVideo();return false;}
        get("kdpShare").onclick=function(){kdpDoGigya();return false;}
 }

 function kdpDoLoadVideo() {
        get("Player_State").innerHTML="<br>&nbsp;Stopped";
        myKdp.insertMedia("-1",get('loadVideoEntry').value,'true');
        myKdp.addJsListener("initMedia","kdpDoOnLoadVideo");
 }
 
 function kdpDoOnLoadVideo() {
        myKdp.dispatchKdpEvent('doPlay');
        get("Player_State").innerHTML="<br>&nbsp;New Video Loaded";
        get("nowPlaying").innerHTML=(myKdp.evaluate('{entryId}'));
        myKdp.removeJsListener("initMedia");
 }
 
 function kdpDoGigya() {
        kdpDoOnPause();
        myKdp.dispatchKdpEvent('gigyaPopup');
        myKdp.addJsListener("closePopup","kdpDoOnCloseGigya");
        alert("detach events to prevent play button etc. from functioning");
 }

 function kdpDoOnCloseGigya() {
         alert("re-attach events");
         alert("remove listner to 'closePopup'");
 }

 function addKdpListners() {
         myKdp.addJsListener("doPlay","kdpDoOnPlay");
         myKdp.addJsListener("doPause","kdpDoOnPause");
         myKdp.addJsListener("doStop","kdpDoOnStop");
         myKdp.addJsListener("fastForward","kdpDoOnFF");
         myKdp.addJsListener("playerPlayEnd","kdpDoOnEnd");
 }
 
 function kdpDoOnPlay() {
         get("Player_State").innerHTML="<br>&nbsp;Playing";
         startKdpTimer();
 }
 
 function kdpDoOnPause() {
         get("Player_State").innerHTML="<br>&nbsp;Paused";
         myKdp.dispatchKdpEvent('stopFastForward');
         stopKdpTimer();
 }
 
 function kdpDoOnStop() {
         get("Player_State").innerHTML="<br>&nbsp;Stopped";
         myKdp.dispatchKdpEvent('doSeek',0);
         get("entryPosition").value=0.0;
         stopKdpTimer();
 }
 
 function kdpDoOnFF() {
         get("Player_State").innerHTML="<br>&nbsp;Fast forwarding";
         startKdpTimer();
 }
 
 function kdpDoOnEnd() {
         get("Player_State").innerHTML="<br>&nbsp;Reached end";
         stopKdpTimer();
 }
 
 function getDuration() {
        window.kdpMovieDuration=(myKdp.evaluate('{duration}'));
        get("movieDuration").innerHTML=kdpMovieDuration;
        get("entryPosition").innerHTML="0.00";
 }
 
 function startKdpTimer() {
        var timer_element=get("entryPosition"); // the html element (object) that will display the current videohead position
        window.kdpTimerInterval=setInterval(function(){doTimer(timer_element)},250); // make it a global variable so that we can kill it later
        doTimer(timer_element);
 }

 function doTimer(timer_element) {
        var kdpHeadPosition=myKdp.getMediaSeekTime();
        if(kdpHeadPosition>kdpMovieDuration) {
                kdpHeadPosition=kdpMovieDuration;
                myKdp.dispatchKdpEvent('stopFastForward');
                kdpDoOnEnd();
        }
        kdpHeadPosition+=""; // convert to string
        var seconds=kdpHeadPosition.split(".")[0];
        try{var fractions=kdpHeadPosition.split(".")[1].substr(0,3)} catch(err){fractions=0};
        timer_element.innerHTML=seconds+"."+fractions;
 }
 
 function stopKdpTimer() {
         clearInterval(kdpTimerInterval);
 }
 
 function GetEmbedCode() {
         var emb=get("GiveEmbedCode");
         emb.value=get("player_123").innerHTML;
         emb.select()
 }
</script>
</head>

<body>
<div id="myPlayer">
  <object name="player_123" id="player_123" type="application/x-shockwave-flash" allowScriptAccess="always" allowNetworking="all" allowFullScreen="true" height="332" width="400" data="http://media.mysite.com/index.php/kwidget/wid/_101/uiconf_id/1727904">

  <param name="allowScriptAccess" value="always"/>
  <param name="allowNetworking" value="all"/>
  <param name="allowFullScreen" value="true"/>
  <param name="bgcolor" value="#000000"/>
  <param name="movie" value="http://media.mysite.com/index.php/kwidget/wid/_101/uiconf_id/1727904"/>
  <param name="flashVars" value="id=player_123&name=player_123&emptyF=onKdpEmpty&readyF=onKdpReady&entryId=0_ffvoaoxn"/>
  <param name="wmode" value="opaque"/>
  <param name="id" value="player_123"/>
  <param name="name" value="player_123"/>
  <!-- enter you content for users who can't see flash here (google see's this too): -->

  <a href="http://corp.kaltura.com">video platform</a>
  <a href="http://corp.kaltura.com/technology/video_management">video management</a>
  <a href="http://corp.kaltura.com/solutions/overview">video solutions</a>
  <a href="http://corp.kaltura.com/technology/video_player">free video player</a>
 </object>

</div><!--myPlayer-->
<div id="doStuff">
 <h3>Do Stuff:</h3>

 <p><a href="#" id="kdpPlay">Play</a> | <a href="#" id="kdpPause">Pause</a> | <a href="#" id="kdpStop">Stop</a> | <a href="#" id="kdpFFX8">FF>></a> | <a href="#" id="kdpMute">Mute / Unmute</a></p>
<h3>See Info/ Get Info:</h3>

 <p>Player State: <span id="Player_State"></span></p>
 <p>Now Playing (entryId): <span id="nowPlaying"></span></p>
 <p>Duration: <span id="movieDuration"></span> &nbsp;|&nbsp; Current Time: <span id="entryPosition"></span></p>
<h3>Do More Stuff:</h3>
 <p><a href="#" id="kdpJumpTo">Jump To</a> <input type="text" id="goSeek" onfocus="this.select();" value="30" size="3" />
 seconds</p>

 <p><a href="#" id="kdpLoadVideo">Load New Video:</a>
   <input type="text" size="10" id="loadVideoEntry" value="0_t4d7t1ka" onfocus="this.select();" />
 </p>
 <p><a href="#" id="kdpShare">Share Video</a> &nbsp;|&nbsp; <a href="javascript:GetEmbedCode()" >Get Embed Code</a></p>
</div>
<div id="embedCode">
 <a name="embedme"></a>

 <h3 onclick="get('GiveEmbedCode').select()">Embed Code</h3>
 <textarea id="GiveEmbedCode"></textarea>
</div>
<p style="clear:both;">&nbsp;</p>
</body>
</html>

Top
Tue, 11/22/2011 - 18:46
#1
papyromancer
papyromancer's picture
User offline. Last seen 4 weeks 1 day ago.
Community ExpertValued Member
Joined: 05/13/2009
Points: 164

it doesn't appear that you are actually binding anything to the onKdpReady event.

maybe try something like:

$(document).ready( function(){
     onKdpReady('player_123');
});

btw, a a full list of current kdp events can be found on the html5video wiki: http://html5video.org/wiki/Kaltura_KDP_API_Compatibility and in the SVN: http://www.kaltura.org/kalorg/kdp/trunk/kdp3Lib/docs/notifications%20-%2...

if you could post your example code somewhere where I can run it (or replace the mysite urls with an actual kaltura server) I'll be able to do some more testing.

Top
Tue, 11/22/2011 - 20:01
#2
pbwall
pbwall's picture
User offline. Last seen 17 weeks 6 days ago.
Joined: 10/13/2010
Points: 44

Thank you. I'll send you a private message with a link to the actual page.

I did try the ready function as well once and it didn't work. I left that in there in the code.

I thought the swf loaded that via the flashvars?

Top
Tue, 11/22/2011 - 20:07
#3
pbwall
pbwall's picture
User offline. Last seen 17 weeks 6 days ago.
Joined: 10/13/2010
Points: 44

Also, I'm right now installing 4.0. I'll have a ton of video I have to reupload (not happy) but I'm hoping I've got a better chance of making it work in there.

I'd still take your advice though on my 2.02 implementation above.

Top
Wed, 11/23/2011 - 16:25
#4
pbwall
pbwall's picture
User offline. Last seen 17 weeks 6 days ago.
Joined: 10/13/2010
Points: 44

Ok, I've installed 4.0 and I'm going to try and get this to work with that version instead.....so, consider this closed but unanswered. Thanks

Top