Mediaelementjs Player

A server-side MediaElement.js player component. Add Audio, Video, and YouTube players to your applications with Flash and Silverlight fallback.

View larger

Close

View larger

Close

MediaElement.js Player for Vaadin

This Vaadin add-on provides a MediaElement.js media player component with hooks into client-side events and methods that allow you to play music/videos, control the player from the server side, and listen to player events such as Paused, Seeked, PlaybackEnded, etc.

MediaElement.js is a fully-featured HTML5 audo & video player with Flash and Silverlight fallback for older browsers and formats unsupported by HTML5. It supports a wide array of audio formats and YouTube/Vimeo sources. See the MediaElement.js website for more details.

This addon is currently packaged with MediaElement.js 2.20.0.

NOTE if using Vaadin 7.3.x or earlier you must use version 1.2.6 of this addon. Users of 7.4.0 and up should use 1.2.7+. This is due to a change in the com.vaadin.ui.JavaScriptFunction interface which causes classpath errors.

Known Issues

• The Vimeo player does not support RPC calls or event listeners. This is a current MEJS limitation.
• Chrome 44+ has removed support for the Silverlight plugin. Silverlight fallback will not work in Chrome.
• For best results use FileResource for media sources. Known issues with other types of resources include:
  • ClassResource - frequent java.nio.channels.ClosedChannelException errors cause spotty playback.
  • ThemeResource - seeking doesn't work in Chrome because this is not a ConnectorResource, and the AcceptRanges: bytes HTTP header cannot be added. This may affect other browsers as well.

Sample code

import com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer;

// Configure MIME type mappings
FileTypeResolver.addExtension("ogg", "audio/ogg");
FileTypeResolver.addExtension("ogv", "video/ogg");
FileTypeResolver.addExtension("mp4", "video/mp4");
FileTypeResolver.addExtension("webm", "video/webm");
FileTypeResolver.addExtension("wmv", "video/x-ms-wmv");
FileTypeResolver.addExtension("wma", "audio/x-ms-wma");
FileTypeResolver.addExtension("flv", "video/x-flv");
FileTypeResolver.addExtension("avi", "video/x-msvideo");

// Audio player with PlaybackEndedListener
MediaElementPlayer audioPlayer = new MediaElementPlayer();
layout.addComponent(audioPlayer);
audioPlayer.setSource(new FileResource(new File("/path/to/song.mp3")));
audioPlayer.addPlaybackEndedListener(player -> {
        player.setSource(new FileResource(new File("/path/to/next/song.m4a")));
        player.play();
});
audioPlayer.play();

// Video player
MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaElementPlayer.Type.VIDEO);
layout.addComponent(videoPlayer);
videoPlayer.setSource(new FileResource(new File("/path/to/video.mp4")));

// YouTube player
MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaComponent.Type.VIDEO);
layout.addComponent(videoPlayer);
videoPlayer.setSource(new ExternalResource("https://youtu.be/kh29_SERH0Y"));

Links

• Online Demo
• MediaElement.js
• GitHub
• Discussion Forum

Compatibility