sign in sign up
<<
Home , Ajax (programming), Flash Video, HTML5 audio, HTML5 video, HTML element, Ogg

9 Flash, & Audio

XX How to add Flash movies into your site XX How to add video and audio to your site XX HTML5

We then focus on how to add video and audio to your site, using either the new HTML5

●● How to use Flash in your web pages

●● How to use HTML5

●● When to host your own video and audio and when to use a service such as YouTube

201 FLASH, VIDEO & AUDIO FLASH, VIDEO & AUDIO 202 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 When you create a Flash file in To view Flash, browsers need animation or a media player in the Flash authoring environment, to use a plugin (an extra piece Flash, the you put on your it is saved with the .fla file of software that runs in the website are referred to as Flash extension. In order to use this file browser) called the Flash Player. movies. on a web page it has to be saved Statistics commonly indicate in a different format known that 98% of browsers on If you want to create your as SWF. (It has the . file desktop computers have the own Flash movie, you need to extension.) Flash plugin installed. (The purchase the Flash authoring percentage of mobiles and environment from Adobe. When you export the movie tablets with it is much less.) into SWF format, Flash creates There are, however, several code that you can use to embed There is not space in this book companies that offer Flash the Flash movie in your page. to teach you how to create Flash animations and slideshows, Traditionally, this code used the movies (there are many books as well as video and audio HTML and devoted to that one topic), but players that you can use without tags. However, now it is more this chapter will show you how purchasing this tool. common to use JavaScript. to add Flash movies to your site.

The Flash authoring environment The .fla file is exported to.swf The .swf file is included in your is used to create Flash Movies. format to use in a web page. web page using JavaScript.

203 FLASH, VIDEO & AUDIO 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, There are several reasons why There have been laws introduced it was developed to create fewer websites are using Flash to ensure that websites are animations. The technology these days, including: usable by those with visual or quickly evolved, however, and physical impairments — and people started to use it to build In 2005-6, a set of JavaScript Flash has been criticized because media players and even entire libraries were launched Flash content does not always websites. (including Prototype, meet requirements. script.aculo.us, and JQuery) Although Flash is still very which made it easier for people In 2008, browsers started to popular, in recent years people to create animated effects using support HTML5

FLASH, VIDEO & AUDIO 204 Timeline: Flash, VidEo & Audio

Web technologies change quickly. Here you can see some of the changes in how animation, video, and audio are created on the web.

1995 1996 1997 1998 1999 2000 2001 2002 2003

FutureSplash, forerunner to

RealAudio streaming audio Flash 4 streaming audio Audio

RealVideo streaming video

RealVideo 8 streaming video Flash MX Video

On this page you can see the On the facing page, you can see first major players to provide some of the technologies and web animation, audio, and video. events replacing them.

205 FLASH, VIDEO & AUDIO Video sharing sites offer alternatives to self-hosting Vimeo launched YouTube launched YouTube releases iPhone app Vimeo releases HTML5 player YouTube releases HTML5 player Vimeo releases iPhone app

2004 2005 2006 2007 2008 2009 2010 2011

Internet Explorer 9 9 .62 3.5 Chrome 3

Safari 3.1

Browsers introduce HTML5

iPad iPhone Apple releases devices that don't support Flash

jQuery script.aculo.us Prototype JavaScript libraries are written to create animated effects

FLASH, VIDEO & AUDIO 206 Adding a Flash Movie to Your Web Page

The most popular way of HTML adding Flash into a web page chapter-09/adding-a-flash-movie. is using JavaScript. There are several scripts that allow you to do this without an in-depth understanding of the JavaScript Adding a Flash Movie language. here is called SWFObject. You how we use it on the next page. One advantage to using this

An animation of a bird taking technique is that it allows a shower

browsers to show alternative content for users whose browsers are not capable of showing Flash.

This technique uses a

The SWFObject script will check If you use a text description as element to create a space where to see if the user's browser can alternative content, then you can the Flash movie should sit. play the Flash movie. If it can, the achieve two further benefits: The
element has an id script will replace the content of attribute whose value is used the
with the .swf file. 1. The text can be accessed by by the SWFObject script. In this those with visual and/or physical example, the value of the id For users who cannot see the impairments who are not able to attribute is bird. Flash movie, you could show a interact with the Flash file. still from the movie instead. You Inside the
element you might also like to consider using 2. The text can be indexed by can place the alternative content a text description of the Flash search engines (which are not as for users who are not able to file. effective at indexing SWF files), play Flash. increasing the chance that your content will be found.

207 FLASH, VIDEO & AUDIO Article

In this example, the SWFObject Result script is hosted on Google's servers. We include the script in this web page using the first of the two sometimes Flash movies need variables to pass this information to the Flash movie. These are provided in the two lines of code

A video of a puppy playing in that start with var. the snow

This particular player is not expecting any information in the flashvars variable, so that is left empty.

Result The path to the movie is supplied in the variable called params.

var params = {movie: "../videos/puppy.flv"};

The line after the variables is the one that tells the script to replace the HTML element with the video player. It is very similar to the one you saw in the earlier example that introduced SWFObject.

Different video players usually require information such as the path to the video in slightly different formats, but they usually come with examples and documentation to help you understand how to use them.

FLASH, VIDEO & AUDIO 212 HTML5: Preparing Video for Your Pages

Despite the HTML5

Support Formats Controls

The new HTML5

On page 222 you will see how I have provided a sample video in If you look at this example in to combine this HTML5 video H264 and WebM format for you Firefox and Opera you will see technique with Flash Video to to try with the code downloads. different controls when you achieve wider reach. hover over the video.

213 FLASH, VIDEO & AUDIO HTML5: AddingAr Videoticle to Your Pages

HTML chapter-09/adding--video.html

A video of a puppy playing in the snow

This attribute allows you to specify an image to show while the video is downloading or until the user tells the video to play. width, height In HTML5 you do not need to preload These attributes specify the size supply values for all attributes, This attribute tells the browser of the player in pixels. such as the controls, autoplay, what to do when the page and loop attributes used loads. It can have one of three controls with the