Development of Multimedia WebApp on Tizen Platform
1. HTML Multimedia
2. Multimedia Playing with HTML5 Tags (1) HTML5 Video (2) HTML5 Audio (3) HTML Pulg-ins (4) HTML YouTube (5) Accessing Media Streams and Playing (6) Multimedia Contents Mgmt (7) Capturing Images
3. Multimedia Processing Web Device API
Multimedia WepApp on Tizen - 1 - 1. HTML Multimedia
• What is Multimedia ? − Multimedia comes in many different formats. It can be almost anything you can hear or see. − Examples : Pictures, music, sound, videos, records, films, animations, and more. − Web pages often contain multimedia elements of different types and formats.
• Multimedia Formats − Multimedia elements (like sounds or videos) are stored in media files. − The most common way to discover the type of a file, is to look at the file extension. ⇔ When a browser sees the file extension .htm or .html, it will treat the file as an HTML file. ⇔ The .xml extension indicates an XML file, and the .css extension indicates a style sheet file. ⇔ Pictures are recognized by extensions like .gif, .png and .jpg. − Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Multimedia WepApp on Tizen - 2 - 2. Multimedia Playing with HTML5 Tags
(1) HTML5 Video • Some of the popular video container formats include the following: Audio Video Interleave (.avi) Flash Video (.flv) MPEG 4 (.mp4) Matroska (.mkv)
Ogg (.ogv)
• Browser Support
Multimedia WepApp on Tizen - 3 - • Common Video Format
Format File Description .mpg MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the MPEG .mpeg web. Used to be supported by all browsers, but it is not supported in HTML5 (See MP4). AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and AVI .avi TV hardware. Plays well on Windows computers, but not in web browsers. WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and WMV .wmv TV hardware. Plays well on Windows computers, but not in web browsers. QuickTime. Developed by Apple. Commonly used in video cameras and TV hardware. Plays QuickTime .mov well on Apple computers, but not in web browsers. (See MP4) .rm RealVideo. Developed by Real Media to allow video streaming with low bandwidths. It is still RealVideo .ram used for online video and Internet TV, but does not play in web browsers. .swf Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web Flash .flv browsers. Ogg .ogg Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML5. .web WebM. Developed by the web giants, Mozilla, Opera, Adobe, and Google. Supported by WebM m HTML5. MP4. Developed by the Moving Pictures Expert Group. Based on QuickTime. Commonly used MPEG-4 .mp4 in newer video cameras and TV hardware. Supported by all HTML5 browsers. Recommended or MP4 by YouTube.
− Only MP4, WebM , and Ogg video are supported by the newest HTML5 standard.
Multimedia WepApp on Tizen - 4 - • Video Tag − Until now, there has not been a standard for showing a video/movie on a web page. − Today, most videos are shown through a plug-in (like flash ). However, different browsers may have different plug-ins. − HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all − To start a video automatically use the autoplay attribute: ⇔
Video courtesy of Big Buck Bunny.
Multimedia WepApp on Tizen - 6 - • HTML Audio and Video DOM Reference − The HTML5 DOM has methods, properties, and events for the
Method Description
addTextTrack() Adds a new text track to the audio/video
canPlayType() Checks if the browser can play the specified audio/video type
load() Re-loads the audio/video element
play() Starts playing the audio/video
pause() Pauses the currently playing audio/video
Multimedia WepApp on Tizen - 7 - − HTML Audio/Video Properties
Property Description
audioTracks Returns an AudioTrackList object representing available audio tracks
autoplay Sets or returns whether the audio/video should start playing as soon as it is loaded
buffered Returns a TimeRanges object representing the buffered parts of the audio/video
controller Returns the MediaController object representing the current media controller of the au dio/video
controls Sets or returns whether the audio/video should display controls (like play/pause etc.)
crossOrigin Sets or returns the CORS settings of the audio/video
currentSrc Returns the URL of the current audio/video
currentTime Sets or returns the current playback position in the audio/video (in seconds)
defaultMuted Sets or returns whether the audio/video should be muted by default
defaultPlaybackRate Sets or returns the default speed of the audio/video playback
duration Returns the length of the current audio/video (in seconds)
ended Returns whether the playback of the audio/video has ended or not
Multimedia WepApp on Tizen - 8 - Property Description
error Returns a MediaError object representing the error state of the audio/video
loop Sets or returns whether the audio/video should start over again when finished Sets or returns the group the audio/video belongs to (used to link multiple audio/video el mediaGroup ements) muted Sets or returns whether the audio/video is muted or not networkState Returns the current network state of the audio/video paused Returns whether the audio/video is paused or not playbackRate Sets or returns the speed of the audio/video playback played Returns a TimeRanges object representing the played parts of the audio/video preload Sets or returns whether the audio/video should be loaded when the page loads readyState Returns the current ready state of the audio/video seekable Returns a TimeRanges object representing the seekable parts of the audio/video seeking Returns whether the user is currently seeking in the audio/video src Sets or returns the current source of the audio/video element startDate Returns a Date object representing the current time offset textTracks Returns a TextTrackList object representing the available text tracks videoTracks Returns a VideoTrackList object representing the available video tracks volume Sets or returns the volume of the audio/video
Multimedia WepApp on Tizen - 9 - − HTML Audio/Video Events
Event Description abort Fires when the loading of an audio/video is aborted canplay Fires when the browser can start playing the audio/video Fires when the browser can play through the audio/video without stopping for b canplaythrough uffering durationchange Fires when the duration of the audio/video is changed emptied Fires when the current playlist is empty ended Fires when the current playlist is ended error Fires when an error occurred during the loading of an audio/video loadeddata Fires when the browser has loaded the current frame of the audio/video loadedmetadata Fires when the browser has loaded meta data for the audio/video loadstart Fires when the browser starts looking for the audio/video pause Fires when the audio/video has been paused play Fires when the audio/video has been started or is no longer paused Fires when the audio/video is playing after having been paused or stopped for b playing uffering progress Fires when the browser is downloading the audio/video
Multimedia WepApp on Tizen - 10 - Event Description ratechange Fires when the playing speed of the audio/video is changed
seeked Fires when the user is finished moving/skipping to a new position in the audio/video
seeking Fires when the user starts moving/skipping to a new position in the audio/video
stalled Fires when the browser is trying to get media data, but data is not available
suspend Fires when the browser is intentionally not getting media data
timeupdate Fires when the current playback position has changed volumechange Fires when the volume has been changed waiting Fires when the video stops because it needs to buffer the next frame
Multimedia WepApp on Tizen - 11 - (2) HTML5 Audio
• Browser Supports
Browser MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all
Multimedia WepApp on Tizen - 12 - (3) HTML5 Plugs-in • HTML Helpers (Plug-ins) − Helper applications are computer programs that extend the standard functionality of a web browser. ⇔ Helper applications are also called plug-ins . ⇔ Examples of well-known plug-ins are Java applets . − Plug-ins can be added to web pages with the
Multimedia WepApp on Tizen - 13 - • The
Multimedia WepApp on Tizen - 14 - (4) HTML5 YouTube Videos • Playing a YouTube Video in HTML − Upload the video to YouTube (automatic format conversion by YouTube !!) − Take a note of the video id − Define an
Multimedia WepApp on Tizen - 15 - − controls ⇔ Value 0: Player controls does not display. The video loads immediately. ⇔ Value 1 (default) : Player controls display. The video loads immediately. ⇔ Value 2: Player controls display, but the video does not load before the user initiates playback. − Loop ⇔ Value 0 (default) : The video will play only once. ⇔ Value 1: The video will loop (forever). − playlist ⇔ A comma separated list of videos to play (in addition to the original URL).
Multimedia WepApp on Tizen - 16 - (5) Accessing Media Streams and Playing − Retrieving information about media files from the device’s file system is achieved through using the ContentManager . ⇔ In order to do this function, the application needs the correct privileges. ⇔ Adding the following URIs to the Privileges section of the config.xml file will grant both read and write access for your application: ⇒ http:// tizen.org/privilege/content.read ⇒ http:// tizen.org/privilege/content.write • Discovering Multimedia Contents
list all the public media directories through the getDirectories function: (simple version)
var success = function(directories) { directories.forEach(function(directory){ console.log( directory.directoryURI); }); }; var error = function(e) { alert(' Error: ' + e.message); };
tizen.content.getDirectories( success , error );
Multimedia WepApp on Tizen - 17 - • Accessing Media Streams getusermedia : Getting access to local devices that can generate
multimedia streams ( W3C Editor's Draft 30 November 201 1)Getusermedia tutorial
Multimedia WepApp on Tizen - 18 - • Playing Multimedia Content
① Create the video element and buttons used to control the play and pause:
② Define the button functions. Play and pause the media file using the play() and pause() methods of the HTMLMediaElement interface
Multimedia WepApp on Tizen - 22 - − Displaying Progress State • The buffered attribute of the video object returns a TimeRanges object that represents the downloaded buffering range.
• Use the end property of the TimeRanges object to find out the