Skip to content
This repository has been archived by the owner on Jul 19, 2024. It is now read-only.

MediaPlayer Reference

Jump to bottom
Scott Miller edited this page Mar 17, 2016 · 6 revisions

A UI controls for video playback.

###Constructors MediaPlayer(element, options)
Creates a new MediaPlayer object.

element (HTMLElement) The DOM element that will host the control.
options (Object) The set of properties and values to apply to the new MediaPlayer control.

###Properties controlsVisible
type boolean
Gets a property that specifies whether the transport controls are visible.

endTime
type boolean
Gets or sets maximum playback position of the media. By default, the value is the duration of the media.

The default value for endTime is the duration of the media. If you are displaying live media, the default endTime is the duration of the live media stream when the user started playing the media stream. The value of endTime will not be automatically updated for live media.

Changing the endTime will reset the default chapter marks for your media.

element
type HTMLElement
The DOM element that hosts the MediaPlayer control.

commands
type HTMLElement
Gets or sets the commands that appear in the transport controls. The collection is an array of HTMLElements.

compact
type boolean
Gets or sets a value indicating whether the MediaPlayer is using a layout that minimized space used, but only has room for a limited number of commands or a layout that has room for a lot of commands, but takes up more space.

fullScreen
type boolean
Gets or sets a value indicating whether the MediaPlayer is full screen.

If you set fullScreen to true, it will have additional effects beyond having the MediaPlayer occupy the full screen. In addition, you will no longer be able to set the focus to the MediaPlayer. However, all event notifications will be sent through the MediaPlayer so that it always receives input.

This API will also put you in full screen mode on desktop and phone.

thumbnailEnabled
type boolean
Gets or sets a value indicating whether to use thumbnails for fast forward, rewind and scrubbing. If true, the fast forward, rewind and scrub operations will pause the mediaElement and cycle thumbnails as the user changes position. If false, the fast forward, rewind operations will increase or decrease the mediaElement's playbackRate and the scrub operation will move the position.

The MediaPlayer Class has two options of portraying the rewind, fast forward, and scrub functions. The first option is to pause the player and to display thumbnails of the current position. For example, when users rewind the media, a small thumbnail will show the current location as the player rewinds. However the main image in the background will remain static.

The second option is to change the playback rate for the MediaPlayer. In this case, the actual video will rewind and will update the entire display for the player.

This property determines whether the MediaPlayer currently uses thumbnails or changes the playback rate.

chapterSkipBackButtonVisible
type boolean
Gets or sets whether the chapter skip back button is visible.

chapterSkipBackButtonEnabled
type boolean
Gets or sets whether the chapter skip back button is enabled.

chapterSkipForwardButtonVisible
type boolean
Gets or sets whether the chapter skip forward button is visible.

chapterSkipForwardButtonEnabled
type boolean
Gets or sets whether the chapter skip forward button is enabled.

fastForwardButtonVisible
type boolean
Gets or sets whether the fast forward button is visible.

fastForwardButtonEnabled
type boolean
Gets or sets whether the fast forward button is enabled.

nextTrackButtonVisible
type boolean
Gets or sets whether the next track button is visible.

nextTrackButtonEnabled
type boolean
Gets or sets whether the next track button is enabled.

playFromBeginningButtonVisible
type boolean
Gets or sets whether the play from beginning button is visible.

playFromBeginningButtonEnabled
type boolean
Gets or sets whether the play from beginning button is enabled.

playPauseButtonVisible
type boolean
Gets or sets whether the play / pause button is visible.

playPauseButtonEnabled
type boolean
Gets or sets whether the play / pause button is enabled.

playbackRateButtonVisible
type boolean
Gets or sets whether the playback rate button is visible.

playbackRateButtonEnabled
type boolean
Gets or sets whether the playback rate button is enabled.

previousTrackButtonVisible
type boolean
Gets or sets whether the previous track button is visible.

previousTrackButtonEnabled
type boolean
Gets or sets whether the previous track button is enabled.

rewindButtonVisible
type boolean
Gets or sets whether the rewind button is visible.

rewindButtonEnabled
type boolean
Gets or sets whether the rewind button is enabled.

stopButtonVisible
type boolean
Gets or sets whether the stop button is visible.

