Widget Gallery

Media Player

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 Wt.

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 Wt 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. Wt::WApplication::instance()-> useStyleSheet(WApplication::resourcesUrl() + "jPlayer/skin/jplayer.blue.monday.css".

The following examples show a video and audio player using the default controls.

#include <Wt/WLink.h>
#include <Wt/WMediaPlayer.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WText.h>


// Define media source locations
std::string mp4Video = "https://www.webtoolkit.eu/videos/sintel_trailer.mp4";
std::string ogvVideo = "https://www.webtoolkit.eu/videos/sintel_trailer.ogv";

// Define poster image location
std::string poster = "pics/sintel_trailer.jpg";

auto container = std::make_unique<Wt::WContainerWidget>();

Wt::WMediaPlayer *player = container->addNew<Wt::WMediaPlayer>(Wt::MediaType::Video);
player->addSource(Wt::MediaEncoding::M4V, Wt::WLink(mp4Video));
player->addSource(Wt::MediaEncoding::OGV, Wt::WLink(ogvVideo));
player->addSource(Wt::MediaEncoding::PosterImage, Wt::WLink(poster));
player->setTitle("<a href=\"https://durian.blender.org/\""
                 "target=\"_blank\">Sintel</a>, (c) copyright Blender Foundation");

Wt::WText *out = container->addNew<Wt::WText>();

player->playbackStarted().connect([=] {
    out->setText("<p>Video playing</p>");
});

player->playbackPaused().connect([=] {
    out->setText("<p>Video paused</p>");
});

player->ended().connect([=] {
    out->setText("<p>Video ended</p>");
});

player->volumeChanged().connect([=] {
    out->setText("<p>Volume changed</p>");
});

#include <Wt/WContainerWidget.h>
#include <Wt/WLink.h>
#include <Wt/WMediaPlayer.h>
#include <Wt/WText.h>


// Define media source locations.
std::string mp3Audio =
    "https://www.webtoolkit.eu/audio/LaSera-NeverComeAround.mp3";
std::string oggAudio =
    "https://www.webtoolkit.eu/audio/LaSera-NeverComeAround.ogg";

auto container = std::make_unique<Wt::WContainerWidget>();

Wt::WMediaPlayer *player = container->addNew<Wt::WMediaPlayer>(Wt::MediaType::Audio);
player->addSource(Wt::MediaEncoding::MP3, Wt::WLink(mp3Audio));
player->addSource(Wt::MediaEncoding::OGA, Wt::WLink(oggAudio));
player->setTitle("La Sera - Never Come Around");

Wt::WText *out = container->addNew<Wt::WText>();

player->playbackStarted().connect([=] {
    out->setText("<p>Song playing</p>");
});

player->playbackPaused().connect([=] {
    out->setText("<p>Song paused</p>");
});

player->ended().connect([=] {
    out->setText("<p>Song ended</p>");
});

player->volumeChanged().connect([=] {
    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.

Top