HTML5: Audio/Video
HTML5 Audio and Video
Credits:
Dr. Jay Urbain https://developer.mozilla.org/en-US/docs/HTML/Using_HTML5_audio_and_video
1
History of Video Support in Browsers
• 2000: Had to install multiple plugins:
RealPlayer, QuickTime, WMP
• 2004-2008: Flash becomes dominant
• 2009: HTML5 announces native video support
• 2013: HTML5 has ~80% user support
2
HTML5 Video
• Runs natively in the browser
– No plug-in required
• Simpler coding
– No need to have different coding for different formats
• Can be manipulated just like any other DOM element
• It’s a standard and becoming widely adopted
– Flash is dead (and iOS never supported it)
– Smartphones support it
3
If height and width are set, the space required for the video is reserved when the page is loaded. Without these attributes, the browser does not know the size of the video, and is likely to change during loading. The size can also be specified in %.
<!DOCTYPE html>
<html>
<body>
</video>
</body>
</html>
The controls attribute adds video controls, like play, pause, and volume.
<video width="320" height="240" controls
The poster attribute indicates the poster=“mallard.jpg” autoplay> first frame to appear. Autoplay – guess!
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
<video> allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format
Insert text content between the <video> tags for browsers that do not support the <video> element.
4
<video> Demo
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_v ideo_all
5
Video Containers
• A video file is a “container”, which contains
– Video stream
– Audio stream
– Metadata (“table of contents”)
• The streams are combined during video playback
• Metadata includes
– Title, subtitle, cover art, captioning info,…
6
(Current) Video Container File Formats
• MP4 ( video_file.mp4)
– H.264 (video codec format) + AAC (audio codec format)
• Ogg (video_file.org, .ogv, or .ogg)
– Theora (video codec format) + Vorbis (audio codec format)
• WebM ( video_file.webm )
– VP8 (video codec format) + Vorbis (audio codec format)
7
What is a Codec?
Codecs (Coders/Decoders) are algorithms used to encode and decode a particular video/audio stream so that they can played back
• Why codecs ?
– Raw media files too big to transmit over the internet
• Example video codecs
– H.264, VP8, Ogg Theora
• Example audio codecs
– AAC, MPEC-3, Ogg Vorbis
8
Video Formats and Browser Support
There is not a single Codec that is currently supported by all browser!
See caniuse.com
9
MIME Types for Video Formats
10
Encoding Tools
• Firefogg
– Video and audio encoding for Firefox
– http://firefogg.org/
• Handbrake .fr
– An open source multiplatform video transcoder
– http://handbrake.fr/
• Zencoder
– API-based online video encoding service
– http://zencoder.com
• Microvideo Converter
– Video converter
– http://www.mirovideoconverter.com/
11
HTML5 <video> - DOM Methods and
Properties
• HTML5 has DOM methods, properties, and events for the
<video> and <audio> elements.
• Allows you to manipulate <video> and <audio> elements using JavaScript.
Demo:
• http://www.w3.org/2010/05/video/mediaevents.html
12
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick=" playPause() ">Play/Pause</button>
<br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
Manipulating <video> via JS events
<script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause();
}
</script>
</body> </html> http://www.w3schools.com/html/tryit.asp?filename=tryht ml5_video_js_prop
13
HTML5 Video Tags
14
HTML5 <track> subelement
• Provides a standardized way to add subtitles, captions, screen reader descriptions and chapters to video and audio.
• Tracks can be used for timed metadata.
• The source data for each track element is a text file made up of a list of timed cues .
• Cues can include data in formats such as HTML, JSON, or CSV.
• Track element is currently available in Internet Explorer 10 and
Google Chrome. Firefox support is not yet implemented.
• http://www.html5rocks.com/en/tutorials/track/basics/treeOfLif e/video/developerStories-en.webm
<video id="video" poster="movietime.jpg" width="640" height="480" controls >
<source src="sintel.ogv">
<track kind="captions" src="sintel-en.vtt" srclang="en" label="English captions" default /> -->
</video>
15
http://www.html5rocks.com/en/tutorials/track/basics/
Track kind and src attributes
• Attribute for kind can be subtitles, captions, descriptions, chapters or metadata.
• The src attribute points to a text file that holds data for timed track cues.
• Chrome supports WebVTT, which looks like this:
WEBVTT Cue – text can include HTML hours:minutes:seconds:milliseconds introduction
00:02.000 --> 00:05.000
Is this LOTR:The Two Towers?
Lead character
00:06.000 --> 00:08.000
That's not Frodo!
16
Five types of tracks
• Subtitles - Translations of the dialogue in the video
• Captions - Transcription of the dialogue, sound effects, musical cues, and other audio information
• Chapters - Used to create navigation within the video,
Typically they're in the form of a list of chapters that the viewer can click on to go to a specific chapter.
• Descriptions (not supported yet) - Text descriptions of what's happening in the video
• Metadata (not supported yet) - Tracks that have data meant for javascript to parse and do something with.
These aren't shown to the user
17
Cues support HTML:
18
Cues can also use JSON:
19
Search and deep navigation
• Tracks can also add value to audio and video by making search easier, more powerful and more precise.
• Cues include text that can be indexed, and a start time that signifies the temporal 'location' of content within media.
20
HTML5 Audio
<!DOCTYPE html>
<html>
<body>
<audio controls loop autoplay>
<source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
21
Audio Formats and Browser Support
22
MIME Types for Audio Formats
23
HTML5 Audio Tags
24
<audio> attributes
• The control attribute adds audio controls, like play, pause, and volume.
• Insert text content between the <audio> tags for browsers that do not support the <audio> element.
• <audio> allows multiple <source> elements.
• <source> elements can link to different audio files. The browser will use the first recognized format.
• <audio> tag supports the full range of standard attributes in
HTML5.
25
<audio> attributes
• New attributes for the <audio> tag:
– controls - controls for the audio file will be included on the page
– loop - the audio will loop and play again once it has finished
– preload - this one has three parameters: auto, which plays once it has loaded, metadata, which only displays the data associated with the audio file, and none, which means it will not preload
– src - the URL of the audio file you wish to play
Example:
<audio loop="loop" autoplay="autoplay" controls="controls">
<source src="music.ogg" />
<source src="music.mp3" />
</audio> http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
26
Manipulating video using canvas
• By combining the capabilities of the <video> element with the <canvas> element, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
27
Canvas Gradients
• http://www.w3schools.com/html/tryit.asp?fil
ename=tryhtml5_video_js_prop
28
Canvas Gradients
• Shapes on the canvas are not limited to solid colors.
• Gradients can be used to fill rectangles, circles, lines, text, etc.
• There are two different types of gradients:
– createLinearGradient(x,y,x1,y1) - Creates a linear gradient
– createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient
• Add two or more color stops to Gradient object:
– addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
• To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.
29
Canvas Gradients
• Using createLinearGradient(): var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");
// Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white");
// Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_grad
30
Canvas Gradients & Canvas Video
• Interactive Canvas Gradients:
• http://html5demos.com/canvas-grad
• Video Canvas:
• http://html5demos.com/video-canvas
31
