Embed Size (px)
DESCRIPTION
HTML5 Audio and Video. Credits : Dr. Jay Urbain https:// developer.mozilla.org/en-US/docs/HTML/Using_HTML5_audio_and_video. History of Video Support in Browsers. 2000: Had to install multiple plugins : RealPlayer, QuickTime, WMP 2004-2008: Flash becomes dominant - PowerPoint PPT Presentation
Citation preview
Instructor Evaluation Time!
• Do it!
1
2
HTML5 Audio and Video
Credits: Dr. Jay Urbainhttps://developer.mozilla.org/en-US/docs/HTML/Using_HTML5_audio_and_video
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• 2015: HTML5 has ~91% user support
3
See caniuse.com
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 has become widely adopted
– Flash is dead (and iOS never supported it)– Smartphones support it
4
<!DOCTYPE html><html><body><video width="320" height="240" controls poster=“mallard.jpg” autoplay> <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></body></html>
5
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 %.
<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.
The controls attribute adds video controls, like play, pause, and volume.
The poster attribute indicates the first frame to appear. Autoplay – guess!
<video> Demohttp://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
6
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,…
7
(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)
8
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
9
Video Formats and Browser SupportUntil very recently, there was not a single Codec supported by all browsers!
10
See caniuse.com
11
MIME Types for Video Formats
12
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/
13
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
14
<!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> <script> var myVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> </body> </html> 15
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
Manipulating <video> via JS events
HTML5 Video Tags
16
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/treeOfLife/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> 17
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
introduction00:02.000 --> 00:05.000Is this LOTR:The Two Towers?
Lead character00:06.000 --> 00:08.000That's not Frodo!
18
hours:minutes:seconds:millisecondsCue – text can include HTML
http://www.html5rocks.com/en/tutorials/track/basics/
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
19
Cues support HTML:
20
Cues can also use JSON:
21
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.
22
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>
23
Audio Formats and Browser Support
24
MIME Types for Audio Formats
25
HTML5 Audio Tags
26
<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.
27
<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 playExample:<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_all28
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.
29
Canvas Gradients
• http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop
30
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.
31
Canvas Gradients• Using createLinearGradient():var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_grad32
Canvas Gradients & Canvas Video
• Interactive Canvas Gradients:• http://html5demos.com/canvas-grad
• Video Canvas:• http://html5demos.com/video-canvas
33
![HTML5 Video vs. Flash Video [paper]](https://img.pdfslide.us/doc/110x75/54b3799a4a7959f2208b46b4/html5-video-vs-flash-video-paper.jpg)
