Louis Shun

1
Multimedia Java

• Louis Shun
• July 22nd, 2002

2
Objectives

• By the end of this lesson, you should have the
  basic understanding of
• Multimedia
• Internet video technologies
• Dynamic Multimedia Content Generation
• Java-multimedia integration

3
What is Multimedia?

• Multimedia literally refers to the use of various
  kind of multimedia to convey messages, ideas and
  concepts
• So, how multi can our media be today?

4
Text

• Text, however old it may seem, is one of the most
  well-adopted media
• Strength of text
• Convey informative, or descriptive concepts
• Depict things in precision
• Small in digital storage

5
Images

• Image is actually the oldest media exists
• Before our ancestors invented characters and
  alphabets, messages and history is recorded in
  pictures
• Strength of images
• Able to depict real objects
• Simplify the representation of complicated
  concepts
• Attract attention (oh this is cool)
• Able to leave strong impression on viewer

6
Animation

• Animation refers to a series of pictures in
  motion
• Strength of animation
• Illustrate abstract concept
• Simulate real-world process
• Able to create things from nothing!!
• Attract attention (wow, this animation is way
  cool!!)

7
Audio Video

• A/V, in their basic form, refers to the recording
  of real world motion
• Nowadays, A/V production are usually composed
  with animation (no, they did not use a real ship
  in titanic, and the people arent actually
  drowning)
• Strength of A/V
• The most direct illustration of real world event
• Well accepted by most people

8
Where is Multimedia used in the net?

• Put it in simple terms EVERYWHERE
• Most web sites nowadays employ a combination of
  all kinds of media in various degree
• The follow are just some examples of their use
• http//www.shockwave.com
• http//www.minorityreport.com
• http//www.rottentomatoes.com

9
What technologies are involved?

• What technologies do all those sites use?

10
So Where to begin?

• Ultimate goals for today Allows us to gain full
  control of multimedia elements in websites
• Here are the things we will discuss
• Technical backgrounds
• Plug-in architecture - Relationship between
  browser and player
• Basic JavaScript
• Programming with JavaScript and players
• Programming with Java and players

11
Technical Backgrounds - Video

• There are mainly 2 mode of video delivery thru
  web.
• Store and play Start playing the video after
  the video file is completely downloaded
• Stream Play the video while downloading

12
Non-Streaming Video

• Store and play delivery plays the video only
  after the data is completed downloaded
• The actual process looks something like this

13
Streaming Video

• Stream video allows users to view the video while
  downloading the data
• The actual process looks something like this

Buffering
14
Players

• There are mainly 3 technologies for web
  deliveries. They are namely
• Real Media Video technology developed by Real
• Windows Media Video technology developed by
  Microsoft
• Quicktime A rather well-rounded technology
  developed by Apple

15
Real Media

• Real media has been the de facto standard of web
  video delivery in the early days
• Real media supports both delivery modes
• Streaming delivery may also be done via HTTP or
  its proprietary protocol
• File extension used for Real Media includes RM,
  RA, RAM, RT, RP, SMI

16
Real Media Files
17
Real Media Information

• Except for RM/RA files, most of the files types
  for real media can be authored with a simple text
  editor
• For detailed information, go to
• http//www.realnetworks.com/devzone

18
Windows Media

• Although introduced much later than Real, Windows
  media is quickly gaining popularity
• Windows media is installed by default with
  operating system developed by Microsoft such as
  Windows 95/98/ME/XP/NT/2000
• Windows media also supports both delivery modes
• Streaming delivery may also be done via HTTP or
  Windows Medias proprietary protocol
• File extension used for Windows Media includes
  WMV, WMA, ASX, ASF

19
Windows Media Files
20
Windows Media Information

• For detailed information, go to
• http//www.microsoft.com/windows/windowsmedia/

21
Quicktime

• Quicktime is developed by Apple
• QT is first introduced in the Macintosh platforms
• QT supports both delivery methods
• One interesting, and outstanding media only
  supported by QT is Quicktime VR, which allows the
  production and playing of images that are 360
  degree. Users may turn around to view the image
  in every direction

22
Quicktime Files

• They are all MOV, which includes video, audio as
  well as Quicktime VR
• For more information about Quicktime, visit
• http//www.apple.com/quicktime/

23
Plug-in Architecture

• Why do you need to know about plug-in
  architecture?
• If you are just a web author, or a designer, you
  probably dont
• But if you ever wish to any kinds of cool
  programming with web pages, you need to know the
  basics of how browsers and their associated
  components works

24
What is plug-in?

• In an overly simple way, web browsers are often
  only able to show data of limited formats, such
  as HTML, GIF, JPEG
• Internet is ever-changing
• New media are always emerging
• So, the concept of plug-in allows extension of
  formats supported by a browser

25
Plug-in

• Take Real Media as an example, browsers do not
  have support for its file types
• After installing RealPlayer, browsers will know,
  when encountering a specific file extension, it
  should show the RealPlayer and let it handle the
  relevant data

26
HTML Tag for Plug-in

• There are 2 tags to include a plug-in into your
  HTML, namely the OBJECT and EMBED tag
