Category: Javascript

JW FLV Player and Red5 apparent buffering bug

Posted on by
Update 12-18-09: Longtailvideo has apparently resolved this bug with its player v.4.7beta. At this time v. 5 does NOT have the fix in it. The code changes that fixed the bug can be seen here: [Changes to RTMPModel.as]

A few months ago, we installed Red5 0.7.0 on a Windows server to stream Flash video inside the firewall. This server is used mainly to stream short clips that are embedded in learning modules.

The JW FLV player v. 4.6 is included in the learning module template and enables us to display the videos with a high degree of flexibility.

Picture 41.jpeg

Example of a player that contains multiple short video clips.
The player generates a navigation listing on the right from the XML playlist.

Continue reading

Using toggle javascripts to build an FAQ page.

Posted on by

FAQ pages are sometimes requested in our learning modules so we’ve built in the scripts to create an easy- to-read, easy-to-use FAQ by applying simple CSS classes to elements on the page. When the FAQ page loads, all the questions appear in a collapsed view which can be quickly scanned.

Screen shot 2009-10-23 at 3.21.54 PM.jpg

On clicking any question, its associated answer expands and pushes the rest of the questions down. When another question is clicked, the first answer closes and the new answer opens up.

Screen shot 2009-10-23 at 3.22.00 PM.jpg

Here’s how to add this type of FAQ to your own HTML pages.

Continue reading

JW FLV player that switches playlists on the fly

Posted on by

The JW FLV player is a versatile, customizable and scriptable flash video player, available from Longtailvideo.com. The player was recently upgraded, and many details in the scripting and playlists had to change to remain compatible. I’m posting examples of some of the players I’ve created lately, using the latest version of the player and SWFObject.

Versions

  • Player: JW FLV player 4.6
  • SWFObject: 2.1
  • Red5 Streaming server using RTMPT or RTMP

    • This is an example of a current-version player that changes playlists on the fly when you click a link or button.

    I can’t show you a working demo because I don’t have an external Red5 server but here is how it looks. When the page loads, the player loads the first playlist.

    Safari003.jpg

    Continue reading

    JW Player example: two streaming flash players that clip to hard stop in a single page

    Posted on by
    NOTE this has been superceded by these articles:

    The authors of our learning modules often want to embed one one or more videos embedded in a page. A typical request is to be able to “edit” the video using a duration set in the playist, so that the player shows only a few seconds of the video, focusing on only the relevant material for the current page.

    Continue reading

    Associative Arrays

    Posted on by

    If you’ve used javascript much, you are probably familiar with arrays. Typically arrays are used to manage lists of items. I frequently use arrays for maintaining information about the state of pages and quiz questions in learning modules, storing a series of properties for each item.

    But, there is a problem. To find the particular item you want to use, you must loop through the whole array. Sometimes you can get yourself into a situation requiring multiple loops to get one item of information and performance will suffer.

    I recently got to wondering if there weren’t a way to jump straight to the desired item, if the ID of the item were known. Yes there is!

    Enter “associative arrays“. Associative arrays allow you to index items by any string key, not just the usual arbitrary index numbers. So you can go straight to the exact item by name without testing for property matches while looping through the array.

    Continue reading

    Caching in Google Gadgets

    Posted on by

    When creating a Google gadget that pulls data from an XML file, you will probably notice that the data doesn’t update right away in the gadget even after you have changed the file. This caching behavior can make it very difficult to troubleshoot, and you’ll probably want to shut it off while developing.
    It took me a while to find this so I’m posting it here:

    From Google’s “Refreshing the Cache” instructions:

    
To make sure your gadget fetches fresh new content at least once per interval, simply specify a value (measured in seconds) for the refreshInterval parameter. For example:
// Fetch fresh content every half hour
_IG_FetchContent("http://news.google.com/?output=rss", callback, { refreshInterval: (60 * 30) });

// Fetch fresh content every 10 minutes
_IG_FetchContent("http://news.google.com/?output=rss", callback, { refreshInterval: (60 * 10) });

// Fetch fresh content every 30 seconds
_IG_FetchContent("http://news.google.com/?output=rss", callback, { refreshInterval: 30 });

// Disable caching completely and fetch fresh content every time --  !! Try to avoid using this !!
_IG_FetchContent("http://news.google.com/?output=rss", callback, { refreshInterval: 0 });

function callback(response) { ... }
    Continue reading