Video

Although the WMediaPlayer widget implements a cross-browser video player, in some cases, you may need direct access to a native HTML <video> element. This is provided by the WVideo widget.

The trailer used in the examples below is Sintel, © copyright Blender Foundation | durian.blender.org

Native video

In the example below the WVideo class is used with a WImage (a static JPEG image) as fallback. The video will play on browsers (like Firefox, Chrome and Safari) that support MP4 or OGV video streams natively (using HTML <video>), but the video control will show the image on other browsers (Internet Explorer, Opera, ...).

Example
source 
#include <Wt/WContainerWidget.h>
#include <Wt/WImage.h>
#include <Wt/WLink.h>
#include <Wt/WText.h>
#include <Wt/WVideo.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>();

auto video = container->addNew<Wt::WVideo>();
video->addSource(Wt::WLink(mp4Video));
video->addSource(Wt::WLink(ogvVideo));
video->setPoster(poster);
video->setAlternativeContent(std::make_unique<Wt::WImage>(Wt::WLink(poster)));
video->resize(640, 360);

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

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

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

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

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

Top

Native video with fallback

For browsers that support HTML <video>, the video below looks exactly like the one above. On other browsers, the player below falls back to a Flash player to play the video. If flash is not supported on your system, a static image is shown.

Any Flash-based video player can do the job. In the example below the FLV Player is used as fallback for HTML5 video.

Example
source 
#include <Wt/WFlashObject.h>
#include <Wt/WContainerWidget.h>
#include <Wt/WFlashObject.h>
#include <Wt/WImage.h>
#include <Wt/WLink.h>
#include <Wt/WText.h>
#include <Wt/WVideo.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>();

auto flash =
    std::make_unique<Wt::WFlashObject>("https://www.webtoolkit.eu/videos/player_flv_maxi.swf");
flash->setFlashVariable("startimage", "pics/sintel_trailer.jpg");
flash->setFlashParameter("allowFullScreen", "true");
flash->setFlashVariable("flv", mp4Video);
flash->setFlashVariable("showvolume", "1");
flash->setFlashVariable("showfullscreen", "1");
flash->setAlternativeContent(std::make_unique<Wt::WImage>(Wt::WLink(poster)));
flash->resize(640, 360);

Wt::WVideo *video = container->addNew<Wt::WVideo>();
video->addSource(Wt::WLink(mp4Video));
video->addSource(Wt::WLink(ogvVideo));
video->setAlternativeContent(std::move(flash));
video->setPoster(poster);
video->resize(640, 360);

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

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

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

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

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

Flash

You may also choose to simply rely on Flash to play the video. In the menu item WFlashObject you can find an example.

Top