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

Rating

Popularity

100+

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.0+ in 1.0.0
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
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 Demo
MediaElement.js
GitHub
Discussion Forum

Mediaelementjs Player version 1.0.0
Initial Release

Mediaelementjs Player version 1.1.0
- Fixed compatibility with Vaadin 7.3.0 - Other bug fixes Known Issues: - Apparent memory leak in Chrome

Mediaelementjs Player version 1.1.1
- Removed test servlet from addon Known Issues: - Apparent memory leak in Chrome

Mediaelementjs Player version 1.1.2
- Major bug fixes for events - Upgrade to MediaElement.js 2.15.1 - Changed player type to enum Please report any bugs you find and feel free to contribute to the GitHub repo!

Mediaelementjs Player version 1.1.4
- Bug fix for setCurrentTime() Known Issues: - Apparent memory leak in Chrome - Seeking and setCurrentTime() does not work in Chrome. This is an MEJS bug.

Mediaelementjs Player version 1.2.0
- MediaComponentOptions refactor to Map - Bug fixes for mute(), unmute() and player state getter methods. Known Issues: - Major issue with IE - Apparent memory leak in Chrome - Seeking and setCurrentTime() does not work in Chrome. Help improve the project by contributing to the GitHub repo!

Mediaelementjs Player version 1.2.1
- Bug fix for volume state getter - Enhancement to call player initialization only once per server response (if required at all) Known Issues: - Weirdness in IE - Client RPC events don't work when mulitple players are on a single page. Please share your feedback here or at the GitHub repo, and feel free to contribute new code/bug fixes!

Mediaelementjs Player version 1.2.2
- Minor bug fixes

Mediaelementjs Player version 1.2.3
- Minor bug fixes

Mediaelementjs Player version 1.2.4
- Upgrade to Media Element JS 2.16.4. - Major JS refactor. - Eliminate need to re-create player after changing the source.

Mediaelementjs Player version 1.2.5
- Added support for YouTube (ExternalResource) - Fix for seeking in non-IE browsers - IOException thrown when player source changes is now properly handled. - Component now dynamically switches between audio and video players based on the source.

Mediaelementjs Player version 1.2.6
- REFACTOR - The MediaComponent class is now named MediaElementPlayer - Fixed YouTube plugin to use the HTML 5 first and then fallback to Flash/Silverlight

Mediaelementjs Player version 1.2.7
- REFACTOR - The MediaComponent class is now named MediaElementPlayer - Fixed YouTube plugin to use the HTML 5 first and then fallback to Flash/Silverlight

Mediaelementjs Player version 1.2.8
- Upgrade to MediaElement.js 1.20.0 - Fix "Black Box" bug caused by Vaadin framework changes to com.vaadin.shared.ui.JavaScriptComponentState

Mediaelementjs Player version 1.2.9
- Moved event listeners into "com.kbdunn.vaadin.addons.mediaelement.interfaces" package. - Added StateUpdatedListener to listen for updates to the client player state. - Add MediaElementPlayer#requestPlayerStateUpdate() to request the latest information from the client component. - Fix casting error when player duration is null on client side. - Add methods for removing listeners. - Improve network efficiency by debouncing state update calls.

Mediaelementjs Player version 1.3.1
- Add Vimeo support - Add support for all ConnectorResources - Fix Flash and Silverlight fallback

Mediaelementjs Player version 1.3.2
- Bug fix where setting the player source when the component is not attached throws an NPE. Fixed to set the source correctly once attached.

Mediaelementjs Player version 1.3.3
- Corrected player source URL translation

Online