Timed Metadata in HLS

To access these features, Upgrade Now

The JW Player not only works great with HLS video streaming but for audio only streams. Many radio broadcasters use the JW Player to stream their stations.

Example

The following example is an audio only file on demand served from a Wowza Media server.

var playerInstance = jwplayer("container");
playerInstance.setup({
      file: "//[wowza.server]:1935/vod/mp4:audio/file.m4a/playlist.m3u8",
      image: 'sintel.jpg'
});
 

An introduction to timed metadata

The above example uses a simple audio HLS stream. However, it is possible to enhance video or audio streams with additional information. This information is known as “metadata”. Metadata is timed information that is included during the creation of the stream. With this, it is possible to create more interactive, immersive experiences on web pages. Some examples include:

  • Creating a scoreboard on a web page that updates over the course of a game
  • Displaying artist and song information during audio streams
  • Inserting ad breaks in streams
  • Offering subtitles to both live and on-demand content(As 608 Captions)

In all of these cases, the data is added into stream segments at the time of the stream’s creation, and can then be extracted/acted upon at the client level. A basic visualization of metadata for an HTTP stream can be seen here:

How to extract metadata

Extracting information from streams can be accomplished by using the JW Player on(‘meta’) API call on the client-side. This information is then provided as a metadata JSON block. So, getting something like a title out of the metadata and printing it to a console would be accomplished with something like:

playerInstance.on('meta', function(event){
if(event.metadata){
console.log(event.metadata);
}

Assuming this information existed in the stream, you would then receive a block of JSON in your console similar to:

"title": “Mary had a Little Lamb”
"artist": “Nursery Rhyme”
"url": “http://nurseryrhymestream.com/albumcovers/mary.jpg

Whenever additional metadata is discovered, the above code will print it to our console as well.

Working with Metadata

The exact implementation of metadata can vary, depending on what you’re looking to accomplish. If your sample stream mimics the above metadata, perhaps you would like to display a song’s title, artist, and album art on your web page. Below, we’ll set up a few HTML elements and populate them with the information from our stream.

//Code to refer to our HTML elements
var titleHTML = document.getElementById('title');
var artistHTML = document.getElementById('artist');
var imageHTML = document.getElementById('image');

//Our on('meta') call
jwplayer().on('meta', function(event){
//Creating our title, artist, and album art vars
var thisTitle = event.metadata.title;
var thisArtist = event.metadata.artist;
var thisImage = event.metadata.url;

//Check if data exists
if(thisTitle){
//populate the HTML for our title, artist, and album
titleHTML.innerHTML = thisTitle;
}
if(thisArtist){
artistHTML.innerHTML = thisArtist;
}
if(thisImage){
imageHTML.innerHTML = '<img height="300" src="'+thisImage+'" width="300" />';
}
});

The full results of this implementation can be seen below:

Loading the player...

Title:

 

Artist:

 

Did you find this article helpful?

Please log in to rate this article.