Create a Custom MediaElementAdapter
This topic discusses the MediaElementAdapter class and describes the necessary steps to add a custom MediaElementAdapter object to your app. This object acts as an interface between your media and your MediaPlayer object. MediaPlayer never directly relays commands to the audio or video tag. It relays the commands to the MediaElementAdapter object, which is responsible for performing the action. When you create a MediaPlayer object, it creates a default MediaElementAdapter object to use as the interface.
Figure 1. MediaElementAdapter organization
Figure 1 demonstrates what happens when the user presses the play button for the MediaPlayer object. MediaElementAdapter relays the play command to a video tag. This causes the video to begin playing.
Creating a custom adapter enables you to override many of the commands that are sent from MediaPlayer to the media. When you override the commands, you can execute any custom logic before the commands are sent to the audio or video tag. One example of using a customized adapter is when you want to do any custom logging for your app.
Since the MediaElementAdapter object is responsible for acting as an interface between the MediaPlayer object and the audio or video tag, MediaElementAdapter needs to handle the commands received from MediaPlayer. This means that when your code overrides a command, it is responsible for handling the command appropriately. Otherwise, the command will appear to have no effect to the user.
Tip
You may notice that there are no methods in MediaElementAdapter for the fast forward or rewind commands. This is because all methods for skipping time are represented by seek.
The MediaElementAdapter is only responsible for commands that are sent directly to the audio or video tag. If you want to respond to commands not related to the audio or video tags, you must listen for and respond to mediacommandexecuted.
##Adding a Custom MediaElementAdapter
This first section of code is from the body of the project. There is nothing specific to MediaElementAdapter in this section; it is provided to show the IDs of the media player and video tag.
<body>
<div id="myMediaPlayer">
<video id="myVideo" autoplay="autoplay" src="http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4">
</video>
</div>
</body>
The following code is from the default JavaScript file. The first step is to create a custom MediaElementAdapter object. The adapter should be derived from the TVJS.MediaElementAdapter class. This ensures that the customized adapter inherits the implementation of the methods that it does not override. The class provided here overrides the seek method to perform some custom logging.
The second step is to instantiate a new instance of the custom adapter and connect it to the MediaPlayer.
JavaScript
var MyMediaElementAdapter = WinJS.Class.derive(TVJS.MediaElementAdapter,
function constructor(mediaPlayer, mediaElement) {
// You must call baseMediaElementAdapterConstructor to initialize
// your adapter correctly.
this.baseMediaElementAdapterConstructor(mediaPlayer, mediaElement);
},
{
// This section overrides the seek function
seek: function (newTime) {
// This is where you can perform your special processing
// In this example, we log the seek command
console.log(newTime + " seconds.");
// This line ensures that the seek function still works as expected
this.mediaElement.currentTime = newTime;
}
});
// Get the MediaPlayer
var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
// Get the loaded video element
var mediaElement = document.getElementById("myVideo");
// Create the custom adapter and connect it to the player
mediaPlayer.mediaElementAdapter = new MyMediaElementAdapter(mediaPlayer, mediaElement);