Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser. Upcoming version 10 of Internet Explorer should also handle it.

<video/>

Bernard Lange
@gustaff_weldon

The markup

Can I use video?

mp4 WebM
Chrome ✓ ✓
Firefox ✓ ✓
Internet Explorer ✓
Safari ✓
iOS ✓
Android ✓ ✓*
Opera ✓

Video Support test
HTML5 Video Formats Details

mp4

webm

ogg*

Miro Video Converter

Video For Everybody

Download video: MP4 format | Ogg format | WebM format

Video + JS

Video supported?

return !!document.createElement( "video" ).canPlayType;

Video format supported?


var videoElement = document.createElement( "video" )
return videoElement.canPlayType( "video/webm" );

"probably", "maybe", ""

Scripting video


videoElement.addEventListener( eventName, listener, false )
videoElement.load();
videoElement.play();
videoElement.pause();
etc...

Playground page

Fullscreen support


videoElement.requestFullscreen()
videoElement.exitFullscreen()
element.addEventListener('fullscreeneventchange', listener , true);

See more details on fullscreen API usage

Players

MediaElement.js, VideoJs, FlowPlayer, JWPlayer and more.

WebVTT: Subtitles for the web

SRT -> VVT


var video = document.getElementById( "gum" );
video.autoplay = true; // Make sure we're not frozen!

// Note: not using vendor prefixes!
navigator.getUserMedia({video: true}, function(stream) {
    video.src = window.URL.createObjectURL(stream);
}, function(e) {
    console.error(e);
});

More demos

References

Takeaways

Questions?

Thank you

Bernard Lange
@gustaff_weldon

Use a spacebar or arrow keys to navigate