HTML5: Audio/Video

Transcript 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>
The controls attribute adds video controls, like
play, pause, and volume.
<body>
<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>
<video> allows multiple <source> elements. <source>
elements can link to different video files. The browser will
</body>
use the first recognized format
</html>
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>
Manipulating <video> via JS events
</div>
<script>
var myVideo=document.getElementById("video1");
function playPause() {
if (myVideo.paused) myVideo.play();
else myVideo.pause();
http://www.w3schools.com/html/tryit.asp?filename=tryht
}
ml5_video_js_prop
</script>
</body> </html>
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_grad30
Canvas Gradients & Canvas Video
• Interactive Canvas Gradients:
• http://html5demos.com/canvas-grad
• Video Canvas:
• http://html5demos.com/video-canvas
31