stopButtonEnabled
type boolean
Gets or sets whether the stop button is enabled.

timeSkipBackButtonVisible
type boolean
Gets or sets whether the time skip back button is visible.

timeSkipBackButtonEnabled
type boolean
Gets or sets whether the time skip back button is enabled.

timeSkipForwardButtonVisible
type boolean
Gets or sets whether the time skip forward button is visible.

timeSkipForwardButtonEnabled
type boolean
Gets or sets whether the time skip forward button is enabled.

zoomButtonVisible
type boolean
Gets or sets whether the zoom button is visible.

zoomButtonEnabled
type boolean
Gets or sets whether the zoom button is enabled.

goToLiveButtonVisible
type boolean
Gets or sets whether the LIVE button is visible.

goToLiveButtonEnabled
type boolean
Gets or sets whether the LIVE button is enabled.

fullScreenButtonVisible
type boolean
Gets or sets whether the full screen button is visible.

fullScreenButtonEnabled
type boolean
Gets or sets whether the more button is enabled.

castButtonVisible
type boolean
Gets or sets whether the CAST button is visible.

castButtonEnabled
type boolean
Gets or sets whether the CAST button is enabled.

playbackRateButtonVisible
type boolean
Gets or sets whether the playback rate button is visible.

playbackRateButtonEnabled
type boolean
Gets or sets whether the playback rate button is enabled.

muteButtonVisible
type boolean
Gets or sets whether the mute button is visible.

muteButtonEnabled
type boolean
Gets or sets whether the mute button is enabled.

volumeButtonVisible
type boolean
Gets or sets whether the volume button is visible.

volumeButtonEnabled
type boolean
Gets or sets whether the volume button is enabled.

seekBarVisible
type boolean
Gets or sets whether the volume button is enabled.

seekingEnabled
type boolean
Gets or sets whether the seeking is enabled.

markers
type array
Gets or sets the MediaPlayer's marker collection.

mediaElementAdapter
type TVJS.MediaElementAdapter
Gets or sets an interface that your application can implement to have more control over synchronization between the MediaPlayer and your media.

A MediaElementAdapter is not required to use the MediaPlayer. The MediaElementAdapter is an abstract layer between the MediaPlayer and the video tag. It is where you can have any custom logic specific to your app. One example of this would be to have telemetry logic to record usage information from your customers.

startTime
type number
Gets or sets minimum playback position of the media. By default the value is zero.

The default value for startTime is 0 seconds.

Changing the startTime will reset the default chapter marks for your media.

targetCurrentTime
type number
Gets the current time as it is represented in the UI. While fast forwarding or rewinding, this property may be different than the video or audio tag's 'currentTime' property. This is because during a fast forward or rewind operation, the media is paused while the timeline animates to simulate a fast forward or rewind operation.

If you are using thumbnails to fast forward or rewind, this property can differ from the currentTime property of the current media. For example, consider that a user is playing a video. The currentTime of the video is at 0:20. The user then opts to fast forward. The MediaPlayer pauses playback and the currentTime for the media stays at 0:20. However, the value of targetCurrentTime is updated while the MediaPlayer fast forwards and displays thumbnails along the timeline. Let's say the user presses play when targetCurrentTime is at 2:30. At this point, the currentTime of the media is syncrhonized to 2:30 and the video resumes playing from 2:30.

If thumbnailEnabled is set to false, targetCurrentTime will always equal the currentTime for the media. This is because if you are not using thumbnails, you are changing the playback rate on the media and are still playing it. When this value changes, it raises the event targettimeupdate.

targetPlaybackRate
type number
Gets the current time as it is represented in the UI. While fast forwarding or rewinding, this property may be different than the video or audio tag's 'currentTime' property. This is because during an fast forward or rewind operation, the media is paused while the timeline animates to simulate a fast forward or rewind operation.

If you are using thumbnails to fast forward or rewind, the value of this proprerty can be different from the playbackRate property for the current media. For example, consider when a user is fast forwarding or rewinding. The current media is paused during these actions and would have a playbackRate of 0. However, the user sees a simulation of a playback rate based on the speed of fast forwarding or rewinding. targetPlaybackRate represents the simulated playback rate seen by the user.

