.catchEvent()

.catchEvent( [event] , [function] )

Description: Adds an event listener.

! Some functions can only be used after the QML Loaded Event has been triggered

Events

As seen at WebChimera Plugin JavaScript API

.MediaPlayerMediaChanged: playlist item changed.

.MediaPlayerNothingSpecial: vlc is in idle state doing nothing but waiting for a command to be issued.

.MediaPlayerOpening: vlc is opening an media resource locator (MRL).

.MediaPlayerBuffering( percents ): vlc is buffering.

.MediaPlayerPlaying: vlc is playing a media.

.MediaPlayerPaused: vlc is in paused state.

.MediaPlayerForward: vlc is fastforwarding through the media (works only when an input supports forward playback).

.MediaPlayerBackward: vlc is going backwards through the media (works only when an input supports backwards playback).

.MediaPlayerEncounteredError: vlc has encountered an error and is unable to continue.

.MediaPlayerEndReached: vlc has reached the end of current playlist.

.MediaPlayerStopped

.MediaPlayerTimeChanged( time ): time has changed. time is in milliseconds.

.MediaPlayerPositionChanged( position ): media position has changed.

.MediaPlayerSeekableChanged( seekable ): media seekable flag has changed.

.MediaPlayerPausableChanged( pausable ): media pausable flag has changed.

.MediaPlayerLengthChanged

.QmlMessage( string message ): triggered when a message is received from QML.

.QmlStringMessage( int type, string message ) (from v.0.2.4)

.QmlNumberMessage( int type, int arg1, int arg2 ) (from v.0.2.4)

.MediaPlayerStateChanged: triggered when playback state has changed (from v.0.2.6)

Example Code

In this example we attach a function to the MediaPlayerBuffering event and print the buffering percent.

HTML

<div style="height: 10%">
    <span id="textbox" style="display:block; padding:5px; background: #ecebeb; color: #333">Buffering Percent</span>
</div>

<div id="player_wrapper" style="height: 90%"></div>

JavaScript

wjs("#player_wrapper").addPlayer({ id: "webchimera", theme: "sleek", autoplay: 1 });

wjs("#webchimera").addPlaylist("http://archive.org/download/CrayonDragonAnAnimatedShortFilmByTonikoPantoja/Crayon%20Dragon%20-%20An%20animated%20short%20film%20by%20Toniko%20Pantoja.mp4");

function handleBuffering(percent) {

    var span = document.getElementById("textbox");
    span.innerHTML = "Buffering: " + percent + "%";
    return;

}

wjs("#webchimera").catchEvent("MediaPlayerBuffering", handleBuffering);

This example loads a subtitle file after QML has loaded. "QmlMessage" is the actual event, "[qml-loaded]" is just a string that is passed through the event.

Do not use this example in Node-Webkit Apps because qml will load before the script is executed so you will never receive the "[qml-loaded]" message.

HTML

<div id="player_wrapper"></div>

JavaScript

wjs("#player_wrapper").addPlayer({ id: "webchimera", theme: "sleek", autoplay: 1 });

wjs("#webchimera").addPlaylist("http://www.youtube.com/watch?v=ja1sjfnfjg0");

function handle(event) {
    if (event == "[qml-loaded]") this.startSubtitle("http://www.webchimera.org/sub/the_last_belle_2011_eng.srt");
}

wjs("#webchimera").catchEvent('QmlMessage', handle);