pseudo-streaming/broadcasting media player
npm module for pseudo-streaming/broadcasting
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
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
var player = require'imaginary-player';playerplaylistduration: '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.
You can also specify which index it should start playing from.
play() is equivalent to
Specify which attribute should show up in the logs:
playerlogAttribute'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.
playershuffletrue;// 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;appget'/where'ressend playernow ;;applisten3000;
This would produce a response like below. The
played attribute represents the current playing marker in seconds.
Your client can then consume that information like so:
var screen = documentquerySelector'your-<video>-element'; // with autoplay attribute maybe?var now = resbody; // server-returned responsescreensrc = nowlocation + "#t=" + nowplayed;
I'm not a video / encoding format expert. This article from diveintohtml5 gives good insight.
By coincidence 😉, Jay-Z has an awesome track named Imaginary Player.