imaginary-player

npm module for pseudo-streaming/broadcasting

Motivation

Broadcasting is a complex problem (such that every visitor would be sychronized to watch the same moment). Luckly with HTML5 <video> and Media Fragments URI, the client can do most of this work -- we just need to supply where something is currently playing. 😎 Hence this module is a fancy timer in essence. See below for HTML <video> support.

Usage examples

First things first. Install the package.

npm install imaginary-player [--save]

You will need to initialize the playlist like below. Each playlist item can be your arbitrary data but it must respond to the duration property.

var player = require('imaginary-player');

player.playlist([
  { duration: '31:29', title: 'All Arsenal Goals 2012/13',                        location: '1.webm' },
  { duration: '15:00', title: 'The Greatest Ever Arsenal Player - Thierry Henry', location: '2.webm' },
  { duration: '8:17',  title: 'Kieran Gibbs - Still Breathing (2012/13)',         location: '3.webm' }
]).play();

Alternatively, you can defer calling play() until later. play() will start playing from the beginning of the playlist and loop.

player.play();

You can also specify which index it should start playing from. play() is equivalent to play(0).

player.play(1);

Specify which attribute should show up in the logs:

player.logAttribute('title');
// 1371408021917 now playing: All Arsenal Goals 2012/13

Instead of playing in the order of the original playlist, the player can shuffle at the beginning of each playthrough. This is nice for when your media playlist becomes much too predictable.

player.shuffle(true);
// at the beginning, shuffling...
// 1371408021917 now playing: The Greatest Ever Arsenal Player - Thierry Henry

Once you have it playing, you can now() ask for what/where it's currently playing. Using the popular web application framework express, you can serve that information like below:

var express = require('express');

var app = express();

app.get('/where', function(req, res) {
  res.send( player.now() );
});

app.listen(3000);

This would produce a response like below. The played attribute represents the current playing marker in seconds.

{
  "duration": "31:29",
  "title": "All Arsenal Goals 2012/13",
  "location": "1.webm",
  "played": 589.743
}

Your client can then consume that information like so:

var screen = document.querySelector('your-<video>-element'); // with autoplay attribute maybe?

var now = res.body; // server-returned response
screen.src = now.location + "#t=" + now.played;

About HTML5 video support

I'm not a video / encoding format expert. This article from diveintohtml5 gives good insight. ####tl;dr

• .webm (VP8 + Vorbis)
• .mp4 (H.264 + AAC)
• .ogg (Theora + Vorbis)

Fun facts

By coincidence 😉, Jay-Z has an awesome track named Imaginary Player.