If thumbnailEnabled is set to false, targetPlaybackRate will always equal the playbackRate for the media. This is because if you are not using thumbnails, you are changing the playback rate on the media and are still playing it. When targetPlaybackRate changes, it will raise the event targetratechange.

timeFormatter
type function
Gets or sets a function that converts raw time data from the video or audio tag into text to display in the UI of the MediaPlayer.

When you provide a function to format time, you should assume that the time is provided in seconds. The function should also return a string with the time in the user-friendly format. This string is what will be displayed to the user. If you do not provide a timeFormatter, the MediaPlayer will provide a default time formatter function. It will format the time to look like hh:mm:ss.

Example
The following example creates a time formatter which presents time in a "1h 02m 03s" format. This time formatter is attached to a MediaPlayer called myMediaPlayer.

// This helper function pads single digits with a 0 to help perserve a double-digit format.
function getTimeString(secondsOrMinutes) {
  
    var stringForm = secondsOrMinutes.toString();
  
    if (secondsOrMinutes < 10) {
        stringForm = "0" + stringForm;
    }
  
    return stringForm;
}
  
function myTimeFormatter(seconds) {
  
    if (isNaN(seconds)) {
        return "";
    }
  
    var minutes = Math.floor(seconds / 60);
    seconds = Math.floor(seconds % 60); 
    var hours = Math.floor(minutes / 60);
    minutes = minutes % 60;
    var timeString = minutes.toString() + "m " + getTimeString(seconds) + "s";
    
    if (hours > 0) {
        timeString = hours.toString() + "h " + getTimeString(parseFloat(timeString));
    }
  
    return timeString;
}

// Get the MediaPlayer
var mediaPlayer = document.getElementById("myMediaPlayer").winControl;
  
mediaPlayer.timeFormatter = myTimeFormatter;

thumbnailImage
type string Sets the path to the current thumbnail image to display.

If thumbnailEnabled is true, then your MediaPlayer displays thumbnails when the user rewinds or fast forwards the media. The content displayed by the thumbnail is indicated by thumbnailImage. This property has no effect if thumbnailEnabled is set to false.

thumbnailImage
type string Sets the path to the current thumbnail image to display.

###Methods addMarker(time, type, data, extraClass)
Adds a new timeline marker.
time (number) The marker type.
time (number) The marker data.
time (number) An extra class that can be used to style the marker.

If time is not a valid number, this method will generate an error.

There are a limited number of possible values for type. If you provide an alternate value, this method will generate an error. The following marker types are supported:

  • TVJS.MarkerType.advertisement
  • TVJS.MarkerType.chapter
  • TVJS.MarkerType.custom

If there is already a marker specified at time, that marker will be automatically removed and replaced with the marker provided by addMarker. You should also know that if you are using the default chapter markers, adding a chapter marker with this method will remove all of the default chapter markers.

The arguments data and extraClass are used when you are creating a custom marker. The data argument can hold any data that your app is designed to process and can be used to create a unique experience. The extraClass argument is used to provide a custom image for your markers on the timeline that is observed by the user.

If you have many markers to add, you should add them all at one time. This is for performance reasons—when adding a new marker, addMarker sorts all of the markers. If you add multiple markers at one time, the API will add them all first and then sort them only once.

Example
The following example creates a new marker near the end of the current video that will display information or clip information about the next video. This example also shows how to add an event handler for event markerreached.

// Because markers are typically associated with the video stream, it is best practice 
// to add them after the video metadata has loaded. 
function handleLoadedMetadata() {
    var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
    var video = document.getElementById("myVideo");
  
    // You may choose to set a marker when the credits start to roll. In this case, we've
    // chosen to set our marker once the video starts to fade to black.
  
    // Notice that we didn't use mediaPlayer.endTime to get the end of the video. It is a best
    // practice to use video.duration, unless you've actually set the endTime programmatically yourself.
    // The reason for this is that although endTime will default to the video's duration
    // if you don't set it, endTime will only get set after the canPlay event. So in the case below if we
    // used 'mediaPlayer.endTime - 5' for our marker, then endTime would be 0 and we would be setting a
    // marker at '-5', which would never fire.
    var rightBeforeTheEndOfTheVideo = video.duration - 5;
    mediaPlayer.addMarker(rightBeforeTheEndOfTheVideo, WinJS.UI.MarkerType.custom, { command: "showNextVideo" }); 
  
    // Event Handler using the markerreached event
    mediaPlayer.addEventListener("markerreached", handleMarkerReached, false);
};
  
