Category: ICT

Getting and Setting timeline position in JWPlayer

Posted on by John McLear

Getting the position is easy:

<script type="text/javscript">

var player   =  null;
  var playlist =  null;
  var time     =  null;

  function playerReady(obj)
  {
    player = gid(obj.id);
    addListeners();
  };


  function addListeners()
  {
    try
    {
      playlist = player.getPlaylist();
    }
    catch(e)
    {
      setTimeout("addListeners()", 100);
    }

    player.addModelListener('TIME', 'timeMonitor');
  };

  function timeMonitor(obj)
  {
    time = obj.position;
  };

  function gid(name)
  {
    return document.getElementById(name);
  };

</script>

You now have the current timeslider time as the variable named “time”.

Test it out by doing an alert(time); attached to a button. This also gives us the time(according to the timeslider) that you clicked the alert and saves it as a variable named “savetime”.

<a href="#" onClick="savetime = time;alert(time);">Alert the current timeline position</a>

Now to push the savetime back to the video object. This will allow us to go back to a saved value, you can manipulate this by adding or removing an integer to fast forward / rewind.

<a href="#" onClick="setTimeout("player.sendEvent('SEEK',savetime)",2000);
">Go to the stored timeline position</a>

Why the setTimeout? Well if you are hiding your jwplayer so you can work around the rest of the screen and you want to bring it back at the same timeline position this will allow the DOM time to reload the element back in. Ideally I would of used a listener here and pushed the value back on “state ready”. Feel free to adjust the code so it does that and leave a copy in the comments 🙂

Futube Youtube player review

Posted on by John McLear

Futube(Fubra Video) is a tool provided by Fubra and it’s a perfect example of a company providing some code that isn’t fit for purpose and it strikes me the company has no means to maintain it. This is also a perfect example of why open source is so important.

“Futube is a free to use flv video player that simplifies the default user interface of YouTube videos.”

Some things Futube doesn’t do that it really needs to:
No animation or message displaying “loading” so users are under impression site isn’t working.
Full screen mode doesn’t remove the controls from the page.
No ability to change font face
No ability to easily access play time / position of a video
No ability to store video state. This is an issue if you need to momentarily hide the video for any reason, if you do hide it and bring it back the video will go into “stopped” state and when you show the video it will be back at the start.

Some things Futube does do really well:
Easy embed & color customization
Harder to click on youtube link
Simple UI

Hopefully the developer of Futube will fix the 3 issues I have before too long!

Top 5 Edu games of 2010

Posted on by primaryt

A good educational game isn’t a linear process, a good game engages children to a point where the game itself becomes a consumable and desirable entity away from the influence of teachers & educators.  A lot of game creators miss this point, pupils therefore learn to do and not to think.  This is detrimental to learning in my opinion and it only encourages assessment models that don’t truly reflect a pupils ability to be a good citizen.   We should never forget that no matter how we dress it up, Multiple choice tests are not fun and single choice is the opposite of fun.

In 2010 due to an influx of game creation tools educators began thinking about how they could create games and this is great but it increased the amount of hot air single choice, linear games to a new all time high.   5 games this year really set themselves apart from the hot air that was released, here they are:

Admongo

Admongo is a side scroller designed to teach kids to be aware of marketing and advertisements. Consumerism is a huge driving force in today’s conflicts and I believe we need to be mindful of why we consume certain things.

Jet Ski Addition

This game is great because it encourages competitive learning.

Mystery Island

Mystery Island gives pupils the ability to find their own way through a world and encourages adventuring whilst solving micro problems by delivering packages.  This is probably my personal least favourite yet it is one the most popular games with kids so I thought I’d throw it in!

Geosense

I’m not gonna lie, this game sucks you in, prepare to waste a good 15 minutes increasing your knowledge of locations on the Earth.

Light Bot

Pick your way to solve the control problem. This game teaches the logic behind control and movement. It is actually quite linear but it requires strategic thinking and planning. Light Bot is way more fun than multiple choice and that’s why I like it 🙂

Hide images from div if they don’t fit

Posted on by John McLear

The title of this article is horribly lame but it’s what (after a few beers) I appear to have Google’d for..  Basically you have a div, 800px wide and you have 16 images, all 100px wide and you want to only leave 8 images in the active dom.  I bet you are thinking..  Yea just use 

overflow:hidden

..  Sure..  But you can still tab to the images and that sucks if you are making a TV website where the users may be using a remote control…

So here’s how I did it..  Using javascript..

  1. Set an incremental id value on each image, IE img 
    id=image1

    …  image2, image3 etc.

  2. Get width of div
  3. Divide width by amount of px.
  4. Now you have total amount of objects you can show
  5. For each of the 16 images if the amount of images available is less than 16 then set it to 
    display:inline;

    else set it to 

    display:none;

Display none stops the object from existing on the screen what so ever..  It’s not hidden so you can’t tab to it..  This also works with divs that can be resized..  What you do is listen for resize, when a resize event is triggered get the new div width and run the function to hide/display the images..

If you know a better/cleaner way of doing this then please let me know 🙂