This widget implements a media player with a customizable user-interface, suitable to play video or audio.
This widget relies on a third-party JavaScript component jPlayer, which is distributed together with JWt.
To support cross-browser playing of video or audio content, you may need
to provide appropriately encoded contents. For audio, at least an MP3 or
MP4 audio (M4A) encoding should be supplied, while for video the M4V
encoding should be provided. Additional encodings are beneficial since
they increase the chance that native HTML <video>
or
<audio
> elements can be used (which may be hardware
accelerated), instead of the flash player. See HTML5 browser media support.
You need to specify the encoding types you are going to use when
instantiating the media player, since based on the chosen encodings, a
particular suitable implementation will be used. Thus, you need to call
addSource()
immediately, but you may pass empty URLs if you do
not yet want to load media.
The player provides a user-interface to control the playback which may be freely customized, and which is independent of the underlying media technology (HTML video or Flash player). The controls user-interface may be implemented as a JWt widget, where the controls (buttons, progress bars, and text widgets) are bound directly to the video player component (client-side).
The default user-interface can be themed using jPlayer themes. The theme
is global (it applies to all media player instances), and is configured
by loading a CSS stylesheet, e.g. JWt.WApplication.instance()->
useStyleSheet(WApplication.resourcesUrl() +
"jPlayer/skin/jplayer.blue.monday.css"
.
The following examples show a video and audio player using the default controls.
void MediaPlayerAudio() {
String mp3Audio = "https://www.webtoolkit.eu/audio/LaSera-NeverComeAround.mp3";
String oggAudio = "https://www.webtoolkit.eu/audio/LaSera-NeverComeAround.ogg";
WContainerWidget container = new WContainerWidget();
WMediaPlayer player = new WMediaPlayer(MediaType.Audio, (WContainerWidget) container);
player.addSource(MediaEncoding.MP3, new WLink(mp3Audio));
player.addSource(MediaEncoding.OGA, new WLink(oggAudio));
player.setTitle("La Sera - Never Come Around");
final WText out = new WText((WContainerWidget) container);
player
.playbackStarted()
.addListener(
this,
() -> {
out.setText("<p>Song playing</p>");
});
player
.playbackPaused()
.addListener(
this,
() -> {
out.setText("<p>Song paused</p>");
});
player
.ended()
.addListener(
this,
() -> {
out.setText("<p>Song ended</p>");
});
player
.volumeChanged()
.addListener(
this,
() -> {
out.setText("<p>Volume changed</p>");
});
}
Alternatively, a custom widget may be set which implements the controls,
using setControlsWidget()
. In this case, you should add to this
widget the buttons, text placeholders, and progress bars and bind them
to the media player using the setButton()
, setText()
and setProgressBar()
methods. The controls widget is integrated
in the media player, and this has as unique benefit (for a video player)
that they may also be shown when the video player is maximized.
Finally, you may want to control the media player only through widgets external to the media player. This may be configured by setting 0 as controlsWidget. In this case however, full screen mode should not be used since there is no way to restore the original size.