Tizen provide support to extracting media property information and metadata from media content. Below are the lists of codec supported by Tizen platform.

• Audio decoder: AAC, MP3,WMA 7/8,WAV, Vorbis, AMR-NB / AMR-WB
• Audio encoder: Vorbis,AMR-NB
• Video decoder: MPEG-1,MPEG-4 part 2 MS v1/2/3,H.263, H.264, WMV3,VC1, Theora
• Video encoder: MPEG-4 part 2,H.263,Theora

Table of Content

• Prerequisites
• Supported Codecs
• Retrieve All Media Folders
• Playing Audio with HTML5
• Retrieve All Audio Items
• Retrieve All Audio Items From Internal/External Storage
• Stream Audio
• Launch Audio Playback Service
• Playing Video in HTML5
• Retrieve All Video Items
• Retrieve All Video Items From Internal/External Storage
• Stream Video
• Launch Video Playback Service
• Record Video
• MultiMediaView

Prerequisites

The Content API provides two levels of access, one is read-only and the other allows for full read and write access.

To allow your application to access these features enable them in the config.xml.

• http://tizen.org/privilege/content.read: Privilege to allow read access.
• http://tizen.org/privilege/content.write: Privilege to allow write access.

If you want to do it manually, add the following tag to the config.xml as shown below.

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:Tizen="http://Tizen.org/ns/widgets" version="2.0 Beta" viewmodes="fullscreen" id="http://yourdomain/Call" >
    <icon src="icon.png"/>
    <content src="index.html"/>
    <name>Application Name</name>

   <feature name="http://tizen.org/privilege/application.read" required="true"/>
   <feature name="http://tizen.org/privilege/content.read" required="true"/>
   <feature name="http://tizen.org/privilege/content.write" required="true"/>

</widget>

Launching the Tizen Media Service

To launch the Tizen based media player you need to add the application.launch permissions to your application's config.xmlfile.

<widget xmlns="http://www.w3.org/ns/widgets" xmlns:Tizen="http://Tizen.org/ns/widgets" version="2.0 Beta" viewmodes="fullscreen" id="http://yourdomain/Call" >
    <icon src="icon.png"/>
    <content src="index.html"/>
    <name>Application Name</name>
    
    <feature name="http://tizen.org/privilege/application.launch" required="true"/>
    
</widget>

To Play Media File in Emulator

To play audio in emulator please follow the below instructions.

Supported Codecs

Tizen supported container formats are: MP4,3GP, AVI, WM 7/8, ASF, MKV, MP3, AAC, WMV, AMR, WMA, OGG, WAV.

Tizen supports the following media formats and codecs.

Retrieve All Media Folders

The Content API provides the methods to retrieve multimedia contents (such as audio, videos, music files) that are available on the device. Filters can be used to search for specific media items (also specific to a folder search). The API also supports setting specific media item attributes. When the application is launched, a content object is instantiated automatically in the Tizen object. The Tizen.content can be used to retrieve the ContentManagerinterface instance,which provides the media content retrieval features.

To find all the media folders on the device, first get an ContentManager interface instance and call the manager.getDirectories() method without the filter parameter as shown below,

// Define the error callback for all the asynchronous calls
function onError(response) {
    console.log( "The following error occurred: " + response.name);
}

// got the folder list as asynchronous calls
function DirectoryArray(directories) {
    console.log("Found directories " + ", directories.length: " + directories.length);
   for (var i = 0; i < directories.length; i++) {
        console.log(i + ":" + " title: " + Directories[i].title);
        console.log("path : " + Directories[i].folderURI);
     }
}
// Get a local media source.
var manager = Tizen.Content;

// Let's try to retrieve the folder list.
manager.getDirectories(DirectoryArray,onError);

If the search is successful, the success callback is invoked and the list of all folders is returned as an array of ContentDirectories objects.

Playing Audio with HTML5

The Audio Element

<audio src="audiofile.mp3" controls autoplay loop>
    Your device or browser cannot play this audio file
</audio>

