Directory

← Back

Mediaelementjs Player

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

Author

Contributors

Rating

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"));

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • Corrected player source URL translation
Released
2016-04-04
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.4+
Vaadin 7.3 in 1.2.6
Vaadin 7.2 in 1.2.6
Vaadin 7.1 in 1.2.6
Vaadin 7.0 in 1.2.6
Vaadin 7.0+ in 1.2.5
Browser
Firefox
Opera
Safari
Google Chrome
Android Browser
Internet Explorer
Internet Explorer

Mediaelementjs Player - Vaadin Add-on Directory

A server-side MediaElement.js player component. Add Audio, Video, and YouTube players to your applications with Flash and Silverlight fallback. Mediaelementjs Player - Vaadin Add-on Directory
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.
Online