// Markerreached event handler
function handleMarkerReached(evt) {
    // Perform any logic here that you want to do when the marker is reached.
};
  
    var video = document.getElementById("myVideo");
    video.addEventListener("loadedmetadata", handleLoadedMetadata, false);

Example
The following example shows how to add markers with custom icons. The app's UI settings and custom icon are specified in the CSS file.

CSS

body {
  height: 100%;
  width: 100%;
}
  
.tennisChapterMarker { 
  -ms-grid-column: 2; 
}
  
.tennisChapterMarker:before {  
  display:block; 
  margin-top:-7px;
  margin-left:0px;
  content:url("/images/tennisball.png");
}

JavaScript

// Because markers are typically associated with the video stream, it is best practice
// to add them after the video metadata has loaded.
function handleLoadedMetadata() {
    var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
    var video = document.getElementById("myVideo"); 
  
    // Add markers for each game in the tennis match.
    // Since they are chapter markers, chapter skip forward and back will work.
    mediaPlayer.addMarker(9.18, TVJS.MarkerType.chapter, {}, "tennisChapterMarker");
    mediaPlayer.addMarker(20, TVJS.MarkerType.chapter, {}, "tennisChapterMarker");  
    mediaPlayer.addMarker(30, TVJS.MarkerType.chapter, {}, "tennisChapterMarker");
};

var video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", handleLoadedMetadata, false);

chapterSkipBack()
Seeks to the previous chapter marker.

If the MediaPlayer is currently in rewind or fast forward mode, calling chapterSkipBack will exit that mode. The MediaPlayer will seek to the previous chapter marker and then resume playing from that marker time. If there is no previous marker, then the MediaPlayer will resume from the startTime of the media.

chapterSkipForward()
Seeks to the next chapter marker.

If the MediaPlayer is currently in rewind or fast forward mode, calling chapterSkipForward will exit that mode. The MediaPlayer will seek to the next chapter marker and then resume playing from that marker time. If there is no next marker, then the MediaPlayer will skip to the endTime for the media.

dispose()
Disposes this control.

fastForward()
Increases the playback rate of the media.

The MediaPlayer has set rates for rewinding and fast forwarding. Think of the possible rates as a long list with the fastest playback rate at the top of the list and the fastest rewind rate at the bottom of the list. Calling fastForward increases the rate one step. This means that it is possible you will still be in a rewind mode after calling fastForward. It also means you could transition from the slowest rewinding rate to playing the media at the default play rate. If you are at the maximum fast forwarding rate, this method will have no effect.

Note
Because of the way that fastForward functions, you may not start fast forwarding when you call fastForward. If the media is currently rewinding at a very fast rate, it will still rewind, but at a slower rate. Keep in mind that calling this function only increases the playrate by a single step, regardless of the current play rate. If the media is currently playing and thumbnailEnabled is true, this method will pause the current media. The user will see the current location on the timeline represented by thumbnails.

goToLive()
Navigates to the real-time position in live streamed media.

When your MediaPlayer is playing live content, it may be possible for a user to pause or rewind the player. Because of this, the current time for the MediaPlayer may lag behind the real time for the live content. This method will seek the MediaPlayer to the current real time for the live content.

Note
You should not call goToLive if you are not using live content. It could result in unexpected behavior.

hideControls()
Hides all the UI associated with the MediaPlayer.

nextTrack()
Plays the next track.

This method calls nextTrack. By default, TVJS.MediaElementAdapter.nextTrack is not implemented. This means that if you want to support next track functionality in the MediaPlayer, you need to implement TVJS.MediaElementAdapter.nextTrack.

Example
The following code sample shows how to implement MediaElementAdapter.nextTrack and MediaElementAdapter.previousTrack using a playlist.
HTML

<body>
    <style>

        body {
            height: 100%;
            width: 100%;
        }

        active-video {
            display: inline;
            height: 100%;
            width: 100%;
        }

        hidden-video {
            display:none;
        }

    </style>

    <div id="myMediaPlayer">
        <video></video>
        <video></video>
        <video></video>
    </div>

