videoWidth,videoHeight

[John Robin Dove]

Hi Clifton,
New problem. I had been using this

Code: Select all

 <function name="setScreenSize" event="" params="">
  <![CDATA[
  tbfunction_changeObjectLayer("control", "below", "videoScreen");
  var iframe = document.getElementById('syspageFrame');
  var innerDoc = (iframe.contentDocument);
  //var myObj = innerDoc.getElementById("pgVid_screen_html5_api");
  var myObj = innerDoc.getElementById("pgVid_screen");
  var W = myObj.videoWidth;
  var H = myObj.videoHeight;
    if (W)
    {
      if(H)
      {
      var unit = H / W;
      H = 522 * unit;
      H = Math.round(H);
      tbfunction_pgTBObjSet("screen", "height", H);
      tbfunction_pgTBObjSet("screenBack", "height", H);
      tbfunction_pgTBObjSet("noEntry", "height", H);
      tbfunction_pgTBObjSet("screenFrame", "height", H + 15);
      tbfunction_pgTBObjSet("screenShadow", "height", H + 15);
      tbfunction_createAlphaShadow("screenShadow", false);
      var myHeight = tbfunction_pgTBObjGet("screenFrame", "height");
      var myTop = 498 - myHeight;
      myTop = myTop / 2;
      tbfunction_pgTBObjSet("videoScreen", "top", myTop);
      tbfunction_createAlphaShadow("screen", false);
      }
    }
  ]]>
  </function>

to adapt the size of the field to the video. I see that you have now changed the id of the HTML video object. My system no longer works. It returns 0,0!? Could you help me restore it or maybe include videoWith and videoHeight in htmlVideoControl, please?
John

[Clifton]

The recent PowerPac change did not affect the video element id. If I recall, the id is determined as a prefix followed by "_" and the container object name. However, I don't think manipulating the html video component is a good idea. It is better to just manipulate the ToolBook object that is acting as the container for the video elements. In your case this would just be the object with the name "screen". When the video loads into this object, it will automatically fill the "screen" object's area. So getting the width and height of the "screen" object will result in nearly the same values as the video playing within its boundary. In your case, it is a lot easier to just get the "screen" size or bounds and work from there. Or use tbfunction_snapObjectToCenter() to manipulate surrounding objects as needed.

What are you trying to accomplish by your script?
If you are trying to set a shadow, just use tbfunction_pgStyleObject() on the "screen" object and set the boxShadow property. Then if you ever resize the "screen" object, the shadow will automatically be resized by the browser styling engine. Setting border radii and box shadows are some of the more powerful and easy styling features of HTML5.

[John Robin Dove]

I am trying to adapt the size of a group of objects that represent a screen to the proportions of the original video. It worked exactly as I wanted until your latest update. Different video formats could be played without having two black rectangles on either side. I find that when an object is resized it is necessary to execute createAlphaShadow() again to get a good result.

But I am more worried about the this.rs problem at the moment. The size of the video screen is not all that important.

[Clifton]

For starters, createAlphaShadow() was a function that was created before CSS3. Instead, it is advisable to use the CSS3 style boxShadow instead. It has lots of features and abilities and it is dynamic and resizes to the size of the object. The alph shadow function is only kept in the PowerPac for backwards compatibility.

I'll do some more checking on the error message "this.rs". Is there some different code you are using that triggers the error that I can take a look at?

Regarding the video id, I think the real problem is that when you use a YouTube video, YouTube injects its own elements inside the container element. This can make is more difficult to find the video element id. You can see these additional elements by using the developer tools in Firefox.

Update:
I just checked and the video element of YouTube playing video does not actually have an id to reference. You best option would be to use the classname "video-stream". You could try this code:

videoObj = getToolBookFrame().document.getElementsByClassName( "video-stream" ); //Returns array of elements or null
if (videoObj) videoObj = videoObj[0];
... [code to get videoWidth and videoHeight] ...

NOTE: The specs say that videoWidth and videoHeight may return 0 unless the video has played for a second or two.

Update 2:
Just checked again and noticed that YouTube actually creates an iframe into which the video elements reside. This means you cannot just reference the ToolBook frame, you must first find the YouTube iframe document and go from there. While all of this is possible, it relies on the fact that YouTube won't change their code on you. Ouch!

[John Robin Dove]

Thanks for your reply. I had in fact decided not to try to resize anything for YouTube videos a) because my code could not get videoWidth and videoHeight for YouTube videos and b) because it seems to me they always use the same ratio between width and height anyway. Also, as I said before, I am much more concerned about eliminating the rs problem at the moment. I have now discovered that most of my timeouts were unnecessary but I have identified the one that is necessary.

This bit of code comes after a vast amount of unrelated stuff that loads the exercise. I don't think the preceeding code has any relevance to the problem.