Attributes of the Audio Element

Tizen supports all of the HTML5 audio attributes. Use the src attribute to specify the audio file, and the controls attribute to make sure that the built-in player controls are used.

Just like an HTML link, you can specify the path to your audio as either a relative path or a complete URI. For example a relative path looks like this "media/audiofile.mp3" and complete URI looks like "http:\\www.example.com\media\audiofile.mp3"

controls

You can use this attribute to add the default controls to your audio. The controlsattribute is a boolean value. Using this attribute, the audio controls shall be displayed allowing the user to control playback of audio files, including volume, seeking, and pause/resume.

<audio src="audiofile.mp3" controls> </audio>

loop

Using this attribute, you can enable the player to automatically seek back to the beginning once it reaches the end of file.

<audio src="audiofile.mp3" controls loop></audio>

autoplay

Using this attribute, you can set the player to start playing immediately after the page is loaded.

<audio src="audiofile.mp3" controls autoplay></audio>

autobuffer

Using this attribute, you can set the audio to start buffering automatically, even if it is not set to autoplay.

<audio src="audiofile.mp3" controls autobuffer></audio>

preload

Using this attribute, you can specify that the audio shall be loaded on page load, and ready to run. This attribute can be ignored if autoplay is used.

<audio src="audiofile.mp3" preload="auto" controls ></audio>

Using this attribute, you can set the audio element for buffering large files. You can set one of 3 possible values:

• "none" no buffering
• "auto" media file buffering
• "metadata" buffers metadata of media file only

Using the Source Element to Specify Multiple Audio Formats

Multiple source files can be specified using the source element in order to provide audio encoded in different formats for different browsers. The element source replaces the src attribute of the audio tag. Unlike the src attribute, you can have multiple source elements inside an audio tag. A browser will load the file referenced by the first source element it finds that it can actually work with. Let's look at the first example again, this time with source attributes.

The audio element can contain multiple source elements, each of which specify a the URL to an audio file. The browser will evaluation each source element in document order and determine if the file can be played. If the first source element references an audio format that the browser cannot play then it will evaluate the next source element. HTML5 browsers will look at each source element until it finds one that has a supported codec. If the browser evaluates all the source elements and does not find one that can be played then it will display the text, usually an error message, contained within the audio element.

<!-- The browser will automatically choose the format it supports. -->
<audio controls="true">
    <source src=" audiofile.mp3">
    <source src=" audiofile.ogg">
    <source src=" audiofile.aac">
    <!-- If no support at all. -->
    HTML5 audio not supported
</audio>

Using the Type Attribute

You can use the type attribute to be more precise when there are several different types of audio sources. The type attribute tells the browser whether it should attempt to load the file or not.

The browser determines, if it can support the file format mentioned in the "type" or not.If it determines that it cannot play the format, then it does not try loading it. In the absence of the attribute , browser tries loading all the specified audio formats till it finds the one it supports. The type attribute is optional.The value of type attribute must be valid MIME types.

<audio controls="true">
    <source src=" audiofile.mp3" type="audio/mp3">
    <source src=" audiofile.ogg" type="audio/ogg">
    <source src=" audiofile.aac" type="audio/mp4">
    <!-- If no support at all. -->
    HTML5 audio not supported
</audio>

Using the Codec Attribute

At times, when we have same types and different codecs to be supported, then specifying a codec along with the type attribute allows the browser access only the codec which it supports. Using the codec attribute with the type attribute helps the browser determining whether it has to load the file or not, saving unnecessary process of loading and then validating the supported formats later in time.

<audio controls="true">
    <source src=" audiofile.ogg" type="audio/ogg; codecs=vorbis">
    <source src=" audiofile.spx" type="audio/ogg; codecs=speex">
    <source src=" audiofile.oga" type="audio/ogg; codecs=flac">
    <!-- If no support at all. -->
    HTML5 audio not supported
</audio>

Retrieve All Audio Items

• find - Retrieves all the media (audio/video/image) items.

