1 / 16

Understanding Web Video and Audio

Explore the various applications of web video and audio, including codecs, Flash, plugins, and the emergence of HTML5 as a replacement for Flash. Discover the browser support for HTML5 video and audio elements and learn how to embed and control video and audio files in your web pages.

jacquelinedunn
Download Presentation

Understanding Web Video and Audio

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. Understanding Web Video and Audio

  2. Many Applications • Plug-ins • Coder Decoders (codecs) • Flash • Installed on 90% of desktops • Universal distribution • Takes care of codecs and formats

  3. Smart Phones and Tablets • Flash has fallen • Too difficult to support on these devices • New codecs competing to be the best • HTML5 and CSS3 built in support • Replaces much of Flash animation capabilities • Video still unclear

  4. Adobe Edge Animate • Does not replace Adobe Flash • Uses HTML5, CSS3 and JavaScript • Only available on Creative Cloud • In Dreamweaver • File > Publish • Exports Adobe Edge Animate composition • Bug using FLV and SWF with HTML5 • Bug promised to be fixed

  5. HTML5 Video • Playing Videos in HTML • Before HTML5, a video could only be played in a browser with a plug-in (like flash). • The HTML5 <video> element specifies a standard way to embed a video in a web page.

  6. HTML5 Video • Browser Support • The numbers in the table specify the first browser version that fully supports the <video> element.

  7. HTML5 Video • The HTML <video> Element • To show a video in HTML, use the <video> element: • Example • <video width="320" height="240" controls>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video>

  8. HTML5 Video • How it Works • The controls attribute adds video controls, like play, pause, and volume. • It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. • The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. • The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

  9. HTML5 Video • HTML <video> Autoplay • To start a video automatically use the autoplay attribute: • <video width="320" height="240" autoplay>  <source src="movie.mp4" type="video/mp4">  <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.</video> • The autoplay attribute does not work in mobile devices like iPad and iPhone.

  10. HTML5 Video • HTML Video - Browser Support • In HTML5, there are 3 supported video formats: MP4, WebM, and Ogg. • The browser support for the different formats is:

  11. HTML5 Video • HTML Video - Media Types

  12. HTML5 Audio • Audio on the Web • Before HTML5, audio files could only be played in a browser with a plug-in (like flash). • The HTML5 <audio> element specifies a standard way to embed audio in a web page.Browser Support • The numbers in the table specify the first browser version that fully supports the <audio> element.

  13. HTML5 Audio • The HTML <audio> Element • To play an audio file in HTML, use the <audio> element • Example • <audio controls>  <source src="horse.ogg" type="audio/ogg">  <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio> • :

  14. HTML5 Audio • HTML Audio - How It Works • The controls attribute adds audio controls, like play, pause, and volume. • The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. • The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

  15. HTML5 Audio • HTML Audio - Browser Support • In HTML5, there are 3 supported audio formats: MP3, Wav, and Ogg. • The browser support for the different formats is: 

  16. HTML5 Audio • HTML Audio - Media Types

More Related