• You need to use both tags in order for your HTML
  to be understood by both Netscape and IE
• Both tags allows you to specify information
  pertaining to the media you want to include, such
  as file name, width, height and the name of the
  plug-in within your HTML

27
Sample Tags

• ltobject idmyplayer" width400 height300gt
• ltparam name"FileName" valuemyFile.fil"gt
• ltembed namemyplayer
• src"myFile.fil"
• width400
• height300gt
• lt/embedgt
• lt/objectgt

28
More Sample

• Depends on plug-in, more attributes may be needed
  in the tags.
• The next slide is an example of the tags used for
  Windows Media files

29
Windows Media Tags

• ltobject id"myplayer" width400 height300gt
• ltparam name"FileName" value"mymedia.asx"gt
• ltparam name"ShowStatusBar" value"false"gt
• ltparam name"AutoStart" value"false"gt
• ltparam name"AutoSize" value"false"gt
• ltparam name"ShowControls" value"true"gt
• ltparam name"ShowDisplay" value"false"gt
• ltparam name"ShowAudioControls" value"TRUE"gt
• ltembed name"myplayer"
• src"mymedia.asx"
• width400
• height300
• autostart"false"
• autosize"false"
• showcontrols"true"
• showdisplay"false"
• showaudiocontrols"TRUE"
• vspace"7" hspace"7"gt
• lt/embedgt

30
Real Media Tags

• ltOBJECT IDreal1 WIDTH400 HEIGHT300gt
• ltPARAM NAME"SRC" VALUE"myreal.rpm"gt
• ltPARAM NAME"CONSOLE" VALUE"1"gt
• ltPARAM NAME"CONTROLS" VALUE"ImageWindow"gt
• ltPARAM NAME"BACKGROUNDCOLOR" VALUE"black"gt
• ltPARAM NAME"CENTER" VALUE"true"gt
• ltPARAM NAME"AUTOSTART" VALUE"true"gt
• lt/OBJECTgt
• ltOBJECT IDrealcontrol WIDTH400 HEIGHT80gt
• ltPARAM NAME"SRC" VALUE"myreal.rpm"gt
• ltPARAM NAME"CONSOLE" VALUE"1"gt
• ltPARAM NAME"CONTROLS" VALUE"All"gt
• ltPARAM NAME"BACKGROUNDCOLOR" VALUE"white"gt
• ltPARAM NAME"CENTER" VALUE"true"gt
• ltPARAM NAME"AUTOSTART" VALUE"true"gt
• lt/OBJECTgt

31
Exercise

• Create 2 HTML files each with Windows Media and
  Real Media embedded
• Play around with different options and see their
  effects

32
Basic JavaScript

• JavaScript is a client-side scripting language
  that can be embedded into an HTML file for
  dynamic controls and manipulation
• The syntax, or grammar of JavaScript is very
  similar to Java
• To include JavaScript codes inside an HTML file,
  simply do the following

ltscript languagejavascriptgt JavaScript codes
lt/scriptgt
33
Basic JavaScript

• JavaScript will run in 2 cases
• If you place your statements directly inside the
  SCRIPT tag, it will run once the HTML is loaded
• If you place your statements within a function,
  they will only execute when the function is called

ltSCRIPT languagejavascriptgt alert.(Hello
World) lt/SCRIPTgt
ltSCRIPT languagejavascriptgt function sayHello()
alert.(Hello World) lt/SCRIPTgt
34
Functions

• Similar to Java, JavaScript functions can take in
  parameter. However, JavaScript is loosely typed.
  No declaration of argument type is needed
• In most cases, no variable declaration is needed
  before using a variable

ltSCRIPT languagejavascriptgt function
sayHelloNTimes(n) for (i0 iltn i)
alert.(Hello World) lt/SCRIPTgt
35
Functions

• When will a function be invoked?
• Most of the interaction in JavaScript is event
  driven
• Which means something will be perform only some
  event occurs
• More about event handling will be discussed after
  DOM is introduced

36
Document Object Model

• Basically everything you see within a web page is
  an object
• The document object model, or simply DOM, models
  the hierarchy
• With JavaScript, one is able to dynamically
  manipulate objects within the DOM

37
Document Object Model

• Here is a segment of the DOM in Netscape 4

38
Naming Objects

• When you write HTML, most of the time you will
  write something like the following
• But if you want to be able to manipulate this
  form object in JavaScript, you will need to give
  a name for this form

ltform actionaction.jsp methodGETgt ltinput
typetext nameloginnamegt ltinput typepassword
namepasswordgt ltinput typesubmit
valuelogingt lt/formgt
ltform namemyform actionaction.jsp
methodGETgt ltinput typetext nameloginnamegt ltinpu
t typepassword namepasswordgt ltinput typesubmit
valuelogingt lt/formgt
39
Programming Objects

• Different objects has different
• Functions
• Elements
• Events
• That one may use. For example, the following are
  part of what the form in the previous slide has

40
Manipulating Objects

• Heres an example for object manipulation with
  JavaScript

