Musabbir Chowdhury

1

Musabbir Chowdhury

Video on the web

1

How to create Flash video content and publish it online.

2

Video on the web

• Early video content on the web has often been simply a rectangle of content playing back on your computer monitor, usually in a separate pop-up window covering the website page that spawned it.

• The video images are often small and ugly, and the overall experience is poor.

2

3

Video on the web: Technical Challenges

• Several technical challenges have kept designers from using video content to its full potential, including the following:

– Bandwidth Limitations;

– Complexity of Authoring Video for the Web;

– Lack of Compelling Integration of Video and Other Web Content.

3

4

About Flash Video

• Flash video offers technological and creative benefits that allow designers to create immersive, rich experiences that fuse video together with data, graphics,

sound, and dynamic interactive control.

4

5

Flash Video: Advantage

Ubiquity

• Since the 2002 introduction of Flash video, Macromedia Flash Player has become the most widely installed Internet video client, running on over 96% of all Internet-connected personal computers.

• Flash Player runs on a wide variety of platforms and operating systems.

• The ubiquity of Flash Player ensures that most visitors can view Flash video without downloading additional plug-ins, so you can reach more people with lower development, testing, and support costs.

5

6


Full Creative Control

• Flash video integrates seamlessly into your website, and you can put a new "skin" to customize your branding and design unique controls.

• You can also set the size and aspect ratio of your video, and the video can dynamically change based on a data source.

6

7


Rich, Interactive, Contextual Video

• Flash video starts playing quickly, and provides immersive and interactive experiences. Because Flash treats Flash video as simply another media type, you can layer, script, and control video just like any other object in a SWF file.

• Flash video is an integral part of the viewing experience, as opposed to a separate pop-up window that interrupts the experience.

7

8

Flash Video: Image

This image shows a sophisticated example of a web page containing Flash video synchronized to text and graphics.

8

9

Advantage of using Flash Video

• The advantages of using Flash to present video online also include:

– Flash Video Import wizard. Simply choose File > Import > Import Video to import video into Flash.

The Import Video dialog guides you through converting video files to FLV format and

configuring the FLVPlayback component.

9

10


• FLVPlayback component:

Use this component to play external FLV files and to connect to Flash Media Server (formerly Flash Communication Server) video streams in your Flash movie.

• This new video component, which includes video playback controls, makes customizing or "skinning" the video player much easier than before.

10

11


• New encoding options:

You can now encode Flash video in different ways:

– through the Flash Video Import wizard, with the stand-alone Flash 8 Video Encoder and

– through the Flash Video QuickTime Export plug-in, which lets you encode audio and video into the FLV file format when exporting from third-party video editing applications that support QuickTime exporter plug-ins. 11

12


• Flash Media Server

(formerly Flash Communication Server) is Macromedia's streaming media server that streams audio and video to Flash Player 6 or

later.

12

13


• Flash Video Streaming Service is a cost-effective monthly subscription services from third parties that use Flash Media Server to provide hosted streaming video with high performance requirements and worldwide scalability.

• If you can't or don't want to set up your own Flash Media Server or Flash Communication

Server, you can use a hosted service.

13

14


• Dreamweaver includes a Flash video import mechanism to put Flash video onto a web page easily, with a more limited number of customization or "skinning" options for the video player.

Note: You must have an encoded FLV file before you can use it in Dreamweaver.

• Flash Player plays Flash video and other Flash content.

14

15

Delivery Options

• Before you can use Flash video on your site, you need to decide how to deliver the video; the two primary options are to deliver it as a progressive download or as a streaming video.

• Note: You can also embed video in the Flash Timeline, however, this is recommended only for very short video clips with no audio track.

15

16

About External Progressive Download

• Flash Player 7 introduced a new technique called progressive download, which enables developers to use ActionScript commands to feed external FLV files into a SWF file and play them back at runtime.

• More specifically, you can use the netConnection and netStream commands to set the FLV file to play back, and to control the Play, Pause, Seek (to a timecode), and Close behaviors and the buffertime and size for a given video file.

• In this method, the video content (FLV file) is kept external to the other Flash content and the video playback controls. Because of this, it's relatively easy to add or change content without republishing the SWF file.

16

17

Advantage of using external progressive FLV files

• Using external progressive FLV files has the following advantages over using embedded video:

– During authoring, you need to publish only the SWF interface for previewing or testing part or all of your Flash content. This results in faster preview times and quicker turnaround on iterative experimentation.

– For delivery, video begins playing as soon as the first segment has been downloaded and cached to local disk.

– At runtime, video files are loaded from the local disk into the SWF file, with no limitation on file size or duration. There are no audio synchronization issues or memory restrictions.

– The frame rate of the video file can be different from the frame rate of the SWF file, allowing for greater flexibility in setting up a project.

17

18

About Streaming Video

• The most complete, consistent, and robust delivery option is to stream video and audio files from a server running Flash Media Server (formerly Flash Communication Server).

• In streaming, each client opens a persistent connection back to the video server, and there is a tight relationship between the video being delivered and the client interaction.