Code: Select all

  { ...
 //Load video
   
    var isChrome = false;     //TEMPORARY, I HAVE SOME CODE THAT DETECTS CHROME THAT WILL GO HERE
     
      if (keys.isNet == true)   // isNET MEANS THE SOURCE FILE ADDRESS HAS // IN IT I.E. IT IS A YOUTUBE VIDEO
      {
      fileName = sharedActions.myArray[3];
       
       /*
        if (isChrome == true)  //THIS WORKS BUT WE DON'T NEED IT YET
        { 
        var lastYT = tbfunction_readCookie("lastYT", "session");
          if (lastYT == sharedActions.myArray[3])
          {
          isChrome = false; //The video can be started with the play button because it has already be used in this session.
          }
        }
        ***/
       
        if (isChrome == true)
        {
        tbfunction_htmlVideoLoader("screen", "youtube", false, "", "", "", "", "", "", fileName);
        //tbfunction_createCookie("lastYT", sharedActions.myArray[3], "", "session");
        tbfunction_setOpacity("screen", 100);
        tbfunction_pgTimer(true, 200, "loadChrome1") //SET A TIMER IN LOADCHROME1
        }
        else
        {
        tbfunction_htmlVideoLoader("screen", "youtube", "", "", "continuous", "", "", "", "", fileName);
        tbfunction_setOpacity("screen", 1);
        tbfunction_pgTimer(true, 200, "load2"); //SET A TIMER IN LOAD2
        }
      }
      else
      {
      fileName =  "../../" + sharedActions.myArray[1] + "/" + sharedActions.myArray[4] + "/teachers/" + sharedActions.myArray[6] + "/" + sharedActions.myArray[5] + "/" + sharedActions.myArray[2] + "/" + sharedActions.myArray[3];
      tbfunction_htmlVideoLoader("screen", false, true, "", "continuous", "", "", "", "", fileName) //WHY DOES AUTOPLAY HAVE TO BE TRUE TO START THE VIDEO AND GET SOUND??
      tbfunction_setOpacity("screen", 1);
      tbfunction_pgTimer(true, 200, "load2")
      }
    }  //If there is no server error.

So a timer is set either in load2 or loadChrome1 load2 allows me to determine the length of the video when an exercise is being made but in this case it is just used to signal that the video is loaded and that the user can use a play button to start it.

loadChrome1 works in a similar fashion but allows the user to click on the all important YouTube button (if Chrome is being used) and starts a timer in loadChrome2 which stops the video, unloads it and reloads it using the continuous parameter (which I need for my position pointer system). The user can now use my play button because the 'official' button has lifted the security restriction. No problem if playBetween is not used but if it is this.rs shows up immediately. Here is the code for load2, loadChrome1 and loadChrome2
LOAD2

Code: Select all

 <load2>
  <function name="myUser" event="user" params="evt,value" useTB="true">
  <![CDATA[
  var result = tbfunction_htmlVideoControl("screen", "duration");  // video metadata is available.
  //tbfunction_pgTBObjSet("ML2", "text", result);
    if (result > 0)
    {
    tbfunction_pgTimer("", "", "load2", true); //stop timer
      var fct = function()         //VERY IMPORTANT WITHOUT THIS WE GET RS IS UNDEFINED
      {
        if (keys.totalLength == 0 || keys.new == true)
        {
        keys.totalLength =  resultB * 1;
        keys.endPos = keys.TotalLength;
        //startPos = 0 by default;
        keys.unit = keys.totalLength / 667;
        keys.unit = Math.round(keys.unit);
        }
      sharedActions.getUnit10(keys.unit);
      sharedActions.showFractions(keys.totalLength);
      tbfunction_pgTBObjSet("pleaseWait", "visible", false);
      tbfunction_pgTBObjSet("gif", "visible", false);
      tbfunction_pgTBObjSet("cover", "visible", false);
      tbfunction_pgTBObjSet("shield", "visible", false);
      tbfunction_pgStyleObject("shield", "cursor", "default");
      tbfunction_htmlVideoControl("screen", "volume", 0);
     
        if (keys.isNet == true)
        {
        tbfunction_pgTBObjSet("videoScreen", "size", "548,322");
        tbfunction_pgTBObjSet("videoScreen", "top", 93);
        tbfunction_createAlphaShadow("screenShadow", false);
        }
        else
        {
        //sharedActions.setScreenSize();
        tbfunction_createAlphaShadow("screenShadow", false);
        }
      tbfunction_snapObjectToCenter("isLoaded", "screen");
      tbfunction_pgTBObjSet("isLoaded", "visible", true);
        if (keys.new == true)
        {
        //keys.nextAction = 4;
        sharedActions.showRequest("394`1", "1") //Do you want to change the length of the media clip. You can redefine the beginning and/or the end BEFORE you create your exercise. Yes, No
        }
      }
    setTimeout(fct, 200);
    }
  ]]>   
  </function>
  </load2>

