MediaElement JS Player Component

Starting this thread for discussion on the

I tried to extend the sample code by adding some playback features to the youtube video (pause, progress, volume) The video starts, but the player doesn’t show the functions play/pause, change progress, volume, etc.

        // YouTube player
        MediaElementPlayer videoPlayer2 = new MediaElementPlayer(MediaElementPlayer.Type.VIDEO);
        videoPlayer2.setSource(new ExternalResource(""));

        MediaElementPlayerOptions options = videoPlayer2.getOptions();
        Feature features = new Feature {Feature.PLAYPAUSE, Feature.PROGRESS, Feature.VOLUME};

Do you have any Ideas?


How have you got on ? I have got this to work by adding my own buttons for play and pause…

class MEVideoViewer extends Window
MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaElementPlayer.Type.VIDEO);
public MEVideoViewer(String uri,String sTitle) {
VerticalLayout main = new VerticalLayout();
VerticalLayout layout = new VerticalLayout();
Button pause = new Button(“Pause”);
pause.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
System.out.println(“Current time is”+videoPlayer.getCurrentTime());
Button play = new Button(“Play”);
play.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {;
System.out.println(“Current time is”+videoPlayer.getCurrentTime());
videoPlayer.setSource(new ExternalResource(“”));
videoPlayer.setCaption(“this is playing you tube video”);


I can get the viewer to work with an ExternalResource but not with a FileResource - I am developing on Windows with Eclipse - and accessing an external file on the Windows machine- do you have any examples of this working?

Hi Ted,

I don’t have a small working example for you, but
uses FileResources to play media files and it works like a charm. It’s as simple as:

player.setSource(new FileResource(new File("/path/to/song.mp3"))); Are you seeing an error that you could post?


videoPlayer.setSource(new ExternalResource(""));
           videoPlayer.setCaption("this is playing you tube video");

However - the following fails:

videoPlayer.setSource(new FileResource(new File(“D:/dddfffff.mp4”)));
// videoPlayer.setSource(f);
videoPlayer.setCaption(“this is playing you tube video”);

at com.vaadin.server.ResourceReference.getURL(
at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.createMediaResource(
at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.setSource(
at com.example.videoviewertest.VideoviewertestUI$MEVideoViewer.(
at com.example.videoviewertest.VideoviewertestUI$1.buttonClick(

It is failing on this line…
GlobalResourceHandler globalResourceHandler = connector.getUI()



Looks like a Vaadin framework bug to me… Are you sure the file exists? I’d have to dig into the Vaadin code to see what is really happening there.

yes - I am pretty certain - I have checked that the file resource gets created

Hi Bryson - any luck on this one ? Thanks Ted

Same here, no way to get it to work with FileResource under Windows, Vaadin 7.5.3 :frowning: Both produce same NullPointerException, files obviously do exist. I even tested different folders to exclude access rights problem.

MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaElementPlayer.Type.AUDIO);
videoPlayer.setSource(new FileResource(new File("c:/Users/username/Documents/04.mp3")));
MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaElementPlayer.Type.VIDEO);
videoPlayer.setSource(new FileResource(new File("c:/Users/username/Documents/Sample.flv")));

Aug 15, 2015 1:47:38 PM com.vaadin.server.DefaultErrorHandler doDefault
at com.vaadin.server.ResourceReference.getURL(
at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.createMediaResource(
at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.setSource(

ExternalResource with youtube works. I tried to workaround that by doing

ExternalResource("file:///C:/Users/username/Documents/file.flv"); But unhappily it doesn’t allow such a workaround :frowning:

I also tried ThemeResource with .mp4 file - now it’s slightly different, as there is no exception, but still no video, I only get an empty player :frowning: That exact file with the same ThemeResource line works perfectly with Vaadin Video, which calls HTML5

Reverted to Vaadin 7.4.0 - no luck with 1.2.7, same NullPointerException.

Reverted to Vaadin 7.3.0 (and to MediaElementPlayer 1.2.6) - same, only youtube works, files don’t.
FileResource always throws NullPointerException.
ThemeResource doesn’t, but the player is empty, so it doesn’t work:[code]
MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaElementPlayer.Type.VIDEO);
Video vaadinVideo = new Video();

    ThemeResource resource = new ThemeResource("0.mp4");
    layout.addComponents(videoPlayer, vaadinVideo);

[/code]In this example Vaadin video works. MediaElementPlayer doesn’t. I tried with Tomcat 7 and 8.

So that basically means that the player is currently completely unusable (even with previous versions of Vaadin) for everything except Youtube, unless I missed something, some tricky way to get it to work somehow. Is there anything I missed?

I guess that I have to recompile it myself and play around with its internals…

Thanks, I am grateful for any answer!
Best regards.

Same here. Local files dont work:


at com.vaadin.server.ResourceReference.getURL(

I looked a little in the debugger about that, that’s the beginning of Vaadin’s [code]
public String getURL() {
if (resource instanceof ExternalResource) {
return ((ExternalResource) resource).getURL();
} else if (resource instanceof ConnectorResource) {
ConnectorResource connectorResource = (ConnectorResource) resource;

        GlobalResourceHandler globalResourceHandler = connector.getUI()
        if (globalResourceHandler != null) {
            String uri = globalResourceHandler.getUri(connector,
            if (uri != null && !uri.isEmpty()) {
                return uri;


Here is the relevant line that throws this exception: GlobalResourceHandler globalResourceHandler = connector.getUI().getSession().getGlobalResourceHandler(false);

It tries first to get the UI that this connector is attached to, but it’s actually not attached to anything. At the moment when this executes, it doesn’t have any parent, so connector.getUI() returns null.

So I swapped few lines in my main UI.init(), instead of: MediaElementPlayer player = new MediaElementPlayer(Type.VIDEO); player.setSource(new FileResource(new File("C:/dev/videos/video0.mp4"))); layout.addComponent(player);
I did that:

MediaElementPlayer player = new MediaElementPlayer(Type.VIDEO);
player.setSource(new FileResource(new File("C:/dev/videos/video0.mp4")));

First add the player to the layout, so it now has a parent and a UI that it is connected to, and then execute player.setSource(). Now there is no exception, it launches, but the player is empty, there is no video.

.getURL was successfully done and it returned a good value:

But apparently player did not have this value, so there is something more to fix. For the moment that’s all what I see about it…

Yep. Tried swapping may things - even if there is no NPE, the player does not do anything-- same as yours. :frowning:

I guess for now, I will stick to Audio and Video components. They still work.

Yes - niceguy - I get the same error - it is failing on the line :

GlobalResourceHandler globalResourceHandler = connector.getUI()

Bryson - any luck with this ?



Thanks for all of the investigation guys. Unfortunately I’m swamped with my day job right now and don’t have time to look into a fix for this.

That said, I’m always open to contributions on GitHub! Feel free to take a look and submit a pull request :slight_smile:


I have similar problem. Player doesn’t show any functions, is only empty bar:

anyone can help?

This player is broken, but you can use a direct way, direct html/css/js via iframe, that hackish way (without integration) always works in Vaadin :slight_smile: that way you are free to use whatever good player you want: video.js, mediaelementjs, flowplayer etc.

Hi niceguy - can you provide a bit more explanation on what you mean - maybe an example? I need the features in mediaelements e.g. in particular get current position, play from a given position. With this in mind, I have been looking at the use of GWT i.e.

The methods are available in MediaElement class ( However this is a client side GWT component. I have been following the guide on how to integrate this on the Vaadin Wiki .

I have made some progress - following the example shown - but not got it working yet - but I think I am close… I would be happy to share where I have got so far, so someone with more expertise may be able to help. It would be great to get this working as a “community effort”.

Hi Everyone -

The “player with no controls” bug has been fixed in version 1.2.8. It was an issue with how Vaadin translates Java POJOs into Javascript objects in version 7.4+.