requestShowMedia.js - A Presentation API prollyfill for the HTMLMediaElement

Hi All,

In the spirit of experimentation I wrote a Presentation API prollyfill (= a polyfill for a not yet standardized API) for the HTMLMediaElement to get a feel of the API ergonomics.

The demo is at (tested with the latest desktop Chrome, Firefox, Safari):

  http://webscreens.github.io/requestshowmedia/demo/

The video files used in the demo are hosted on GitHub pages too, so don’t expect blazingly fast download speeds. If the demo misbehaves, try a more modern browser :-)

For more information, please consult the GitHub repo at:

  https://github.com/webscreens/requestshowmedia

Here’s what this is about:

Using the requestShowMedia.js prollyfill you can display any <video> contained on a web page on a second screen and control its playback using the standard HTMLMediaElement methods play(), pause(), and fastSeek(time).

The demo works in modern browsers by emulating a second screen using a new window. If an experimental Chromium build is used (see the demo page or the GH repo for details on how to get one) the video is displayed on a real second screen.

In terms of code, this is how a web developer might use the API:

<script>
var v = document.querySelector('video');

// Display the video on a second screen.
v.requestShow();

// Use the standard HTMLMediaElement methods to control the playback.
v.play();
v.pause();
v.fastSeek(time);
</script>

To sum up this experiment, it seems we’re able to prollyfill this functionality on top of the current Presentation API nicely. While we evolve the Presentation API, I plan to keep this prollyfill in sync, and hope that this dogfooding approach helps us iron out rough edges in the Presentation API early on. I encourage also other participants to share their early experiments with the group.

Thanks,

-Anssi

Received on Tuesday, 17 June 2014 13:49:26 UTC