Seamless Playback Using AVPlay

This topic describes how to play videos seamlessly on a Samsung TV.

Samsung TVs support seamless video playback, enabling you to play several videos one after another.

There are 2 modes for seamless video playback:

  • Single mode video playback
  • Mixer mode video playback

Single Mode Video Playback

This mode can be used when you want to play videos seamlessly in a single frame. This can be achieved using the AVPlay API.

  • To use the setVideoStillMode() method with true:
    This parameter holds the last frame of the video to be shown until playback starts again. This is applicable if you want to use 2 different videos (played sequentially) using seamless playback.

     webapis.avplaystore.setVideoStillMode("true"); 
    
  • To use the setVideoStillMode() method with false:
    This parameter disables still mode until it is enabled again.

    webapis.avplaystore.playing.setVideoStillMode(“false") ; 
    

Sample code:

var player1 = webapis.avplaystore.getPlayer();
var player2 = webapis.avplaystore.getPlayer(); 

listener2 = {
  onstreamcompleted: function() {
  player2.setVideoStillMode("true");
  player2.stop();
  player1.open(“http://test.com/test1.mp4”);
  player1.setListener(Listener1);
  player1.setDisplayRect(0, 0, 1920, 1080);
  player1.prepare();
  player1.setVideoStillMode("false");
  player1.play();
};

listener1 = {
  onstreamcompleted: function() {
  player1.setVideoStillMode("true");
  player1.stop();
  player2.open(“http://test.com/test2.mp4”);
  player2.setListener(Listener2);
  player2.setDisplayRect(0, 0, 1920, 1080);
  player2.prepare();
  player2.setVideoStillMode("false");
  player2.play();
};

try {
  player1.open(“http://test.com/test1.mp4”);
  player1.setListener(listener1);
  Player1.setDisplayRect(0, 0, 1920, 1080);
  player1.avplay.prepare();
  player1.avplay.play();
} catch (e) {
  console.log(e);
}


Mixer Mode Video Playback

This mode can be used when you need to play videos on 2 separate display rectangles on a single screen (1920x1080). You can play 2 playlists in a seamless manner when using this mode.

  • A maximum 2 videos can output on a single display.
  • A composite video frame is created by mixing 2 video frames together.
  • Only a single audio track, belonging to the first player, is played.
Figure 1. Mixer mode with 2 video player instances
Figure 1. Mixer mode with 2 video player instances
  1. To enable mixer mode using setStreamingProperty() with USE_VIDEOMIXER property:
    This method must be called before prepare() is called and the SET_MIXEDFRAME property is set.

    webapis.avplaystore.setStreamingProperty("USE_VIDEOMIXER");
    webapis.avplaystore.prepare();
    
  2. The SET_MIXEDFRAME property is also set before play() is called.

    webapis.avplaystore.setStreamingProperty("SET_MIXEDFRAME"); 
    webapis.avplaystore.play();
    

The following call sequence is for 2 video areas which can play videos in seamless mode.

Sample code for 2 videos:

try {
  var player1 = webapis.avplaystore.getPlayer();
  var player2 = webapis.avplaystore.getPlayer(); 
  player1.open(url1);
  player2.open(url2);
  
  // listener1 can be used for switching videos in seamless manner related to playlist1
  player1.setListener(listener1);
  
  // listener2 can be used for switching videos in seamless manner related to playlist2   
  player2.setListener(listener2); 
  player1.setStreamingProperty("USE_VIDEOMIXER");
  player2.setStreamingProperty("USE_VIDEOMIXER");
  player1.setDisplayRect(0, 0, 960,540);
  player2.setDisplayRect(960,540,960,540);
  player1.prepare();
  player2.prepare();
  player1.setStreamingProperty("SET_MIXEDFRAME");
  player2.setStreamingProperty("SET_MIXEDFRAME");
  player1.play();
  player2.play();
} catch (e) {
  console.log(e);
}

Sample code for 1 video:

 try {
  var player1 = webapis.avplaystore.getPlayer();
  player1.open(url1);
  player1.setListener(listener1); 
  
  // listener1 can be used for switching videos in seamless manner related to playlist1   
  player1.setStreamingProperty("USE_VIDEOMIXER");
  player1.setDisplayRect(0, 0, 960,540);
  player1.prepare();
  player1.setStreamingProperty("SET_MIXEDFRAME");
  player1.setDisplayRotation("PLAYER_DISPLAY_ROTATION_90"); // To play portrait content
  player1.play();
} catch (e) {
  console.log(e);
}