2 If aliens came to this solar system and observed humans over the last several years, what would they think is the most significant benefits of the Internet to humankind?

YouTube videos of cats. 3

4

5 Why would you use audio and video on a web page? Give several examples. Before HTML5 – there was no standard for showing videos on a web page. videos could only be played with a plug-in (like flash). The HTML5 element specifies a standard way to embed a video in a web page.

Encoding: the process of transforming moving image and/or sound into a digital file. Each encoding method known as codec  (short for coder / decoder)  Main video codecs: H.264, Theora, and VP8  Main audio codecs: AAC, MP3, and Vorbis Stream: Encoded set of video or audio data 6

Container: file that contains a video stream  Because video is typically accompanied by audio, a video stream is packaged within a container, which may also contain the accompanying audio stream.  e.g., MPEG-4, Ogg, WebM, Flash Video  Most container formats can accommodate a variety of codecs, but each container is commonly used with a particular audio codec and a particular video codec. 7

Plastic pitcher ( container - file that contains a video stream) that we follow the directions ( codec - each encoding method) to mix together our items ( encoding - the process of transforming moving image and/or sound into a digital file) Then we can pour out the contents to be enjoyed ( stream - encoded set of video or audio data)

Since different plugins deal with different containers or codecs, users often need to download and install multiple software packages to play Web video and audio. Not all browsers natively support containers and codecs Web developers must take steps to ensure usability when publishing media It is important to clarify to users whether a plugin is needed to fully experience your Web site, and, when possible, providing a link to the appropriate software package. 9 Helper program: program that can unpack container and decode video and audio streams Also known as plugin

element: used to add video to a Web page Only works in HTML5 Attributes indicate how video is presented to users of the Web page - The src, width, and height attributes correspond to those used with the img element. src: specifies video file to display width and height: dimensions of the video element within Web page type: specifies container format and codecs used to encode the file 10

Important to enclose the value for the type attribute in single quotes, so as to avoid confusion with the double quotes that surround codec values. When creating a Web page including video elements, you may need to actively allow blocked content for the video to be displayed. Any text included between the opening and closing tags will be displayed in browsers that do not support the video element. Some videos are copyrighted and/or have license issues. You should ask Web page owners' permission before posting a video downloaded from another site onto their own Web page. 11

Code containing video element 12

Not all browsers support all containers source> element: used to specify a media file to be displayed Multiple source elements can be nested within HTML5 elements Can be used to reference multiple video files each specifying the same video in different container and encoding formats Dimensions of the video still set in video tag attributes The source element is used only to specify multiple media resources, and does not represent anything on its own. 13

Code containing multiple source elements nested within a video element 14

Attributes of the video element provide control over how element is displayed and how user interacts with video controls: instruct browser to add default controls to the video element preload: when browser should download the video loop: restart playback when end of video is reached autoplay: start playback when page is loaded 15

Code for adding video controls controls=“controls” 16

Video controls rendered in different browsers 17

Older browsers do not recognize HTML5 elements You can add support for older browsers while maintaining HTML5 features for browsers that support it To make video available, use object and param elements object element defines video type / data param elements define settings of the video The object element was intended to replace the img and applet elements. However, because of bugs and lack of browser support, this has not happened. Therefore, the object element should not be used to add images to a Web page. 18

19 Code for browsers supporting the Adobe Flash version of the video

20 Video displayed in Flash Player

It is likely that some potential viewers will be unable to view video content. To preserve layout of Web page video and object element allow you to specify a fallback image Gives users a taste of the content in the video For video tag, use poster attribute For object tag, create a nested img tag 21

Code for providing a fallback image 22

element: HTML5 element for linking audio files to a Web page and enabling user to control playback Takes the same attributes as the video element Accepts nested source elements for source files in multiple formats Important to display the controls because without them, audio element is invisible on the Web page 23

audio and source elements: code and result 24

Not all older browsers recognize the HTML5 audio tag Use an object element and nested param elements to specify fallback content Just like you would use for fallback video Even though a file contains no video, its location is indicated using the “movie” parameter 25

The audio button is often marked by an icon resembling a speaker with concentric arcs of increasing size on one side. Uploading video to a video hosting site such as YouTube can be a shortcut to including it in your Web pages. Such sites generally provide links that automatically generate HTML code for any video you upload—and in some cases, for other videos they host as well. In some cases, you can select whether you’d like HTML5 video code, Flash object code, or both. This process can remove a lot of specialized technical work from the task of adding a video to a Web site, while preserving your control over the appearance of your Web pages. 26

Code incorporating fallback version of audio and resulting page 27

If you’re developing Web pages on your own, you may need to convert a single video file into multiple formats. Many tools are available to handle this conversion. While some software that simplifies and automates the process is available for purchase, some powerful tools are available free or on a donation basis as well. These free and low-cost alternatives are often just as powerful as their more expensive counterparts, but may require more configuration and may not be as well documented. If you’re working on a well-funded project with a tight deadline, purchasing software may make the most sense. If you’re working with a budget, it can be well worth your time to familiarize yourself with the free or low-cost tools. Try searching on “HTML5 video encoder” or “video encoder” plus the name of the container type to which you want to convert. Whichever type of software you choose be sure to download or purchase it from a company or organization that you’re familiar with or that is recommended to you by someone you trust. Obtaining software from an untrusted source can expose your computer system to malware. 28

SUMMARY Media files can be included in a Web page, provided that you take into consideration: Encoding and container formats Inclusion of helper programs and plugins Providing support for older browsers Video is added using element Attributes specify how video is displayed and how user interacts with the video 29

SUMMARY (CONTINUED) Source elements allow you to provide multiple copies of the file in different formats Various attributes of video element enable control of video playback Video support for older browsers is added using object and param elements 30

SUMMARY (CONTINUED) Fallback image can be provided For video tag, use the poster attribute For object tag, nest an img tag before closing object tag Audio is added using the audio element Similar attributes to video element Use object and param elements to provide audio support for old browsers 31

32