HTML coding chapter 9 flash video and audio

<audio> element

o include audio files in your pages. As with HTML5 video, browsers expect different formats for the audio.

By offering your videos in both HTML5 and Flash Video formats

you will ensure that it can be viewed by the majority of users on your site. You may choose to offer HTML5 as the first option, and Flash video as a fallback for people whose browser does not support HTML5 video. Or you may work the other way around. Because some of the video players built in Flash support H264 encoding, if you use a player that supports this format you would only need to provide the video in H264 and WebM formats. (You would not need it in FLV format as well.) You will see this demonstrated in the example at the end of the chapter.

Digital Rights

At the time of writing, the <video> element does not support any type of Digital Rights Management (DRM—sometimes referred to as copy protection). But a dedicated pirate will usually find a way around DRM.

Advantages

Hosted video sites (such as YouTube) provide players that work with the majority of web browsers. You do not need to worry about encoding your video since these sites allow you to upload your content in a range of formats. Once uploaded, they automatically convert your video into the various formats required by different browsers. Web hosting companies often charge extra if you use a lot of bandwidth, and video files can be quite large. Therefore, it can cost you extra to host the videos on your own site. If your video is hosted on a site like YouTube or Vimeo, however, you do not need to pay for the bandwidth.

The easiest way to add video to your site is to use a hosted service such as YouTube or Vimeo.

However, there are some cases where using these services is not appropriate (as you will see on the next page) and you will want to host the video on your own site. At the time of writing, to ensure most people can play your video content, it is considered best practice to use the HTML5 <video> element for browsers that support it, and also Flash video for those that do not. This means you would need to upload any videos you want to show in at least two different formats: WebM and MP4.

The Alternative

If you want to host video on your own site - rather than a hosted service - a lot more work is involved in setting up your site to play the video. We will be looking at two different ways that you can host your own videos: using both Flash Video and the HTML5 <video> element. In order to ensure that the maximum number of visitors to your site can see the video, you will need to use a combination of both of these techniques.

How Flash Works

Since the late 1990s, Flash has been a very popular tool for creating animations, and later for playing audio and video in websites. Whether you are creating an animation or a media player in Flash, the files you put on your website are referred to as Flash movies. If you want to create your own Flash movie, you need to purchase the Flash authoring environment from Adobe. There are, however, several companies that offer Flash animations and slideshows, as well as video and audio players that you can use without purchasing this tool. When you create a Flash file in the Flash authoring environment, it is saved with the .fla file extension. In order to use this file on a web page it has to be saved in a different format known as SWF. (It has the .swf file extension.) When you export the movie into SWF format, Flash creates code that you can use to embed the Flash movie in your page. Traditionally, this code used the HTML <object> and <embed> tags. However, now it is more common to use JavaScript.

3 Use HTML5

Some people ask how to get music to play consistently even when visitors move from one page to another on a website. This is actually quite difficult to achieve and would rely on techniques like using AJAX to load page content or developing the entire site in Flash. This is why some sites offer audio players in new windows, so that listeners are not interrupted when they move between pages.

<video>

The <video> element has a number of attributes which allow you to control video playback:

auto

The browser should download the video when the page loads.

metadata

The browser should just collect information such as the size, first frame, track list, and duration.

none

The browser should not load the video until the user presses play.

Controls

The browser supplies its own controls for the player, and these can vary from browser to browser. You can control the appearance of these controls using JavaScript (but that is beyond the scope of this book).

One of the problems with players such as the Flash Player is that they can behave inconsistently when elements such a

menus drop over them, or the window is scaled up or down. The HTML5 option solves these issues.

Using Hosted Video Services

The easiest way to add a video to your site is to upload the video to a site like YouTube or Vimeo and use the features provided on their site to embed the video in your page.

Support

The new HTML5 <video> element is only supported by recent browsers, so you cannot just use this one technique if you want everyone to be able to see your video (you need to combine this HTML5 with Flash Video).

params.

The path to the movie is supplied in the variable called The line after the variables is the one that tells the script to replace the HTML element with the video player.

2 Use Flash