ltscript languagejavascriptgt function checkForm()
if (myform.loginnameevil)
alert(evil is not supposed to login!!)
return false else if (myform.loginnameni
ceperson) alert(hi nice one!! Let me
help you login!!) return true
else return true lt/scriptgt ltform
namemyform actionaction.jsp methodGET
onSubmitreturn checkForm()gt ltinput typetext
nameloginnamegt ltinput typepassword
namepasswordgt ltinput typesubmit
valuelogingt lt/formgt
41
Manipulating Objects

• Try it out and see what does the code do
• One interesting element in the code is the return
  value of the checkForm function
• If it returns true, the form will get submitted.
  The form will not be submitted when checkForm
  returns false
• So with this mechanism, form checking can be
  easily done

42
More on JavaScript

• As time restricted, we will not go in-depth for
  JavaScript.
• However, you have already know the most
  fundamental concept
• With you good reference book, you will be able to
  program with JavaScript very effectively
• This is a good book
• JavaScript Bible IDG Books

43
Interacting with Plug-ins

• In this section, we will go over some technical
  details for the following plug-ins
• RealPlayer
• Windows Media Player
• Flash Player

44
RealPlayer - Playback

• The following functions allows you to control
  playback of RealPlayer One

45
RealPlayer Obtaining Information

• The following functions allow you to obtain
  information related to the players state

46
RealPlayer Events

• Event handlers for RealPlayer are functions with
  specific names
• Notices that different event handler requires
  different argument

47
RealPlayer More

• You can find a lot more in-depth reference about
  scripting with RealPlayer at the following URL
• http//service.real.com/help/library/guides/realon
  escripting/browse/realscript.htm

48
Windows Media Playback

• Functions controlling playback for Windows Media
  Player

49
Windows Media Obtaining Information

• The following functions and variables allow you
  to obtain information of the player

50
Windows Media Events

• Handling events in Windows Media is basically the
  same as Real Player with just a little bit
  difference.
• When you need to write a handler, you need to
  conform the syntax like the following
• Jscript is simple another variant of JavaScript
• Note that the Event fill must be timed exactly as
  it is shown

ltscript languageJscript forPlayer
eventplayerStateChange(NewState)gt your code
here lt/scriptgt
51
Windows Media Events

• The followings are some of the events supported
  by Media Player

52
Windows Media - More

• For more in-depth references, visit the following
  URL
• http//msdn.microsoft.com/library/default.asp?url
  /library/en-us/wmplay/mmp_sdk/default.asp

53
Flash Playback

• The follow functions controls the playback of
  Flash player

54
Flash Obtaining Information

• The following functions provide information about
  the player

55
Flash Event Handling

• Flash provides great flexibility for developers
  to generate events from Flash movie to web page
  with fscommand
• When fscommand is called with 2 parameters, the
  Flash player will call a specific function in the
  JavaScript in the HTML
• The next slide provide a skeleton for the
  JavaScript codes

56
Flash fscommand

• ltSCRIPT LANGUAGE"JavaScript"gt
• var InternetExplorer navigator.appName.indexOf("
  Microsoft") ! -1
• function mapcontrols_DoFSCommand(command, args)
  
• var map InternetExplorer ? parent.fw_map.map
  parent.fw_map.document.map
• your handler here depending on the value of
  command and args
• lt/SCRIPTgt
• ltSCRIPT LANGUAGE"VBScript"gt
• lt!--
• Sub mapcontrols_FSCommand(ByVal command, ByVal
  args)
• call mapcontrols_DoFSCommand(command, args)
• end sub
• --gt
• lt/SCRIPTgt

57
Flash fscommand

• The meaning of command and args are totally up to
  the discretion of the developer
• Using fscommand, Flash movie will be able to pass
  anything to the external web page for further
  processing and interactivity

58
Multimedia in Java

• Despite the current popularity of Java,
  Multimedia solution with Java is still in its
  early stage
• Some of the problem, mainly performance related,
  is still unsolved
• It is possible, however, to use Java to controls
  JavaScript, which in turns control plug-ins
  located in the web page

59
LiveConnect

• LiveConnect enables communication between
  JavaScript and Java applet
• Java applets is, as expected, just another
  objects in the document object model

60
Calling Java in JavaScript

• Lets say you have an applet class A with member
  function named getUserInput() which returns a
  String. And the applet tag is as follows
• Then in JavaScript, you may simply call the
  getUserInput method by the following statement

ltapplet namemyApplet codeA.class width100
height100gt lt/applet
myApplet.getUserInput()
61
Calling JavaScript in Java

• You need to import the netscape.javascript
  package in your Java source code in order to
  communicate with JavaScript
• The package is distributed as a jar file named
  java40.jar

62
LiveConnect Code Sample

• With the netscape.javascript package imported,
  you can easily call JavaScript function defined
  in your HTML with the following line

JSObject.getWindow(this).eval(alert(hello
world!!))
63
More Info

• For more information about LiveConnect, visit the
  following URL
• http//developer.netscape.com/docs/manuals/communi
  cator/jsguide4/livecon.htm