</body>

JavaScript

// The playlist of files
var playList = [
  "http://smf.blob.core.windows.net/samples/videos/bigbuck.mp4",
  "http://smf.blob.core.windows.net/samples/videos/wildlife.mp4"
];

// Some important variables
var previousMediaElement = null;
var currentMediaElement = null;
var nextMediaElement = null;
var mediaPlayer = null;
var currentPlaylistItem = 0;

// This function cycles the elements, hiding the previous and next videos
// and playing the current video
function updateMediaElements() {
    previousMediaElement.classList.remove("active-video");
    previousMediaElement.classList.add("hidden-video");

    currentMediaElement.classList.remove("hidden-video");
    currentMediaElement.classList.add("active-video");

    nextMediaElement.classList.remove("active-video");
    nextMediaElement.classList.add("hidden-video");

    mediaPlayer.mediaElementAdapter.mediaElement = currentMediaElement;
    mediaPlayer.play();
}

// A helper function to disable the chapter skip buttons based on the playlist
function updateTrackSkipButtons() {
    // If we're not the first track, previous track should be available
    if (currentPlaylistItem > 0) {
        mediaPlayer.previousTrackEnabled = true;
    }
    // Otherwise it should not be
    else {
        mediaPlayer.previousTrackEnabled = false;
    }

    // If we're not the last track, next track should be available
    if (currentPlaylistItem < playList.length - 1) {
        mediaPlayer.previousTrackEnabled = true;
    }
    // Otherwise it should not be
    else {
        mediaPlayer.previousTrackEnabled = false;
    }
}

// Initialize variables
var videos = document.getElementsByTagName("video");
previousMediaElement = videos[0];
currentMediaElement = videos[1];
nextMediaElement = videos[2];
mediaPlayer = document.getElementById("myMediaPlayer").tvControl;

// Make the nextTrack and previousTrack buttons visible
mediaPlayer.previousTrackVisible = true;
mediaPlayer.nextTrackVisible = true;

// Set up the initial values
if (currentPlaylistItem > 0) {
    previousMediaElement.src="playList[currentPlaylistItem" - 1];
    previousMediaElement.load();
}
else {
    previousMediaElement.src="null;"
}

currentMediaElement.src="playList[currentPlaylistItem];"

if (currentPlaylistItem < playList.length - 1) {
    nextMediaElement.src="playList[currentPlaylistItem" + 1];
    nextMediaElement.load();
}
else {
    nextMediaElement.src="null;"
}

// Update the media elements' display state and track buttons
updateMediaElements();
updateTrackSkipButtons();

// We need to override the previousTrack and nextTrack methods
// on the mediaElementAdapter
MediaPlayer.mediaElementAdapter.previousTrack = function () {

     // Update the playlist item
     currentPlaylistItem--;

     // update our media elements
     nextMediaElement.src="currentMediaElement.src;"
     currentMediaElement.src="previousMediaElement.src;"
     if (currentPlaylistItem > 0) {
         previousMediaElement.src="playList[currentPlaylistItem" - 1];
     }
     else {
         previousMediaElement.src="null;"
     }

     // Update the media elements' display state and track buttons
     updateMediaElements();
     updateTrackSkipButtons();
};

mediaPlayer.mediaElementAdapter.nextTrack = function () {

    // Update the playlist item
    currentPlaylistItem++;

    // update our media elements
    previousMediaElement.src="currentMediaElement.src;"
    currentMediaElement.src="nextMediaElement.src;"
    if (currentPlaylistItem < playList.length - 1) {
        nextMediaElement.src="playList[currentPlaylistItem" + 1];
    }
    else {
        nextMediaElement.src="null;"
    }

    // Update the media elements' display state and track buttons
    updateMediaElements();
    updateTrackSkipButtons();
};

pause()
Pauses the media.

This will pause the current media regardless of the current playback rate. That means that pause will pause media even when rewinding or fast forwarding. To resume playing media, call play.

Calling this method on media that is paused or not playing will have no effect.

play()
Sets the playbackRate to the default playbackRate for the media and plays the media.

Before playing the media, play sets the playback rate to the default playback rate.