There are several Flash movies that allow you to play MP3 files; from simple buttons that play one track to complex players that allow you to create playlists and juke boxes.

width, height

These attributes specify the size of the player in pixels.

poster

This attribute allows you to specify an image to show while the video is downloading or until the user tells the video to play.

src

This attribute specifies the path to the audio file.

src

This attribute specifies the path to the video. (The example video is in H264 format so it will only work in IE and Safari.)

preload

This attribute tells the browser what to do when the page loads. It can have one of three values:

controls

When used, this attribute indicates that the browser should supply its own controls for playback.

loop

When used, this attribute indicates that the video should start playing again once it has ended.

autoplay

When used, this attribute specifies that the file should play automatically.

3 Include the Player & Video in Your Page

You can include the player in your page using a JavaScript technique such as SWFObject, which was mentioned earlier in this chapter. You will also need to tell the player where it can find the video file that you want it to play. (Some players have advanced features such as the ability to create playlists of multiple videos, or add a still picture before the video plays.) I have provided a sample FLV file that you can use with the download code on the website (It is in a separate folder because the video files are large.)

Example Flash, Video & Audio

This example uses HTML5 to show a video. The video has been encoded in H264 and WebM formats to reach as many browsers as possible. A Flash player has been added to the page for browsers that do not support HTML5 video. The Flash player is embedded using SWFObject. If the browser does not support HTML5 video or Flash, then a plain text message will be shown to the user.

There are three steps you need to follow to add a Flash Video to your web page: 1 Convert your Video into FLV Format

To play a Flash Video, you need to convert your video into FLV format. Since Flash 6, the Flash authoring environment has come with a Flash Video Encoder to convert videos into FLV format. Some Flash video players also support a format called H264 (and some video editing programs export video in this format). Googling "FLV or H264 converters" will allow you to find alternative encoding software.

, you can use the <source> element inside the <video> element. (This should replace the src attribute on the opening <video> tag.)

To specify the location of the file to be played

The codec that was used to encode the video

is supplied within the type attribute. Note the use of single quotes, as well as double quotes in the type attribute, when it is supplied.If the browser does not support the <video> element or the format of video used, it will display whatever is between the opening <video> and closing </video> tags.

type

At the time of writing, the type attribute was not commonly being used on the <source> element in the same way it was for the <video> element.

Players/Plugins

Browsers were initially designed to show text and images only. For this reason, browsers built prior to 2010 generally required another program called a player or plugin to to be installed in order to play video content. These players and plugins only supported certain video formats. Recently browsers have evolved to support the HTML5 <video> tag (which renders players and plugins obsolete). Unfortunately, however, you cannot rely on every visitor to your website having a recent browser that supports this new HTML5 element and the browsers that do recognize the <video> element require the video to be encoded in different formats.

If you start to work with HTML5 video in depth, you can also:

Create your own playback controls •Provide different versions of the video for browsers that have different sized screens (so you can provide lower resolution content for handheld devices) •Tell different parts of a page to change when the video reaches a certain point

Summary Flash, Video & Audio

Flash allows you to add animations, video and audio to the web. ▸ Flash is not supported on iPhone or iPad. ▸ HTML5 introduces new <video> and <audio> elements for adding video and audio to web pages, but these are only supported in the latest browsers. ▸ Browsers that support the HTML5 elements do not all support the same video and audio formats, so you need to supply your files in different formats to ensure that everyone can see/hear them.

the <video> element.

In HTML5 you do not need to supply values for all attributes, such as the controls, autoplay, and loop attributes used with the <video> element. These attributes are like on/off switches. If the attribute is present, it turns that option on. If the attribute is omitted, the option is turned off.In HTML5 you do not need to supply values for all attributes, such as the controls, autoplay, and loop attributes used with the <video> element. These attributes are like on/off switches. If the attribute is present, it turns that option on. If the attribute is omitted, the option is turned off.

<source>

