1 / 31

HTML5 Audio and Video

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

abner
Télécharger la présentation

HTML5 Audio and Video

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. HTML5 Audio and Video Credits: Dr. Jay Urbain https://developer.mozilla.org/en-US/docs/HTML/Using_HTML5_audio_and_video

  2. 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

  3. 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

  4. 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 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> The controls attribute adds video controls, like play, pause, and volume. The poster attribute indicates the first frame to appear. Autoplay – guess! <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.

  5. <video> Demo http://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, OggTheora • Example audio codecs • AAC, MPEC-3, OggVorbis

  9. Video Formats and Browser SupportThere is not a single Codec that is currently supported by all browser! See caniuse.com

  10. MIME Types for Video Formats

  11. 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/

  12. 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

  13. <!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> varmyVideo=document.getElementById("video1"); function playPause() { if (myVideo.paused) myVideo.play(); else myVideo.pause(); } </script> </body> </html> Manipulating <video> via JS events http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

  14. HTML5 Video Tags

  15. 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 timedmetadata. • 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 andGoogle 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>

  16. http://www.html5rocks.com/en/tutorials/track/basics/ Track kindand 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 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! Cue – text can include HTML hours:minutes:seconds:milliseconds

  17. 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 javascriptto parse and do something with. These aren't shown to the user

  18. Cues support HTML:

  19. Cues can also use JSON:

  20. 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. 

  21. 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>

  22. Audio Formats and Browser Support

  23. MIME Types for Audio Formats

  24. HTML5 Audio Tags

  25. <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.

  26. <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

  27. 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. 

  28. Canvas Gradients • http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_js_prop

  29. 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.

  30. Canvas Gradients • Using createLinearGradient(): var c=document.getElementById("myCanvas");varctx=c.getContext("2d");// Create gradientvargrd=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_grad

  31. Canvas Gradients & Canvas Video • Interactive Canvas Gradients: • http://html5demos.com/canvas-grad • Video Canvas: • http://html5demos.com/video-canvas

More Related