UNIT K: INCORPORATING VIDEO AND AUDIO

1

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

2

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.

3

0 1 0 1 0 1 0 0 1 0 0 1 0 1 1 1 0 1 0 0 1 1 0 0 1 0 1 0 1 0 0 0 1 1 0 1 1 0 1 0

1 1 0 1 0 0 1 1 0 0 1 0 1 0 1 0 0 0 1 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 0 0 1 0 0 1

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

1 1 0 1 0 0 1 1 0 0 1 0 1 0 1 0 0 0 1 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 0 0 1 0 0 11 1 0 1 0 0 1 1 1 0 1 0 1 0 0 1 0 0 1 0 1 0 1 0 0 0 1 1 0 1 1 0 1 0 1 0 0 1 0 1 0 1 0 0 1 0 0 1

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

5

Helper program: program that can unpack container and decode video and audio streams

• Also known as plugin

<video> 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

6

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

7

Code containing video element

8

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.

9

Code containing multiple source elements nested within a video element

<source src="media/cablecar.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

10

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

11

Code for adding video controls

controls=“controls”

12

Video controls rendered in different browsers

13

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.

14

15

Code for browsers supporting the Adobe Flash version of the video

16

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

17

Code for providing a fallback image

18

<audio> 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

19

audio and source elements: code and result

20

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

21

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.

22

Code incorporating fallback version of audio and resulting page

23

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.

24

SUMMARYMedia 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 <video> element

• Attributes specify how video is displayed and how user interacts with the video

25

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

26

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

27

28