Understanding Web Video and Audio 1 Many Applications

Understanding Web Video and Audio 1

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

Smart Phones and Tablets Flash has fallen ◦ Too difficult to support on these devices New codecs competing to be the best HTML 5 and CSS 3 built in support ◦ Replaces much of Flash animation capabilities ◦ Video still unclear 3

Adobe Edge Animate Does not replace Adobe Flash ◦ Uses HTML 5, CSS 3 and Java. Script Only available on Creative Cloud In Dreamweaver ◦ File > Publish Exports Adobe Edge Animate composition Bug using FLV and SWF with HTML 5 ◦ Bug promised to be fixed 4

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

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

HTML 5 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. mp 4" type="video/mp 4"> <source src="movie. ogg" type="video/ogg"> Your browser does not support the video tag. </video> 7

HTML 5 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. 8

HTML 5 Video HTML <video> Autoplay To start a video automatically use the autoplay attribute: <video width="320" height="240" autoplay> <source src="movie. mp 4" type="video/mp 4"> <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 i. Pad and i. Phone. 9

HTML 5 Video HTML Video - Browser Support In HTML 5, there are 3 supported video formats: MP 4, Web. M, and Ogg. The browser support for the different formats is: 10

HTML 5 Video HTML Video - Media Types 11

HTML 5 Audio on the Web Before HTML 5, audio files could only be played in a browser with a plug-in (like flash). The HTML 5 <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. 12

HTML 5 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. mp 3" type="audio/mpeg"> Your browser does not support the audio element. </audio> : 13

HTML 5 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. 14

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

HTML 5 Audio HTML Audio - Media Types 16