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 
  void Video() {
    String mp4Video = "https://www.webtoolkit.eu/videos/sintel_trailer.mp4";
    String ogvVideo = "https://www.webtoolkit.eu/videos/sintel_trailer.ogv";
    String poster = "pics/sintel_trailer.jpg";
    WContainerWidget container = new WContainerWidget();
    WVideo video = new WVideo((WContainerWidget) container);
    video.addSource(new WLink(mp4Video));
    video.addSource(new WLink(ogvVideo));
    video.setPoster(poster);
    video.setAlternativeContent(new WImage(new WLink(poster)));
    video.resize(new WLength(640), new WLength(360));
    final WText out = new WText((WContainerWidget) container);
    video
        .playbackStarted()
        .addListener(
            this,
            () -> {
              out.setText("<p>Video playing</p>");
            });
    video
        .playbackPaused()
        .addListener(
            this,
            () -> {
              out.setText("<p>Video paused</p>");
            });
    video
        .ended()
        .addListener(
            this,
            () -> {
              out.setText("<p>Video ended</p>");
            });
    video
        .volumeChanged()
        .addListener(
            this,
            () -> {
              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 
  void VideoFallback() {
    String mp4Video = "https://www.webtoolkit.eu/videos/sintel_trailer.mp4";
    String ogvVideo = "https://www.webtoolkit.eu/videos/sintel_trailer.ogv";
    String poster = "pics/sintel_trailer.jpg";
    WContainerWidget container = new WContainerWidget();
    WFlashObject flash = new 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(new WImage(new WLink(poster)));
    flash.resize(new WLength(640), new WLength(360));
    WVideo video = new WVideo((WContainerWidget) container);
    video.addSource(new WLink(mp4Video));
    video.addSource(new WLink(ogvVideo));
    video.setAlternativeContent(flash);
    video.setPoster(poster);
    video.resize(new WLength(640), new WLength(360));
    final WText out = new WText((WContainerWidget) container);
    video
        .playbackStarted()
        .addListener(
            this,
            () -> {
              out.setText("<p>Video playing</p>");
            });
    video
        .playbackPaused()
        .addListener(
            this,
            () -> {
              out.setText("<p>Video paused</p>");
            });
    video
        .ended()
        .addListener(
            this,
            () -> {
              out.setText("<p>Video ended</p>");
            });
    video
        .volumeChanged()
        .addListener(
            this,
            () -> {
              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