previousTrack()
Plays the next track.

This method calls previousTrack. By default, MediaElementAdapter.previousTrack is not implemented. This means that if you want to support previous track functionality in the MediaPlayer, you need to implement MediaElementAdapter.previousTrack.

See the documentation for the nextTrack method for a code example.

removeMarker(time)
Removes all chapter markers at the specified time.
time (number) The time of the marker to remove.

If there is no marker at time, this method will have no effect. If you remove the last marker from a collection, the MediaPlayer will no longer receive notifications about time updates. This is done to improve performance.

Note
If you have user interface elements which require notifications about time updates, those will still be registered for updates even if you remove the last marker. For example, if you display a user interface that shows the time remaining on a piece of media, the MediaPlayer will still receive time update notifications.

rewind()
Decreases the playbackRate of the media.

The MediaPlayer has set rates for rewinding and fast forwarding. Think of the possible rates as a long list with the fastest playback rate at the top of the list and the fastest rewind rate at the bottom of the list. Calling rewind decreases the rate one step. This means that it is possible you will still be in a fast forward mode after calling rewind. It also means you could transition from the slowest fast forwarding rate to playing the media at the default play rate. If you are at the maximum rewinding rate, this method will have no effect.

If the media is currently playing and thumbnailEnabled is true, this method will pause the current media. The user will see the current location on the timeline represented by thumbnails.

Note
Because of the way that rewind functions, you may not start rewinding when you call rewind. If the media is currently fast forwarding at a very fast rate, it will still fast forward, but at a slower rate. Keep in mind that calling this function only decreases the play rate by a single step, regardless of the current play rate.

seek(time)
time (number) The position in seconds to seek to.
Navigates to the specified position in the media.

If time is before the startTime for the media, then the MediaPlayer will seek to the startTime. If time is after the endTime for the media, then the MediaPlayer will seek to the endTime.

Calling seek will navigate to the specified time immediately; the user will not see the player rewind or fast forward to time. Also, if the player was currently in rewind or fast forward mode, calling seek will cause the MediaPlayer to enter play mode.

setContentMetadata(metadata)
Sets the metadata fields for the given peice of media. This method should be called before changing the video stream.
metadata (Object) A collection of name value pairs that provide additional information about the current media. The name, value pairs that are supported are:

  • title - (string) The title of the current video
  • description - (string) The description of the current video

You need to use setContentMetadata in your app in order to take advantages of all of the features of the MediaPlayer. You should call setContentMetadata whenever you first display media content to the user or whenever that content changes. This method will populate the title and description in the MediaPlayer's UI.

showControls()
Displays the UI associated with the MediaPlayer.

stop()
Stops the media.

timeSkipBack()
Moves the current timeline position backward by a short interval.

This method will skip back on the timeline 8 seconds. This method works the same way as seek. This means that the user will not see the media rewind. The player automatically jumps to the new location. Also, if the player was in rewind or fast forward mode, it will resume playing at the new location.

timeSkipForward()
Moves the current timeline position forward short interval.

This method will skip ahead on the timeline 30 seconds. This method works the same way as seek. This means that the user will not see the media fast forward. The player automatically jumps to the new location. Also, if the player was in rewind or fast forward mode, it will resume playing at the new location.

###Events
afterHideControls
Event raised immediately after the controls are hidden on the MediaPlayer.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("afterhidecontrols", onafterhidecontrols);
mediaPlayer.removeEventListener("afterhidecontrols", onafterhidecontrols);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

afterShowControls
Event raised immediately after the controls are displayed on the MediaPlayer.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("aftershowcontrols", onaftershowcontrols);
mediaPlayer.removeEventListener("aftershowcontrols", onaftershowcontrols);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

beforeHideControls
Event signaling that the MediaPlayer is about to hide controls.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("beforehidecontrols", onbeforehidecontrols);
mediaPlayer.removeEventListener("beforehidecontrols", onbeforehidecontrols);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

beforeShowControls
Event signaling that the MediaPlayer is about to show controls.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("beforeshowcontrols", onbeforeshowcontrols);
mediaPlayer.removeEventListener("beforeshowcontrols", onbeforeshowcontrols);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

