Skip to content

Media Controller

Jacob Seidelin edited this page Jul 11, 2013 · 2 revisions

MediaController

The MediaController controls playback of video and audio player components.

How to use

This example uses the Digit Video component.

Template

"videoPlayer": {
    "prototype": "digit/ui/video.reel",
    "properties": {
        "element": {"#": "videoPlayer"},
        "src": "movie.ogg",
        "videoController" : {"@": "mediaController"}
    }
},
"mediaController": {
    "prototype": "montage/core/media-controller",
    "properties": {
        "autoplay": false
    }
}
<div data-montage-id="videoPlayer"></div>

JavaScript

videoPlayer.videoController.play();

Properties

  • status

    The current status of the media controller.

  • mediaController

    The native HTML5 MediaController object.

  • position

    The current playback position (in seconds) in the media. Use this to seek in the media.

  • duration

    The duration of the media in seconds.

  • autoplay

    Determines whether the media should start playing automatically when ready.

  • playbackRate

    The current playback rate, where 1.0 indicates normal playback. Use a negative playback rate to reverse playback direction.

  • currentTime

    The actual, current playback position (in seconds).

  • volume

    The sound volume, where 0 is silent and 100 is maximum volume.

  • mute

    Determines whether the sound is currently muted. Does not affect the volume property.

Status codes

These are the possible values for the status property.

  • EMPTY

    No media elements have been attached or no media has been loaded yet.

  • STOPPED

    The media is ready and playback is currently stopped.

  • PLAYING

    The media is currently playing.

  • PAUSED

    Playback is currently paused.

Example:

if (mediaController.status == mediaController.PLAYING) {
    // media is playing
}

Methods

  • play()

    Start playing the media.

  • pause()

    Pause playback.

  • unpause()

    Unpause playback.

  • playPause()

    Start playback if paused or stopped, otherwise pause the playback.

  • rewind()

    Set the playback rate to -4.

  • fastForward()

    Set the playback rate to 4.

  • stop()

    Stop playback and return to beginning of the media.

  • volumeIncrease()

    Increase the sound volume by 10.

  • volumeDecrease()

    Decrease the sound volume by 10.

  • toggleMute()

    Mute the audio if not already muted, otherwise unmute.