• This approach lets you deliver features such as bandwidth detection to serve up the right size video, quality of service metrics, detailed tracking and reporting statistics, and a whole range of interactive features along with the video experience.

18

19

About Streaming Video

• As with progressive download, with this method the video content (FLV file) is kept external to the other Flash content and the video playback controls.

• It is, therefore, relatively easy to add or change content without the need to republish the SWF file.

• Further, because there is a persistent connection between client and server when streaming, the FLV content can be changed based on feedback from the user or the application.

• For example, you can switch to a lower bit rate video if you notice quality-of-service degradation.

19

20

Advantage of using streaming video

• The video starts playing sooner than it does using other approaches.

• Streaming uses less of the client's memory and disk space, because the clients don't need to download the entire file.

• It makes more efficient use of network resources, because only the parts of the video that are viewed are sent to the client.

• It provides more secure delivery of media, because media does not get saved to the client's cache when streamed.

20

21

Advantage of using streaming video

• It provides better tracking, reporting, and logging ability—important features for industries such as video ad serving.

• It lets you deliver live video and audio, or capture video from a client's webcam or digital video camera.

• It enables multiway and multiuser streaming for creating video chat, video messaging, and video conferencing applications.

• It provides programmatic control of streams (server scripting) for the creation of server-side playlists, synchronization of streams, smarter delivery adjusted to client connection speed, and application creation.

• It provides advanced monitoring and reporting on traffic and throughput.

21

22

Delivery Options

• For help deciding which delivery option to use, see the following table. Find your situation in the left column, and then see which delivery options are recommended. If two options are marked, then either one is recommended.

22

23

Encoding and Creating Flash Video (FLV) Files

• Flash provides several video-encoding solutions that let you encode your video clips into the FLV format.

1. Flash Video Import wizard

• The Flash Video Import wizard lets you encode video clips into the Flash video (FLV) format when you import them.

• However, the Video Import wizard has limitations in that you can only encode one video clip at a time, and the process of encoding can be both time- and computing-intensive.

23

24


2. Flash 8 Video Encoder

• Flash 8 Video Encoder lets you batch process video clips, allowing you to encode several clips at a time without having to interrupt your workflow.

• In addition to selecting encoding options for video and audio content, the Flash 8 Video Encoder also lets you embed cue points into video clips you encode, and edit the video using crop-and-trim controls.

24

25


3. FLV QuickTime Export plug-in

• If you have Macromedia Flash Professional 8 and QuickTime 6.1.1 installed on your computer, you can use the FLV QuickTime Export plug-in to export FLV files from supported video-editing applications.

• You can then import these FLV files directly into Flash to use in your Flash documents.

• The following video-editing applications are supported by the FLV Export plug-in:– Adobe After Effects (Windows and Macintosh) – Apple Final Cut Pro (Macintosh) – Apple QuickTime Pro (Windows and Macintosh) – Avid Xpress DV (Windows and Macintosh)

25

26

About the On2 VP6 and Sorenson Spark Video Codecs

• By default, Flash Video Encoder exports encoded video using the On2 VP6 video codec for use with Flash Player 8, and the Sorenson Spark codec for use with Flash Player 7.

• A codec is a compression/decompression algorithm that controls how video files are compressed during encoding, and decompressed during playback.

• The VP6 video codec is the preferred video codec to use when creating Flash content that uses video. VP6 provides the best combination of video quality while maintaining a small file size.

26

27

About Video and the Web

• Video is the medium that most closely echoes our day-to-day visual experiences, and the Internet is a boundless playground filled with interesting content.

• You might expect, therefore, that thousands of compelling websites would integrate video with data, content, and interactive controls to create rich experiences that go beyond what is possible with video on a television set.

27

28


• Complexity of Authoring Video for the Web

– There have been no standard tool sets for creating interactivity, navigation control, and fusion of video with other rich media content.

– Furthermore, most video playback clients are not pre-installed on most visitors' systems, so many visitors must pause to download a plug-in or application before they can view video.

28

29


• Bandwidth Limitations

– Video is a data-intensive format, requiring megabytes of data to display even short video clips.

– The growth of broadband has greatly reduced this technical obstacle, and increasingly large numbers of site visitors have the bandwidth required to receive video content via the web, but file size is still a problem for many visitors.

29

30


• Lack of Compelling Integration of Video and Other Web Content

– Most video formats for the web offer no rich media capabilities beyond playback of video in a rectangular window.

– Fortunately, Flash video (which presents video content seamlessly and in context, in a form that site visitors can view using Flash Player) overcomes these issues.

30

31

Video on the web

• Links:

http://www.macromedia.com/devnet/flash/articles/video_guide_02.html

http://www.bowwowlondon.com/main.html http://www.agencynet.com/

http://www.adobe.com/motiondesign/MDC_Tutorials.html?u%5FsLang=en&u%5FnTextSize=14&u%5FsFontType=sans&u%5FsContent=Animate%5FYour%5FText

31

Musabbir Chowdhury

Documents

Transcript of Musabbir Chowdhury