HTML5 Multimedia

The <video> element

The video element replaces embedded flash objects. Example: http://jsbin.com/hobeke/1/edit?html,output

It is part of the DOM and can be influenced with javascript and CSS.

Videos from sites like youtube cannot be directly embedded because of commercial reasons, instead use a iframe: https://www.youtube.com/watch?v=ZH1XOsv8Oyo

Good practice: add text that is displayed in place of the video when the browser does not support the <video> element.

Codecs

The recommended codec is H264/mp4. For more compatibility provide several versions of your video with different encodings.

Suggested readings

The <audio> element

Very similiar to the video element. Example: http://jsbin.com/gazoye/8/edit?html,output

Supports sound effects: http://www.w3.org/TR/webaudio/

Good practice: propose to download the audio file if the <audio> element is not supported.

Attributes of <audio> and <video>

Attributes can be added like so: <video preload="none">

Good practice: use preload="none" to avoid unexpected data charges.

Other attributes:

src: source of content.
controls: if this attribute is present, the browser displays its own controls for audio playback and volume.
autoplay: tells the browser to start playing the audio stream automatically as soon as the page is ready, please read details in the above table.
loop: indicates to play the audio stream in loop mode (start again when finished).

Examples

Styling with CSS.
Resize and rotate.
Fullscreen (WARNING, starts loading video immediately): http://jsbin.com/yoquli/2/edit http://jsbin.com/yurinu/4/edit
Events and properties.
Custom controls
Playlist
Transformable video.
Tracking events.
Buffering.
Custom SVG controls.
Custom video player.

Projects

Project 1 (very easy): try to find the "enhanced HTML5 video players" described in the course and try to use one of them to play a video + use some of the possible customizations: add a logo, choose a theme, etc.
Project 2 (easy): try to write a video or an audio player with some custom buttons for play/stop/etc. Add to your custom player a mean to play several videos one after another - what we call a playlist -, etc.
Project 3 (with JavaScript knowledge): try to play a video file or an audio file with an external synchronization. Use the progress event and the currentTime property from the audio and video objects you can manipulate with the JavaScript API described in the course. For example, please display some text aside the video, and/or display a wikipedia page in an iframe, and/or display a google map if you know how to do it.

Subtitles

The new HTML5 <track> element is useful for adding closed captions, subtitles, descriptions, and metadata to your videos.

Subtitles are for words whereas closed captions are for general sounds.

.vtt files cannot be linked with a file:// URL.

http://jsbin.com/luyazi/2/edit?html,output

External resources:

The WebVTT format is used for subtitles.

http://dev.w3.org/html5/webvtt/ https://developer.mozilla.org/fr/docs/Web/API/Web_Video_Text_Tracks_Format

yellow: Opensource software for video encoding: https://handbrake.fr/

http://www.universalsubtitles.org/

Subtitles can be styled: http://jsbin.com/lopudu/5/edit?html,output

Extract from .vtt file:


00:00:06.000 --> 00:00:10.000 line:5%

This cue is positioned at the top of the video

00:00:11.000 --> 00:00:15.000 position:5% align:start

This cue is positioned at the left side of the video.

00:00:16.000 --> 00:00:20.000 position:95% align:end

And this one ate the right side.

To read the whole file find the link in the lopudu5 example above.

Use <v Name> to color code subtitles according to speaker.

https://developer.mozilla.org/fr/docs/Web/API/Web_Video_Text_Tracks_Format

Chapters can be defined by setting kind="chapters" in the track element.

A jacascript API is associated with the track element, with it one can navigate the video or modify page content based on video progress.

Example with map that syncs to video (WARNING: starts loading instantly).

This example shows how we manage to render music scores in real time as the video plays: http://youtu.be/JyNSyL-MmFI

Project ideas

Project 1 (very easy): Add some subtitles of your own on one of your videos. Share your step by step experience. This will be a valuable resource for your classmates.
Project 2 (easy): Try to style some of the subtitles, set their position, etc.
Project 3 (with JavaScript knowledge): Try to write a karaoke player with a small list of songs we can choose from.

Enchanced media players

Video

http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/How-to-Create-Interactive-HTML5-Video-97461.aspx http://www.iheni.com/accessible-media-player-resources/

Using a plain video element should be the default choice as the video element is more flexible and consumes less of the users resources.

Audio

http://smashinghub.com/10-best-html5-audio-players.htm http://kolber.github.io/audiojs/ http://www.peakplayer.com/

Optional projects

Project 1 (very easy): prepare a Web page somewhere that uses some of the enhanced players, and write some explanations on how you created the page (JavaScript files to include, options to choose from, etc.)

Project 2 (more work): make a video of yourself that explains how you made the video, added subtitles, chose the player, hosted the files, etc.

The getUserMedia API

Webcam

http://www.w3.org/TR/mediacapture-streams/

Set the src of a video element to the video stream coming from the webcam.

http://jsbin.com/vovuweyogu/1/edit Starting and stopping. CSS effects. Snapshot. https://dev.opera.com/articles/playing-with-html5-video-and-getusermedia/ http://html5-demos.appspot.com/static/getusermedia/photobooth.html http://neave.com/webcam/html5/ http://paint.gexsoft.com/

Microphone

https://webaudiodemos.appspot.com/