It is possible to specify more than one audio file using the <source> element between the opening <audio> and closing </audio> tags (instead of the src attribute on the opening <audio> tag). This is important because different browsers support different formats for audio files. MP3: Safari 5+, Chrome 6+, IE9 Ogg Vorbis: Firefox 3.6, Chome 6, Opera 1.5, IE9 So you would need to supply two audio formats to get coverage across all recent browsers that support the <audio> element. You could also provide a Flash alternative for older browsers that do not support the <audio> element. The HTML5 <audio> tag has not gained as widespread adoption as the <video> tag, and there have been some issues with audio quality in the first browsers to implement it.

The most popular way of adding Flash into a web page is using

JavaScript. There are several scripts that allow you to do this without an in-depth understanding of the JavaScript language. The script we will be looking at here is called SWFObject. You can obtain a copy of it for free from Google, and you can see how we use it on the next page. One advantage to using this technique is that it allows browsers to show alternative content for users whose browsers are not capable of showing Flash.This technique uses a <div> element to create a space where the Flash movie should sit. The <div> element has an id attribute whose value is used by the SWFObject script. In this example, the value of the id attribute is bird. Inside the <div> element you can place the alternative content for users who are not able to play Flash. The SWFObject script will check to see if the user's browser can play the Flash movie. If it can, the script will replace the content of the <div> with the .swf file. For users who cannot see the Flash movie, you could show a still from the movie instead. You might also like to consider using a text description of the Flash file. If you use a text description as alternative content, then you can achieve two further benefits: 1The text can be accessed by those with visual and/or physical impairments who are not able to interact with the Flash file. 2The text can be indexed by search engines (which are not as effective at indexing SWF files), increasing the chance that your content will be found.

Formats

Movies are available in many formats (BluRay, DVD, VHS, to name a few). Online, there are even more video formats (including AVI, Flash Video, H264, MPEG, Ogg Theora, QuickTime, WebM, and Windows Media). Just as your DVD player won't play a VHS cassette, browsers differ in what video formats they do and don't support. In order for users to view your video online, you may need to convert it to another format. The process of converting a video into another format is sometimes referred to as "encoding" the video.

Formats

Not all browsers support the same video formats. Therefore, you need to supply your video in more than one format. To reach as many browsers as possible, you should provide the video in the following formats: H264: IE and Safari WebM: Android, Chrome, Firefox, Opera Chrome, Firefox, and Opera have indicated that they will support a format called WebM. (Some Flash players also support H264, and WebM - which will save on the number of conversions).

Use of Flash

Since 2005, a number of factors have meant that fewer websites are written in Flash or even use elements of Flash in their pages. When Flash was first released, it was developed to create animations. The technology quickly evolved, however, and people started to use it to build media players and even entire websites. Although Flash is still very popular, in recent years people have been more selective about when they use it (and now rarely consider building an entire website in Flash). Despite this, Flash does have a future on the web because there are some things it does very well, such as creating animations. There are several reasons why fewer websites are using Flash these days, including: In 2005-6, a set of JavaScript libraries were launched (including Prototype, script.aculo.us, and JQuery) which made it easier for people to create animated effects using JavaScript. When Apple launched the iPhone in 2007 and later the the iPad in 2010, they took the decision not to support Flash. There have been laws introduced to ensure that websites are usable by those with visual or physical impairments—and Flash has been criticized because Flash content does not always meet accessibility requirements. In 2008, browsers started to support HTML5 <video> and <audio> tags. At the time of writing, Flash is still a popular way of playing video and audio on the web but more and more people are switching to HTML5. (You will see how to use these elements later in the chapter.)

2 Find an FLV Player to Play the Video

You'll need a player written in Flash to play the FLV file. Its purpose is to hold the FLV movie and add controls such as play/pause. Here are two sites that offer FLV players: www.osflv.com www.longtailvideo.com You do not need the Flash authoring environment to use either of these on your website.

Disadvantages

Your video will be available on the site of the hosted service, so if you want the content to be exclusively available on your site (and not visible on other sites), you need to host the video on your own server and add your own player into the page. Some services will limit what your video is allowed to include. For example, most prohibit the use of advertising within the video you upload (which prevents you from monetizing that content). Some hosted services will play their own adverts before your video will begin, or even overlay them over the screen as your video is playing. The quality of video on some hosted services can also be limited.