// Define the error callback for all the asynchronous calls
function onError(response) {
    console.log( "The following error occurred: " + response.name);
}

//List of audio items on the phone.
function mediaItemArray (contents) {
    console.log("Successfully retrieved the list of Audio items");
    for (var i=0; i < contents.length; i++) {
        console.log(i + ":" + contents[i].type + ":" + contents[i].title + ":" +contents[i].mimeType);
        console.log("album:" + contents[i].album);
        console.log("artists:" + contents[i].artists[0]);
        console.log("duration:" + contents[i].duration);
        console.log("playedTime :" + contents[i].playedTime);
        console.log("playCount :" + contents[i].playCount);
        console.log("Item copyright: " + contents[i].copyright);
        console.log("Item bitrate: " + contents[i].bitrate);
        console.log("Item trackNumber: " + contents[i].trackNumber);
        console.log("Item size: " + contents[i].size);
    }
}

// Retrieve the ContentManager interface instance using the tizen global object
var manager = tizen.content;

// Let's try to retrieve the Audio list.
var contentType = "AUDIO";
var filter = new Tizen.AttributeFilter("type", "EXACTLY", ContentType);
console.log("Getting the list of audio files on the phone");
manager.find(MediaItemArray, onError, null, filter);

Retrieve All Audio Items From Internal/External Storage

var mediaSource;
var index ;
var len = 0;
var folderArray = [];
var typeFilter = new Tizen.AttributeFilter("type", "EXACTLY", "AUDIO");

// Define the error callback for all the asynchronous calls
function onError(response) {
    console.log( "The following error occurred: " + response.name);
}

//List the audio items on the phone.
function MediaItemArraySuccess(media) {
    console.log("Successfully retrieved the list of audio items");
    for(var i in media) {
        console.log(i + ":" + media[i].type + ":" + media[i].title + ":" +media[i].mimeType);
        console.log("album:" + media[i].album);
        console.log("artists:" + media[i].artists[0]);
        console.log("duration:" + media[i].duration);
        console.log("playedTime :" + media[i].playedTime);
        console.log("playCount :" + media[i].playCount);
        console.log("Item copyright: " + media[i].copyright);
        console.log("Item bitrate: " + media[i].bitrate);
        console.log("Item trackNumber: " + media[i].trackNumber);
        console.log("Item size: " + media[i].size);
    }
}

// get the folder list as asynchronous calls
function MediaFolderArray(folders){
    len = folders.length
    for (var i = 0; i < len; i++) {
    if (folders[i].storageType == "INTERNAL") {
        folderArray.push(folders[i]);

        console.log(i + ":" + " title: " + folders[i].title);
        console.log("id: " + folders[i].id);
        console.log("path : " + folders[i].folderURI);
        console.log("storageType : " + folders[i].storageType);
        console.log("modifiedDate : " + folders[i].modifiedDate);
    }
}
    console.log(folders.length + " internal folder(s) found");
    for(index=0; index<len; index++) {
        console.log("Start getting the list of audio items from folder with id: "+ folderArray[index].id);
        mediaSource.find(MediaItemArraySuccess, onError, folderArray[index].id, typeFilter);
    }
}

// Get a ContentManager instance using the tizen global object
mediaSource = tizen.content;

console.log("Start getting the list of folders in internal memory");
// Let's try to retrieve the folder list.
mediaSource.getDirectories(MediaFolderArray,onError);

Stream Audio

<audio id="audioplayer" src="http://www.samplemusic.com/music/samplefile.ogg" type="audio/ogg" controls> </audio>

Note: Currently on Tizen 2.1, there are know issues with Mp3 streaming and other formats. Only OGG file format works fine.

Launch Audio Playback Service

• id - Identifier of the application to be launched
• successCallback - Function called when the invocation ends successfully
• errorCallback - Function called when an error occurs

 // function called on successful launch of music player application
 function onsuccess() {
     console.log("The application has launched successfully");
 }

 tizen.application.launch("org.tizen.music-player", onsuccess);

Launch Music Player Service with Controls