markerReached
Event signaling that the MediaPlayer reached a marker. This event is issued regardless of what type of marker was reached.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("markerreached", onmarkerreached);
mediaPlayer.removeEventListener("markerreached", onmarkerreached);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

markerreached.detail.marker contains the marker that was reached.

Example

// Because markers are typically associated with the video stream, it is best practice
// to add them after the video metadata has loaded.
function handleLoadedMetadata() {
    var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
    var video = document.getElementById("myVideo");
  
    // You may choose to set a marker when the credits start to roll. In this case, we've
    // chosen to set our marker once the video starts to fade to black.
  
    // Notice that we didn't use mediaPlayer.endTime to get the end of the video. It is a best
    // practice to use video.duration, unless you've actually set the endTime programmatically yourself.
    // The reason for this is that although endTime will default to the video's duration
    // if you don't set it, endTime will only get set after the canPlay event. So in the case below if we
    // used 'mediaPlayer.endTime - 5' for our marker, then endTime would be 0 and we would be setting a
    // marker at '-5', which would never fire.
    var rightBeforeTheEndOfTheVideo = video.duration - 5;
    mediaPlayer.addMarker(rightBeforeTheEndOfTheVideo, TVJS.MarkerType.custom, { command: "showNextVideo" });
  
    // Event Handler using the markerreached event
    mediaPlayer.addEventListener("markerreached", handleMarkerReached, false);
};
  
// Markerreached event handler
function handleMarkerReached(ev) {
    // Perform any logic here that you want to do when the marker is reached.
};
  
var video = document.getElementById("myVideo");
video.addEventListener("loadedmetadata", handleLoadedMetadata, false);

mediaCommandExecuted
Event issued when a media command has finished executing.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("mediacommandexecuted", onmediacommandexecuted);
mediaPlayer.removeEventListener("mediacommandexecuted", onmediacommandexecuted);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

Example

<body>
    <div id="myMediaPlayer">
        <video id="myVideo" autoplay="autoplay" src="http://smf.blob.core.windows.net/samples/videos/wildlife.mp4">
        </video>
    </div>
</body>  
</html>

JavaScript

function postChapterSkipForward() {
    // Put code here to handle what your app should do
    // after executing the chapterSkipForward command.
}
  
function postChapterSkipBack() {
    // Put code here to handle what your app should do
    // after executing the chapterSkipBack command.
}
           // Get the MediaPlayer
            var mediaPlayer = document.getElementById("myMediaPlayer").tvControl;
            var mediaPlayer.chapterSkipForwardEnabled = true;
            var mediaPlayer.chapterSkipForwardVisible = true;
            var mediaPlayer.chapterSkipBackEnabled = true;
            var mediaPlayer.chapterSkipBackVisible = true;
   
            // Add an event listener for the mediacommandexecuted event
            mediaPlayer.addEventListener("mediacommandexecuted",
                function (ev) {
                    if (ev.detail.mediaCommand === WinJS.UI.MediaCommand.chapterSkipForward) {
                        postChapterSkipForward();
                    }
                    else if (ev.detail.mediaCommand == WinJS.UI.MediaCommand.chapterSkipBack) {
                        postChapterSkipBack();
                    }
                },
                false);

targettimeupdate
Event that indicates the targetCurrentTime changed.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("targettimeupdate", ontargettimeupdate);
mediaPlayer.removeEventListener("targettimeupdate", ontargettimeupdate);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

thumbnailrequest
Event signaling that there was a request for a thumbnail.

Code sample

// addEventListener syntax
mediaPlayer.addEventListener("thumbnailrequest", onthumbnailrequest);
mediaPlayer.removeEventListener("thumbnailrequest", onthumbnailrequest);

Event information
Synchronous Yes
Bubbles Yes
Cancelable No

This event signals a request for a thumbnail corresponding to a specific time in the video. That time is stored in the eventArgs.currentTime. This event also contains information about the current playback rate in eventArgs.playbackRate. In order to update the thumbnail, update the value of thumbnailImage.

Note
The currentTime and playbackRate properties in eventArgs are not the same as the current time and playback rate values for the associated video tag. When you are displaying thumbnails during a rewind or fast forward action, the video tag pauses the media and its current time remains unchanged.

Clone this wiki locally