Hello readers!
I'm Carina, and I'm responsible for web development here at DDVTech/MistServer. Today, I'll be talking to you about our solution for viewing streams on a website: the meta-player.

Why we've built our own player

Our meta-player has started its life as part of the MistServer Management Interface - a simple script switching between a video tag or flash object - designed only to preview configured streams. It soon became clear that some of our clients wanted to use the player on their own website(s), and to accommodate them we added a copiable embed code to the Management Interface.
However, we felt that a player running in production had to comply with a higher standard than something that just enables our customers to check if a stream is working. It had to do more than just work: it had to keep on playing through stream hiccups while having a similar appearance regardless of playback mode. Thus it was decided to rework our meta-player into its current form, as it was released with MistServer 2.7 in autumn 2016.

What makes our player different

The new meta-player was designed as a shell around other, existing players. It loops over the players it has available, and asks which of the protocols MistServer is broadcasting the player can play in the current browser, if any. It then constructs the selected player, translating specified options (autoplay, which tracks to use, etc) into a format that that particular player understands. It also adds a control bar to provide a consistent interface.

But the meta-player's task is not done yet: it monitors if the stream is playing smoothly, and, if it isn't, it can ask the viewer if they want to reload or switch to another playback method.

Because the meta-player only has to support MistServer as its streaming source, it can integrate more closely with our meta information. It will detect tracks, subtitles and more without requiring additional configuration.

Usage and customisation

The easiest way to get started with our meta-player is through the MistServer Management Interface. Configure the stream you want to display, and visit the Preview tab to see it being played by the meta-player. Then click the 'Embed' button. Under the heading 'embed code' you'll find a box with html code to paste to your website where you want to display the video.
Underneath you'll find a bunch of options for basic configuration of your player. The integrated help can explain what the options do.

If you want to place your video dynamically through Javascript, just include

http:///player.js

on the webpage and call

mistPlay("",options);

, where

options

is an object containing additional configuration. It's easiest to create this through the Management Interface and copy it from the embed code box.
Not shown in the Management Interface is the callback option. If this is set to a function, the function will be executed after the player is built.
The

mistPlay

function will return a player object, which contains methods such as

play()

,

unload()

, and more.
Options can also be defined globally in the variable

mistoptions

.
It's possible to change the way the player looks through CSS and to do minor tweaks (to change player priority for example) with javascript.
An example implementation can be found here.

More advanced users can write their own javascript code to add more players to the meta-player, or we could do it for you. In either case, you'll probably want to contact us.

The quest to improve

Because of the huge range of browsers across different devices on the market nowadays, optimizing playback on all of them is quite a challenge. We will continue to tweak and improve the meta-player's performance in a never ending effort as the browsers in use are sure to continue evolving.
On top of that, there is always room for improvement. For instance, from the next release (2.10) on, the sound volume control on the control bar is changed from a linear range to a quadratic one. This may seem trivial, but it enables users to more accurately control their volume if it is relatively low: the difference between muted and the minimum volume is much smaller.
If there is a feature you think should be added to our meta-player, please let us know.

For our next blog post you can look forward to Jaron, who will talk about MP4 live streaming.