The ASP.NET Repeater Control

The ASP.NET Repeater Control Tuesday, January 29, 2008 | Microsoft & .NET The Repeater control is a data-bound control that uses templates to display data. The Repeater control works by looping through the records in your data source and then r...

JSONVid: Pure JavaScript Video Player Print E-mail
User Rating: / 0

Jacob Seidelin went on a ( crazy :) ) mission to create a pure JavaScript video player that didn't use Flash:

My first thought was to read binary video files using a technique like the Andy Na posted about here, figuring that there must be some really simple to parse video formats around, but I soon changed directions and decided to make up a whole new video format. Enter.. JSONVid. Using a player like mplayer, it is easy to export all frames in a movie clip to individual jpeg files, and using whichever language you prefer it is also fairly trivial to collect these files, base64 encode the bunch of them and throw them all together in a nice JSON file (I used this PHP script).

The format uses good ole data: URLs, which are finally supported in IE with version 8:


      frm : "JSVID",   // format id tag
      ver : 1,  // version number of format
      width : 320,  // width of video
      height : 240,  // height of video
      rate : 15,  // framerate (frames per second)
      frames : 495,  // number of frames in file
      data : {
        video : [ // here comes 495 data:uris containing base64 encoded jpeg image frames
          "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7gAOQWRv ... ",
          "data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/7gAOQWRv ... ",

Then he created the player:

First strategy was to create an Image object for each frame and render it on a canvas element using drawImage(). That worked fine and performance was nice (although Opera used a lot of CPU), but I figured I'd try just using a regular image tag and just change the src property to another data:uri each frame. The change was barely noticeably in Firefox and Safari and it ran a bit better in Opera, so I lost the canvas and stuck with plain old images.

Now, it seems that Firefox will eat up all the memory in the world if you keep throwing new data:uris at the same image tag, which led to another change, so for each frame a new Image object was created and saved for later and as the video played, the previous frame Image was replaced by the new Image object. That seemed to work, but introduced an annoying delay as all these Image objects were created before playing, so I ended up moving the Image creation to actual render cycle where it simply checks if the frame Image has already been created, and if not, creates it.

You can now get going with HTML such as:

  2. <script src="jsvideo.js" type="text/javascript"></script>
  3. </head>
  4. <div videosrc="myvideo.jsvid" videoautoplay="true"></div>
  5. </body>
  6. </html>

There are a couple of tests to play with. It was also pointed out that maybe an animated gif/png would be a choice (without controls), and of course, Flash is still the best choice here, until we get video support in most browsers.

Read more at:
< Prev   Next >