Mediaelementjs Player
A server-side MediaElement.js player component. Add Audio, Video, and YouTube players to your applications with Flash and Silverlight fallback.
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
- frequentjava.nio.channels.ClosedChannelException
errors cause spotty playback.ThemeResource
- seeking doesn't work in Chrome because this is not aConnectorResource
, and theAcceptRanges: 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
Compatibility
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.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