LOADCHROME1

Code: Select all

<loadChrome1>
<function name="myUser" event="user" params="evt,value" useTB="true">
<![CDATA[
var result = tbfunction_htmlVideoControl("screen", "duration");  // video metadata is available.
  if (result > 0)
  {
  tbfunction_pgTimer("", "", "loadChrome1", true);
    var fct = function()
    {
    tbfunction_pgTBObjSet("noEntry", "height", 100);
    tbfunction_pgTBObjSet("noEntry", "top", 295);
    var txt = sharedActions.splitter("238`2");
    tbfunction_pgTBObjSet("myTextBox", "text", txt); //To start the video for the first time, click the button above. Then you must use the button on the left.
    var myWidth = tbfunction_pgTBObjGet("myTextBox", "width");
    var myHeight = tbfunction_pgTBObjGet("myTextBox", "height");
    tbfunction_pgTBObjSet("myShadow", "width", myWidth);
    tbfunction_pgTBObjSet("myShadow", "height", myHeight);
    tbfunction_createAlphaShadow("myShadow");
    tbfunction_pgTBObjSet("infoGroup", "left", 200);
    tbfunction_pgTBObjSet("infoGroup", "top", 367);
    tbfunction_pgTBObjSet("play", "enabled", false);
    tbfunction_pgTBObjSet("goStart", "enabled", false);
    tbfunction_pgTBObjSet("pane", "visible", true);
    tbfunction_pgTBObjSet("changepos", "left", 39);
    tbfunction_pgTBObjSet("pleaseWait", "visible", false);
    tbfunction_pgTBObjSet("gif", "visible", false);
    tbfunction_pgTBObjSet("shield", "visible", false);
    tbfunction_pgStyleObject("shield", "cursor", "default");
    tbfunction_pgTBObjSet("AMarkers", "visible", true);
    //I don't know why this is necessary!!
    tbfunction_changeObjectLayer("AMarkers", "above", "pane");
    tbfunction_changeObjectLayer("pane", "above", "AMarkers");
    //AMarkers will resume their original layer in cover user below!!
    tbfunction_pgTBObjSet("infoGroup", "visible", true);
    tbfunction_pgTBObjSet("buttons", "enabled", false, "", true);
    tbfunction_pgTBObjSet("moreButtons", "enabled", false, "", true);
    tbfunction_pgTBObjSet("play", "enabled", false);
    tbfunction_pgTBObjSet("goStart", "enabled", false);
    tbfunction_setOpacity("screen", 100);
    tbfunction_pgTimer(true, 200, "loadChrome2");
    }
  setTimeout(fct, 200);
  }     
]]> 
</function>
</loadChrome1>

LOADCHROME2

Code: Select all

<loadChrome2>
<function name="myUser" event="user" params="evt,value" useTB="true">
<![CDATA[
var timeCode = tbfunction_htmlVideoControl("screen", "currentTime");
//tbfunction_pgTBObjSet("ML1", "text", timeCode);
  if (timeCode > 100)
  {
  tbfunction_pgTimer("", "", "loadChrome2", true);
    var fct = function ()
    {
    tbfunction_htmlVideoControl("screen", "stop");
    tbfunction_htmlVideoControl("screen", "unload");
    tbfunction_setOpacity("screen", 1);
    //YouTube video is reloaded.
    tbfunction_htmlVideoLoader("screen", "youtube", false, "continuous", "", "", "", "", "", sharedActions.myArray[3]);
    tbfunction_pgTBObjSet("infoGroup", "visible", false);
    tbfunction_changeObjectLayer("AMarkers", "above", "coverMarkers");
    tbfunction_pgTBObjSet("noEntry", "height", 438);
    tbfunction_pgTBObjSet("play", "enabled", true);
    tbfunction_pgTBObjSet("pane", "visible", false);
    tbfunction_pgTBObjSet("cover", "visible", false);
    tbfunction_pgTBObjSet("buttons", "enabled", true, "", true);
    tbfunction_pgTBObjSet("moreButtons", "enabled", true, "", true);
    tbfunction_pgTBObjSet("play", "enabled", true)
    sharedActions.showRequest("You can now use the button.", "1"); //TEMPORARY (THIS IS LIKE A CUSTOM ALERT)'
    }
  setTimeout(fct, 200);
  }     
]]> 
</function> 
</loadChrome2>


Despite my best efforts I cannot see why this is happening. I thought about making a video presentation to try and help you understand but maybe Skype would better, if you had time of course. I'm sorry this is taking up so much of your time already. Anyway, my brain is going a bit numb after a whole day battling with this. I think i'll quit for today. Thanks again for your help. I''ll be in touch .