Samsung Electronics logo

Playing Content

Table of Contents


With Samsung Web APIs, an AllShare application can play media stored in an external content provider or local device after collecting the media information. In Samsung Web APIs, media information is represented as Item. An Item object can be retrieved by browse() or search() in provider APIs (see example code in section 'Browsing and searching contents').

This section demonstrates how to play content on local and remote devices. Information on how to control and monitor the status of media content is also included.

Playback on Local Device

To play media content on local devices without an AVPlayer/ImageViewer instance, you can use HTML 5 elements such as <img>, <audio>, and <video> tag.

 Here are descriptions of the tags:

 
/*
* HTML file that demonstrates how to play a video using HTML tag.
*/
<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
	<button onclick="playPause()">Play/Pause</button> 
	<br/>
	<video id="videoId" src="" width="420">
		Your browser does not support HTML5 video.
	</video>
</div> 
<script>
function selectItemToPlay(){
	// This function is invoked when a user selects an item to play.
	var itemToPlay; // It is assumed that you have obtained the item through search(), browse() API.
	var myVideo=document.getElementById("videoId");  // Get video DOM object.
	// Set video source.
	myVideo.src = itemToPlay. itemUri;
}
function playPause()
{ 
	if (myVideo.paused) {
		myVideo.play(); 
	} else {
		myVideo.pause(); 
    }
} 
</script> 
</body> 
</html>
			

Playback on Remote Device

To play media content on remote devices, you must first select the target device. Use DeviceFinder to get a list of AllShare devices.

 
//It is assumed that you obtained deviceFinder. For details, see sample code in section 'Discovering AllShare Devices'. 
var avplayers = deviceFinder.getDeviceList('AVPLAYER');
var imgviewers = deviceFinder.getDeviceList('IMAGEVIEWER');
				

To play the content, you must invoke:

void play(Item item, AVPlayerSuccessCallback successCallback, AVPlayerErrorCallback? errorCallback, ContentInfo? contentInfo) – in case of AVPlayer device.

void show(Item item, ImageViewerSuccessCallback successCallback, ImageViewerErrorCallback? errorCallback) – in case of ImageViewer device.

AVPlayer provides suitable methods to control content playback: play(), stop(), pause(), resume(), seek(). ImageViewer provides show() and hide(). These commands are not performed immediately; they are invoked asynchronously and their results are returned through callbacks. For each command, communication must take place between the mobile and external devices. Since this communication may take long time, an application must register an event listener in order to receive the results of method invocation.

 
// Variable stored last play position. It will be changed in other part of the application.
var localCurrentTime = 0; 

// Item that will be played on remote player. It is assumed that you obtained an Item instance to play.   
var itemToPlay;

var sCB = function(deviceID) {
    // play() request is executed successfully.
};
    
var eCB = function(){
    // play() request failed.
};

if (itemToPlay.itemType == 'IMAGE') {
	player.show(itemToPlay, SCB, ECB);
} else {
	if (localCurrentTime > 0) {
		if (confirm(“Do you want to play the content from current position?”)) {
		
			// It is assumed that you obtained player instance.
			var cntInfo = {};
			cntInfo.startingPosition = localCurrentTime;
			player.play(itemToPlay, sCB, eCB, cntInfo);
		} else {
			player.play(itemToPlay, sCB, eCB);
		}
	} else {
		player.play(itemToPlay, playSCB, playECB);
	}
}
			

Methods to control content playback are listed in the table below:

Interface Method/Attribute Description
AVPlayer void play(in Item item, in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback, in optional ContentInfo? contentInfo) Asynchronous function for playing content on the AVPlayer device.
void stop(in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for stopping the content currently playing on the AVPlayer device.
void seek(in unsigned long position, in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for changing the playing position of the AVPlayer, in seconds.
void pause(in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for pausing content playing on AVPlayer device.
void resume(in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for resuming content playing on AVPlayer device.
void getVolume(in AVPlayerVolumeSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for getting volume of AVPlayer device.
void setVolume(in unsigned short level, in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for setting volume of AVPlayer device.
void getMute(in AVPlayerMuteSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for getting mute status of the AVPlayer device.
void setMute(in boolean muted, in AVPlayerSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for setting mute status of AVPlayer device.
void getPlayPosition(in AVPlayerPlayPositionSuccessCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for getting the media play position of AVPlayer device.
ImageViewer void show(in Item item, in ImageViewerSuccessCallback successCallback, in optional ImageViewerErrorCallback? errorCallback) Show image content to the player with the item and contentInfo.
void hide(ImageViewerSuccessCallback successCallback, ImageViewerErrorCallback? errorCallback) Hide the image displayed in the image viewer.

Playback Control and Monitoring

Developers can check the state of ImageViewer and AVPlayer. Sometimes, knowing only the result of an invoked method is insufficient. For example, when you play music on a TV, at the end of music playback, the TV play state may be automatically changed to stop state, even if the developer does not request it.

For such cases, developers can register event listener by invoking addAVPlayerStateChangeListener() on the AVPlayer device and addImageViewerStateChangeListener(). This notifies you of device status changes.

 
// Define AVPlayer state change listener.
function avplayerStateListener(state, playerID) {
	switch (state) {
		case 'UNKNOWN':
			// Do Something.
			break;
		case 'STOPPED':
			// Do Something.
			break;
		case 'BUFFERING':
			// Do Something.
			break;
		case 'PLAYING':
			// Do Something.
			break;
		case 'PAUSED':
			// Do Something.
			break;
		case 'CONTENT_CHANGED':
			// Do Something.
			break;
		default:
			// Do Something.
			break;
	}
}

// Define ImageViewer state change listener.
function imageviewerStateListener(state, playerID) {
	switch(state) {
		case 'UNKNOWN':
			// Do Something.
			break;
		case 'STOPPED':
			// Do Something.
			break;
		case 'BUFFERING':
			// Do Something.
			break;
		case 'SHOWING':
			// Do Something.
			break;
		case 'CONTENT_CHANGED':
			// Do Something.
			break;
		default:
			// Do Something.
			break;
	}
}

// Watch player state
var watchStatusId;
if (player.deviceType == 'IMAGEVIEWER') {
	watchStatusId = player.addImageViewerStateChangeListener(imageviewerStateListener);
} else if (player.type =='AVPLAYER') {
	watchStatusId = player.addAVPlayerStateChangeListener(avplayerStateListener);
}
				

AVPlayer can be in one of the states defined in the following table. Each state allows different actions.

State Description Description
STOPPED AVPlayer is in stopped state. stop(), play(), seek()
BUFFERING AVPlayer is in buffering state. stop(), seek()
PLAYING AVPlayer is in playing state. stop(), pause()
PAUSED AVPlayer is in paused state. stop(), pause()
UNKNOWN AVPlayer is in unknown state. stop()
CONTENT_CHANGED AVPlayer media content has been changed by other device. stop()

'UNKNOWN' state indicates that there is a problem with the network connection and an application (or service) is not able to determine its state.

'CONTENT_CHANGED' state indicates that the content of the device has been changed by other device. If an application receives this event, the application initializes its playing status UI.

The following diagram shows the states flow of AVPlayer.

ImageViewer can be in one of the states defined in the following table. Different actions are available in each state.

State Description Description
STOPPED ImageViewer is in stopped state. hide(), show()
BUFFERING ImageViewer is in buffering state. hide()
SHOWING ImageViewer is in showing state. hide(), show()
UNKNOWN ImageViewer is in unknown state. hide()
CONTENT_CHANGED ImageViewer media content has been changed by other device. hide()

'UNKNOWN' state indicates that the network connection is not established correctly to clarify the current state (application is not able to determine its state).

'CONTENT_CHANGED' state indicates that the content of the device has been changed by another device. If an application receives this event, the application initializes its playing status UI.

The following diagram shows the state flow of ImageViewer.

As mentioned above, the status of each device can change when an application executes a command, as well as by the logic of the device itself or another controller. Therefore, the application must always register an event listener that monitors device state changes; the application must handle such changes.

Interface Method/Attribute Description
AVPlayer long addImageViewerStateChangeListener(in ImageViewerStateChangedCallback stateCallback) Registers a player state change listener.
void removeAVPlayerStateChangeListener(in long changeListenerId) Clears a player state change listener.
void getState(in AVPlayerStateCallback successCallback, in optional AVPlayerErrorCallback? errorCallback) Asynchronous function for getting the AVPlayer state.
ImageViewer long addAVPlayerStateChangeListener(in AVPlayerStateChangedCallback stateCallback) Set the image viewer event listener.
void removeImageViewerStateChangeListener(long changeListenerId) Remove the event listener.
void getState(in ImageViewerStateCallback successCallback, in optional ImageViewerErrorCallback? errorCallback) Retrieve the state of the image viewer.

To control playing an audio/video item, you can use stop(), pause(), resume(), and seek(); for image item, you can invoke stop().

The sample code for controlling an audio/video item playback is as follows:

 
// It is assumed that you have obtained an AVPlayer instance.
var player;

// Define common success callback to notify the application an operation request is successful.
function commSCB(playerID) {
	console.log(“operation success!”);
}

// Define common error callback to notify the application an operation request failed.
function commECB(error, playerID){
	console.log(“operation failed!”);
}
// Stop audio/video item playback.
player.stop(commSCB, commECB);

//Seek to a specific position
player.seek(1000, commSCB, commECB);

// Pause item playback.
player.pause(commSCB, commECB);

// Resume item playback.
player.resume(commSCB, commECB);

// Set volume.
player.setVolume(50, commSCB, commECB);

// Set mute.
player.setMute(true, commSCB, commECB);

// Define success callback to notify application when get volume information.
function getVolSCB(level, playerID){
	console.log(“volume level: “ + level);
}
player.getVolume(getVolSCB, commECB);

// Define success callback to notify application when get volume information.
function getMuteSCB(mute, playerID) {
	if (mute) {
		console.log(“Player is mute.”);
	} else {
		console.log(“Player is not mute”);
	}
}
player.getMute(getMuteSCB, commECB);

// Define success callback to notify application when get play position information.
function getPosSCB(pos, playerID) {
	console.log(“Current position: “ + pos);
}

player.getPlayPosition(getPosSCB, commECB);

			

The sample code for controlling an image item playback is as follows:

 		
// It is assumed that you have obtained an ImageViewer instance.
var player;

// Define success callback to notify the application an operation request is successful.
function sCB(playerID) {
	console.log(“hide operation is successfully completed!”);
}

// Define error callback to notify the application an operation request failed.
function eCB(error, playerID) {
	console.log(“operation failed!”);
}
//hide an image item.
player.hide(sCB, eCB);