Depending on your requirements, you can also launch native media player with application control, i.e if you need music player to provide certain functionality and then want to pass the control back to your application after performing the requested service.

This can be done as below,

//Create an ApplicationControl object and define the desired functionality required from the application to be launched. The application needs to have an operation type suitable for selecting files, with URI as null, and the MIME type as "audio/*" .

var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view", null, "audio/*");

//Define the format of the reply you want to receive from the application control
var appControlReplyCB =
{
   // Reply is sent if the requested operation is successfully delivered
   onsuccess: function(reply)
   {
      for (var num = 0; num < reply.data.length; num++)
      {
         console.log("reply.data["+num+"].key = "+ reply.data[num].key);
         console.log("reply.data["+num+"].value = "+ reply.data[num].value);
      }
   }
}
// Call the launchAppControl() method to find a suitable application to select the audio files
tizen.application.launchAppControl(appControl, null,
                  function(){console.log("launch appControl succeeded");},
                  function(e){console.log("launch appControl failed. Reason: " + e.name);},
                  appControlReplyCB);

Playing Video in HTML5

The HTML5 Video Element

By using video tag you can play videos/movies and audio files with captions

<video width="640" height="480" controls="controls">
      <source src="video.mp4" type="video/mp4" />
      <source src="video.ogg" type="video/ogg" />
      Browser does not support the video tag.
</video>

Attributes of the HTML5 Video Element

Tizen supports following attributes with video tag:

controls

This attribute is used to add the default controls to your video. The controls attribute is a boolean value. Default video controls will be displayed, if specified.

<video width="320" height="240" src="movie.mp4" controls></video>

poster

This attribute is used to display a frame of video (as a .jpg, .png, etc…) while the video is downloading. It can be a local image or elsewhere on the web.

<video width="320" height="240" src="WebContent\movie.mp4" poster="icon.png"></video>

loop

This attribute is used to continuously repeat playback of the video. The loop attribute is a boolean value. Continuous playback (starts again after end of playback) of the video will happen, if specified.

<video width="320" height="240" src="movie.mp4" loop></video>

muted

This attribute is used to mute the audio output of the video. The muted attribute is a boolean value. Audio output of the video playback will be muted, if specified.

<video width="320" height="240" src="movie.mp4" muted></video>

autoplay

This attribute can be used, when you wish to start the video playback immediately after the page is loaded. The autoplay attribute is a boolean value.

<video width="320" height="240" src="movie.mp4" autoplay></video>

Retrieve All Video Items

• getLocalMediaSource - Gets the local media source, which should be used for retrieving items.
• getFolders - Get the folders to the media content asynchronously.
• findItems - Asynchronously retrieves all the videos in the phone.

// Define the error callback for all the asynchronous calls
function onError(response) {
    console.log( "The following error occurred: " + response.name);
}

//List of videos in the phone.
function mediaItems (media) {
    console.log("Successfully retrieved the list of videos");
    for(var i in media) {
        console.log(i + ":" + media[i].type + ":" + media[i].title + ":" +media[i].mimeType);
        console.log("geolocatoin-latitude:" + media[i].geolocation.latitude + " longitude:" + media[i].geolocation.longitude);
        console.log("album:" + media[i].album);
        console.log("artists:" + media[i].artists[0]);
        console.log("duration:" + media[i].duration);
        console.log("width:" + media[i].width);
        console.log("height:" + media[i].height);
        console.log("playedTime :" + media[i].playedTime);
        console.log("playCount :" + media[i].playCount);
      }
}

// Retrieve the ContentManager interface instance using the tizen global object.
var manager = tizen.content;

// Let's try to retrieve the videos list.
var contentType = "VIDEO";
var filter = new Tizen.AttributeFilter("type", "EXACTLY", contentType);
manager.find(MediaItems, onError, null, filter);

Retrieve All Video Items From Internal/External Storage

var mediaSource;
var index = 0;
var len = 0;
var folderArray = [];
var typeFilter = new Tizen.AttributeFilter("type", "EXACTLY", "VIDEO");

// Define the error callback for all the asynchronous calls
function onError(response) {
    console.log( "The following error occurred: " + response.name);
}

//List of videos in the phone.
function MediaItems (media) {
    console.log("Successfully retrieved the list of videos");
    for(var i in media) {
        console.log(i + ":" + media[i].type + ":" + media[i].title + ":" +media[i].mimeType);
        console.log("geolocatoin-latitude:" + media[i].geolocation.latitude + " longitude:" + media[i].geolocation.longitude);
        console.log("album:" + media[i].album);
        console.log("artists:" + media[i].artists[0]);
        console.log("duration:" + media[i].duration);
        console.log("width:" + media[i].width);
        console.log("height:" + media[i].height);
        console.log("playedTime :" + media[i].playedTime);
        console.log("playCount :" + media[i].playCount);
      }

     if(index < len) {
        console.log("Start getting the list of videos from folder with id: "+ folderArray[index].id);
        mediaSource.find(MediaItems, onError, folderArray[index++].id, typeFilter);
      }
}

// get the folder list as asynchronous calls
function MediaFolders (folders){
    console.log(folders.length + " folder(s) found");
    len = folders.length
    for (var i = 0; i < len; i++) {
        if (folders[i].storageType == "INTERNAL") {
             folderArray.push(folders[i]);

             console.log(i + ":" + " title: " + folders[i].title);
             console.log("id: " + folders[i].id);
             console.log("path : " + folders[i].folderURI);
             console.log("storageType : " + folders[i].storageType);
             console.log("modifiedDate : " + folders[i].modifiedDate);
        }
    }
    console.log(folders.length + " internal folder(s) found");
    if(index < len) {
        console.log("Start getting the list of videos from folder with id: "+ folderArray[index].id);
        mediaSource.find(MediaItems, onError, folderArray[index++].id, typeFilter);
    }
}

// Retrieve the ContentManager interface instance using the tizen global object.
mediaSource =  = tizen.content;

console.log("Start getting the list of folders in internal memory");
// Let's try to retrieve the folder list.
mediaSource.getDirectories(MediaFolders,onError);

Stream Video

<video width="640" height="360" src="https://m.youtube.com/watch?v=example" poster="Tizen.png"></video>

Launch Video Playback Service with Controls

By using the Tizen.application.launchAppControl() method, you can request system to launch video player application that provides the service. It takes the following arguments:

• appControl - The data structure describing application control details.
• id - An identifier of the application to be launched. If the ID is null or not specified, then the system tries to find the application to be
  launched for the requested application control. [nullable]
• successCallback - The method to call when the invocation ends successfully. [optional] [nullable]
• errorCallback - The method to invoke when an error occurs. [optional] [nullable]
• replyCallback - The method to invoke when the application gets back results from the launched application. [optional] [nullable]

//Create an ApplicationControl object and define the desired functionality required from the application to be launched. The application needs to have an operation type suitable for selecting files, with URI as null, and the MIME type as "video/*" .

var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/view", null, "video/*");

Define the format of the reply you want to receive from the application control:
var appControlReplyCB =
{
   // Reply is sent if the requested operation is successfully delivered
   onsuccess: function(reply)
   {
      for (var num = 0; num < reply.data.length; num++)
      {
         console.log("reply.data["+num+"].key = "+ reply.data[num].key);
         console.log("reply.data["+num+"].value = "+ reply.data[num].value);
      }
   }
}
// Call the launchAppControl() method to find a suitable application to select the video files:
tizen.application.launchAppControl(appControl, null,
                 function(){console.log("launch appControl succeeded");},
                 function(e){console.log("launch appControl failed. Reason: " + e.name);},
                 appControlReplyCB);

Record Video

To record a video with the rear camera, the you might need to use the native camera application using the Tizen's device API's application launch and control methods.Currently there is no support (or no API's exposed) for web applications to directly communicate with the device's rear camera. On the other hand, native applications can access the rear camera directly using the Tizen::Media::Camera: interfaces.

var appControl = new tizen.ApplicationControl("http://tizen.org/appcontrol/operation/create_content", null, "video/*");

var appControlReplyCB = {
   // callee now sends a reply
   onsuccess: function(reply) {
      for (var num = 0; num < reply.data.length; num++) {
        console.log("reply.data["+num+"].key = "+ reply.data[num].key);
        console.log("reply.data["+num+"].value = "+ reply.data[num].value);
      }
   },
   // Something went wrong
   onfail: function() {
      console.log('Launch service failed');
   }
};
//Launch the service with control
tizen.application.launchAppControl(appControl, null,
                 function(){console.log("launch appControl succeeded");},
                 function(e){console.log("launch appControl failed. Reason: " + e.name);},
                 appControlReplyCB);

And if you wish to do a video recording using the front camera, please use the W3C's API "getusermedia". Below is a simple example showing how to do that,

Note: The front camera is not accessible on the developer devices, so this API will not work on the device. Works fine on emulator with webcam.

HTML code:

	<video id="videoPlay" src="" autoplay controls></video>
	<input type="button" value="START" onclick="getVideoStream();">

Javascript code:

function getVideoStream()
{
   navigator.webkitGetUserMedia({video : true}, SuccessCallBack, errorCallBack);
}

function SuccessCallBack(stream)
{
   var URL = window.webkitURL;
   document.getElementById("videoPlay").src =  URL.createObjectURL(stream);
}    

function errorCallBack(error)
{
	alert('No support for webkitGetUserMedia()');
}

MultiMediaView

MultiMediaView is a widget that lets the user view and handles multimedia contents. Video and audio elements are coded as standard HTML elements and enhanced by the MultiMediaview to make them attractive and usable on a mobile device.

Data attributes

• data-theme - Set a theme of widget. If this value is not defined,widget will use parent's theme (optional).
• data-control - Enables media controls.
  
  • If this value is set to "true" (default), the widget uses belonging controller.
  • If this value is set to "false", the widget uses the browser's controller.
• data-full-screen - Sets the widget status to full screen when it is initially started.Default value is "false".

Events

You can bind the events directly to the video or audio element using jQuery Mobile virtual events, or standard JavaScript events.

• create - Triggered when a multimediaview is created.

Methods

• width - Gets or sets the widget width.
• height - Gets or sets the widget height.
• size - Sets the widget size and resizes it. The first argument is the width and the second argument the height of the widget.
• fullscreen - Widget is shown in full screen.

To add a multimedia view widget to the application, use the following code:

// Video player control
<video data-controls="true" style="width:100%;" data-theme="c">
   <source src="<VIDEO_FILE_URL>" type="video/mp4" />
   Your browser does not support the video tag.
</video>

// Audio player control
<audio data-controls="true" style="width:100%;">
   <source src="<AUDIO_FILE_URL>" type="audio/mp3" />
   Your browser does not support the audio tag.
</audio>

The multimedia view can define a callback for the create event, which is fired when the widget is created.

$('.selector').multimediaview({
   create: function(event, u){...}
});

$(".selector").bind("create", function(event, ui)
{
   // Respond to the multimedia view widget creation
});

The following list describes methods that can be used with multimedia views:

width

The width method is used to get (if no value is defined) or set the multimedia view widget width:

<video data-full-screen="true">
   <source src="test.mp4" type="video/mp4" />
</video>

$(".selector").multimediaview("width", [value]);

height

The height method is used to get (if no value is defined) or set the multimedia view widget height:

<video data-full-screen="true">
   <source src="test.mp4" type="video/mp4" />
</video>

$(".selector").multimediaview("height", [value]);

fullScreen

The fullScreen method is used to get (if no value is defined) or set the fullscreen mode of the multimedia view widget. If the value is true, the fullscreen mode is used; otherwise the multimedia view widget runs in the normal mode.

<video data-full-screen="true">
   <source src="test.mp4" type="video/mp4" />
</video>

$(".selector").multimediaview("fullScreen", [value]);