MediaElement JS Player Component

Starting this thread for discussion on the mediaelementjs-player addon.

Hi Ted,

I don't have a small working example for you, but Nimbus 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?

-Bryson
 

    videoPlayer.setSource(new ExternalResource("http://youtu.be/kh29_SERH0Y"));
               videoPlayer.setCaption("this is playing you tube video");
            videoPlayer.setCurrentTime(40);
            videoPlayer.play();

However - the following fails:

 videoPlayer.setSource(new FileResource(new File("D:/dddfffff.mp4")));
         //   videoPlayer.setSource(f);
            videoPlayer.setCaption("this is playing you tube video");
            videoPlayer.setCurrentTime(40);
            videoPlayer.play();

SEVERE: 
java.lang.NullPointerException
    at com.vaadin.server.ResourceReference.getURL(ResourceReference.java:48)
    at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.createMediaResource(MediaElementPlayer.java:176)
    at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.setSource(MediaElementPlayer.java:169)
    at com.example.videoviewertest.VideoviewertestUI$MEVideoViewer.<init>(VideoviewertestUI.java:127)
    at com.example.videoviewertest.VideoviewertestUI$1.buttonClick(VideoviewertestUI.java:72)

It is failing on this line...
 GlobalResourceHandler globalResourceHandler = connector.getUI()
                    .getSession().getGlobalResourceHandler(false);

Thanks

Ted
 

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

Same here, no way to get it to work with FileResource under Windows, Vaadin 7.5.3 :( 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
SEVERE:
java.lang.NullPointerException
at com.vaadin.server.ResourceReference.getURL(ResourceReference.java:48)
at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.createMediaResource(MediaElementPlayer.java:176)
at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.setSource(MediaElementPlayer.java:169)

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 :(

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 :( That exact file with the same ThemeResource line works perfectly with Vaadin Video, which calls HTML5 <video> internally.

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:

MediaElementPlayer videoPlayer = new MediaElementPlayer(MediaElementPlayer.Type.VIDEO);
        Video vaadinVideo = new Video();
        
        ThemeResource resource = new ThemeResource("0.mp4");
        
        vaadinVideo.setSource(resource);
        videoPlayer.setSource(resource);
        layout.addComponents(videoPlayer, vaadinVideo);

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:

java.lang.NullPointerException

    at com.vaadin.server.ResourceReference.getURL(ResourceReference.java:48)

I looked a little in the debugger about that, that's the beginning of Vaadin's ResourceReference.java 

@Override
    public String getURL() {
        if (resource instanceof ExternalResource) {
            return ((ExternalResource) resource).getURL();
        } else if (resource instanceof ConnectorResource) {
            ConnectorResource connectorResource = (ConnectorResource) resource;

            GlobalResourceHandler globalResourceHandler = connector.getUI()
                    .getSession().getGlobalResourceHandler(false);
            if (globalResourceHandler != null) {
                String uri = globalResourceHandler.getUri(connector,
                        connectorResource);
                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);
layout.addComponent(player);
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:
app://APP/connector/5/13/0/video0.mp4

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. :( 

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()
                    .getSession().getGlobalResourceHandler(false);

Bryson - any luck with this ?

Thanks

Ted  

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 :)

Bryson

Daniel Fiederling: 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("https://youtu.be/kh29_SERH0Y"));

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

Do you have any Ideas? 

 

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 :) 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 (https://vaadin.com/api/com/google/gwt/dom/client/MediaElement.html). However this is a client side GWT component.  I have been following the guide on how to integrate this on the Vaadin Wiki .
https://vaadin.com/wiki/-/wiki/Main/Integrating+an+existing+GWT+widget
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+.
 

Bryson Dunn: 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+.

 

Hi Bryson, I have integrated your addon to my project and the issue I'm facing is that the player doesn't load any mp3 file I pass, it only works with YouTube videos. I have tried different paths, I have tried ThemeResource and FileResource and nothing. I am using version 1.3.1

Thanks in advance

Could you post your code here?

Bryson Dunn: Could you post your code here?

Sure, I just took as base code the one you uploaded in github. 
As I said, I haven't been able to reproduce any mp3 files, just YouTube videos so far. 
Here is what I have. 

package com.monitec.mapatiempos.main.gui.util;

import java.io.File;
import java.util.LinkedHashMap;
import java.util.Map;

import com.kbdunn.vaadin.addons.mediaelement.interfaces.CanPlayListener;
import com.kbdunn.vaadin.addons.mediaelement.interfaces.LoadedDataListener;
import com.kbdunn.vaadin.addons.mediaelement.interfaces.LoadedMetadataListener;
import com.kbdunn.vaadin.addons.mediaelement.interfaces.PausedListener;
import com.kbdunn.vaadin.addons.mediaelement.interfaces.PlaybackEndedListener;
import com.kbdunn.vaadin.addons.mediaelement.interfaces.PlayingListener;
import com.kbdunn.vaadin.addons.mediaelement.interfaces.StateUpdatedListener;
import com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer;
import com.monitec.mapatiempos.main.gui.ChartContentPanel;
import com.monitec.mapatiempos.mapa.bs.MapaService;
import com.monitec.mapatiempos.mapa.bs.MapaServiceImpl;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.FileResource;
import com.vaadin.server.Resource;
import com.vaadin.server.ThemeResource;
import com.vaadin.shared.ui.label.ContentMode;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.themes.ValoTheme;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;

/**
 * Class MediaPlayerAddonLayout
 * Created on 25/03/2016 by Carlos David carlosmosquera@pwpsoftware.com
 * Base code created  by Bryson, please visit http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/?a=MejsPlayer for full access
 */
@org.springframework.stereotype.Component
@SuppressWarnings("serial")
@Scope("prototype")
public class MediaPlayerAddonLayout extends VerticalLayout implements
        CanPlayListener, LoadedDataListener, LoadedMetadataListener, PausedListener, PlaybackEndedListener, PlayingListener, StateUpdatedListener,
        View
{

    private static final long serialVersionUID = 1L;
    //public static Map<String, Resource> MEDIA_FILES;
    private static final String VIDEO_YOUTUBE = "The Art of Flight - Trailer (YouTube)";
    //private static final String VIDEO_VIMEO = "The Art of Flight - Trailer (Vimeo)";

    @Autowired
    private MapaService mapaService;

    
/*    static {
        MEDIA_FILES = new LinkedHashMap<String, Resource>();
        //MEDIA_FILES.put(SONG_BONOBO, new ThemeResource("songs/01_Noctuary.mp3"));
        //MEDIA_FILES.put(SONG_ACDC, new ThemeResource("songs/ACDC_-_Back_In_Black-sample.ogg"));
        //MEDIA_FILES.put(VIDEO_FAKER, new ThemeResource("videos/Chet_Faker-Archangel_Live_Sessions.mp4"));
        MEDIA_FILES.put(VIDEO_YOUTUBE, new ExternalResource("https://www.youtube.com/watch?v=jwPSuVk4fhw"));
        //MEDIA_FILES.put(VIDEO_VIMEO, new ExternalResource("https://vimeo.com/20065250"));
        //MEDIA_FILES.put(VIDEO_ALTJ, new ThemeResource("videos/alt-J-Left_Hand_Free.mp4"));
    }*/
    
    private MediaElementPlayer player;
    private Label nowPlaying;
    private ComboBox resources;
    private Button play;
    private Button pause;
    private Button mute;
    private Button unmute;
    private TextField dectectionTimeStamp;
    private TextField volumeInput;
    private TextField detectionTimeStampDisplay;
    private TextField durationDisplay;
    private TextField nameDetectionDisplay;
    private VerticalLayout playerLayout;
    private Map<String, Resource> mediaFiles;
    
    public MediaPlayerAddonLayout() {
        setMargin(true);
        setSpacing(true);
        mediaFiles = new LinkedHashMap<>();
        mediaFiles.put("Captain America Civil WAR", new ExternalResource("https://www.youtube.com/watch?v=jwPSuVk4fhw"));
        mediaFiles.put("Tristania - Darkling", new FileResource(new File("D:/generatedmp3/Darkling.mp3")));
       // mediaFiles.put("sss", new ThemeResource(""))
        buildLayout();
    }
    
    private void buildLayout() {
        setMargin(true);
        addComponent(new ControlPanel());
        
        Panel playerPanel = new Panel();
        playerPanel.setWidth("80%");
        playerPanel.addStyleName(ValoTheme.PANEL_WELL);
        playerLayout = new VerticalLayout();
        playerLayout.setMargin(true);
        playerLayout.setSpacing(true);
        playerLayout.setSizeFull();
        playerPanel.setContent(playerLayout);
        addComponent(playerPanel);
        setComponentAlignment(playerPanel, Alignment.MIDDLE_CENTER);
        
        Label h1 = new Label("MDT Player");
        h1.addStyleName(ValoTheme.LABEL_H1);
        h1.addStyleName(ValoTheme.LABEL_NO_MARGIN);
        h1.setSizeUndefined();
        playerLayout.addComponent(h1);
        playerLayout.setComponentAlignment(h1, Alignment.MIDDLE_CENTER);
        player = new MediaElementPlayer();
        player.setPlayerType(MediaElementPlayer.Type.AUDIO);
        player.addCanPlayListener(this);
        player.addLoadedDataListener(this);
        player.addPauseListener(this);
        player.addPlaybackEndedListener(this);
        player.addPlayingListener(this);
        player.addStateUpdatedListener(this);
        nowPlaying = new Label();
        nowPlaying.setSizeUndefined();
        playerLayout.addComponent(nowPlaying);
        playerLayout.setComponentAlignment(nowPlaying, Alignment.MIDDLE_CENTER);
        playerLayout.addComponent(player);
        playerLayout.setComponentAlignment(player, Alignment.MIDDLE_CENTER);
        
        Label link = new Label("<a href='http://www.pwpsoftware.com' target='_blank'>Powered by PWP Software SAS</a>", ContentMode.HTML);
        link.setSizeUndefined();
        link.addStyleName(ValoTheme.LABEL_SMALL);
        addComponent(link);
        setComponentAlignment(link, Alignment.BOTTOM_RIGHT);
    }


    public Map<String, Resource> getMediaFiles()
    {
        return mediaFiles;
    }

    public void setMediaFiles(Map<String, Resource> mediaFiles)
    {
        this.mediaFiles = mediaFiles;
    }

    @Override
    public void paused(MediaElementPlayer player) {
        Notification.show("Paused!", Notification.Type.TRAY_NOTIFICATION);
    }

    @Override
    public void metadataLoaded(MediaElementPlayer player) {
        Notification.show("Metadata Loaded!", Notification.Type.TRAY_NOTIFICATION);
    }

    @Override
    public void dataLoaded(MediaElementPlayer player) {
        Notification.show("Data Loaded!", Notification.Type.TRAY_NOTIFICATION);
    }

    @Override
    public void canPlay(MediaElementPlayer player) {
        Notification.show("Can Play!", Notification.Type.TRAY_NOTIFICATION);
    }

    @Override
    public void playing(MediaElementPlayer player) {
        Notification.show("Playing!", Notification.Type.TRAY_NOTIFICATION);
    }

    @Override
    public void playbackEnded(MediaElementPlayer player) {
        Notification.show("Playback Ended!", Notification.Type.TRAY_NOTIFICATION);
    }

    @Override
    public void stateUpdated(MediaElementPlayer player) {
        detectionTimeStampDisplay.setValue(String.valueOf(player.getCurrentTime()));
        durationDisplay.setValue(String.valueOf(player.getDuration()));
        nameDetectionDisplay.setValue(String.valueOf(player.getVolume()));
    }

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent)
    {

    }

    class ControlPanel extends Panel {
        
        private static final long serialVersionUID = 1L;
        private VerticalLayout content;
        
        public ControlPanel() {
            content = new VerticalLayout();
            content.setMargin(true);
            content.setSpacing(true);
            setContent(content);
            
            initMediaSelectors();
            initControlButtons();
            initInfoLabels();
            initControlInputs();
            
            content.addComponent(resources);
            
            HorizontalLayout inputs = new HorizontalLayout();
            inputs.setSpacing(true);
            inputs.addComponent(detectionTimeStampDisplay);
            inputs.addComponent(durationDisplay);
            inputs.addComponent(nameDetectionDisplay);
            inputs.addComponent(dectectionTimeStamp);
            inputs.addComponent(volumeInput);
            content.addComponent(inputs);
            
            HorizontalLayout controlButtons = new HorizontalLayout();
            controlButtons.setSpacing(true);
            controlButtons.addComponent(play);
            controlButtons.addComponent(pause);
            controlButtons.addComponent(mute);
            controlButtons.addComponent(unmute);
            content.addComponent(controlButtons);
        }
        
        private void initMediaSelectors() {
            resources = new ComboBox("Cargar audio:");
            resources.setWidth("250px");
            resources.setNewItemsAllowed(false);
            resources.setTextInputAllowed(false);
            resources.setNullSelectionAllowed(false);
            resources.setInputPrompt("Seleccione un audio");
            mediaFiles.keySet().forEach(resources::addItem);
            resources.addValueChangeListener(new ValueChangeListener() {
                private static final long serialVersionUID = 1L;

                @Override
                public void valueChange(ValueChangeEvent event) {
                    String key = (String) resources.getValue();
                    player.setSource(mediaFiles.get(key));
                    nowPlaying.setValue("Now Playing: " + key);
                }
            });
        }
        
        private void initControlButtons() {
            play = new Button("Play", new ClickListener() {
                private static final long serialVersionUID = 1L;

                @Override
                public void buttonClick(ClickEvent event) {
                    player.play();
                }
            });
            pause = new Button("Pause", new ClickListener() {
                private static final long serialVersionUID = 1L;

                @Override
                public void buttonClick(ClickEvent event) {
                    player.pause();

                }
            });

            mute = new Button("Mute", new ClickListener() {
                private static final long serialVersionUID = 1L;

                @Override
                public void buttonClick(ClickEvent event) {
                    player.mute();
                }
            });
            unmute = new Button("Unmute", new ClickListener() {
                private static final long serialVersionUID = 1L;

                @Override
                public void buttonClick(ClickEvent event) {
                    player.unmute();
                }
            });
        }
        
        private void initInfoLabels() {
            detectionTimeStampDisplay = new TextField("Fecha Deteccion");
            detectionTimeStampDisplay.setEnabled(false);
            detectionTimeStampDisplay.setValue("2016-02-22 5:39:02"); //TODO: Change this hardcoded timestamp
            durationDisplay = new TextField("Duracion (segundos)");
            durationDisplay.setEnabled(false);
            nameDetectionDisplay = new TextField("Nombre");
            nameDetectionDisplay.setEnabled(false);
        }
        
        private void initControlInputs() {
            dectectionTimeStamp = new TextField("Set Current Time (seconds):");
            dectectionTimeStamp.setValue("0");
            dectectionTimeStamp.setRequired(true);
            volumeInput = new TextField("Set Volume (1-10):");
            volumeInput.setValue("10");
            volumeInput.setRequired(true);
        }
    }
}

Have you tried a simpler implementation to start? Try the code example from the addon page:

MediaElementPlayer audioPlayer = new MediaElementPlayer(); 
layout.addComponent(audioPlayer); 
audioPlayer.setSource(new FileResource(new File("D:/generatedmp3/Darkling.mp3"))); 
audioPlayer.play();

Bryson Dunn: Have you tried a simpler implementation to start? Try the code example from the addon page:

MediaElementPlayer audioPlayer = new MediaElementPlayer();
layout.addComponent(audioPlayer);
audioPlayer.setSource(new FileResource(new File("D:/generatedmp3/Darkling.mp3")));
audioPlayer.play();

 

Well, that doesn´t change anything at all. I mean, the main problem is exactly that the setSource method apparently is not doing its job. The File is being created, but the player is not loading the audio. 

Yeah, understood, however 4 lines of code are easier to debug than 300.

This issue is new to me - which version of Vaadin and the addon are you using? Please use the code I posted, reply here with any errors and also include the HTML tree for the widget. I'm specifically interested in the audio tag, which should look similar to this:

<audio type="audio/mpeg" src="http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/VAADIN/songs/01_Noctuary.mp3" id="mejsplayer-205" preload="none">
    <object type="application/x-shockwave-flash" data="VAADIN/addons/mejs-player/mediaelement-2.20.0/flashmediaelement.swf">
        <param name="movie" value="VAADIN/addons/mejs-player/mediaelement-2.20.0/flashmediaelement.swf">
        <param name="flashvars" value="controls=true&amp;amp;file=http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/VAADIN/songs/01_Noctuary.mp3">
    </object>
    <object type="application/x-silverlight-2" data="VAADIN/addons/mejs-player/mediaelement-2.20.0/silverlightmediaelement.xap">
        <param name="movie" value="VAADIN/addons/mejs-player/mediaelement-2.20.0/silverlightmediaelement.xap">
        <param name="flashvars" value="controls=true&amp;amp;file=http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/VAADIN/songs/01_Noctuary.mp3">
    </object>
</audio>

I just tested with Vaadin 7.6.3 and 1.3.1 of the addon and it's looking good on my end. Of course if you're observing an errors (Java, JavaScript, Vaadin debug console) please share those.

-Bryson
 

Bryson Dunn: Yeah, understood, however 4 lines of code are easier to debug than 300.

This issue is new to me - which version of Vaadin and the addon are you using? Please use the code I posted, reply here with any errors and also include the HTML tree for the widget. I'm specifically interested in the audio tag, which should look similar to this:

<audio type="audio/mpeg" src="http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/VAADIN/songs/01_Noctuary.mp3" id="mejsplayer-205" preload="none">
    <object type="application/x-shockwave-flash" data="VAADIN/addons/mejs-player/mediaelement-2.20.0/flashmediaelement.swf">
        <param name="movie" value="VAADIN/addons/mejs-player/mediaelement-2.20.0/flashmediaelement.swf">
        <param name="flashvars" value="controls=true&amp;amp;file=http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/VAADIN/songs/01_Noctuary.mp3">
    </object>
    <object type="application/x-silverlight-2" data="VAADIN/addons/mejs-player/mediaelement-2.20.0/silverlightmediaelement.xap">
        <param name="movie" value="VAADIN/addons/mejs-player/mediaelement-2.20.0/silverlightmediaelement.xap">
        <param name="flashvars" value="controls=true&amp;amp;file=http://bdunn.jelastic.servint.net/Vaadin-Addon-Demo/VAADIN/songs/01_Noctuary.mp3">
    </object>
</audio>

I just tested with Vaadin 7.6.3 and 1.3.1 of the addon and it's looking good on my end. Of course if you're observing an errors (Java, JavaScript, Vaadin debug console) please share those.

-Bryson

 

Hey, thanks for the reply. 

I tryed the simpler version as you suggested. And now I'm getting a NullPointerException exactly when calling the setSource method with the File I created. 
First I created the new File, then called setSourceMethod. 

Check this out: 

public void setSource() {
File sourceFile = new File((DCSessionData.getServletContext().getRealPath("audio") + File.separator + "Darkling.mp3"));
player.setSource(new FileResource(sourceFile));

}

Here is the stack trace: 

mar 28, 2016 7:44:18 PM com.vaadin.server.DefaultErrorHandler doDefault
SEVERE: 
java.lang.NullPointerException
    at com.vaadin.server.ResourceReference.getURL(ResourceReference.java:48)
    at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.createMediaResource(MediaElementPlayer.java:219)
    at com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer.setSource(MediaElementPlayer.java:212)
    at com.monitec.mapatiempos.main.gui.MediaPlayer.setSource(MediaPlayer.java:51)
    at com.monitec.mapatiempos.main.gui.menu.DashboardMenu.<init>(DashboardMenu.java:49)
    at com.monitec.mapatiempos.main.gui.VistaPrincipal.<init>(VistaPrincipal.java:26)
    at com.monitec.mapatiempos.main.gui.MapaTiemposUI.showMainView(MapaTiemposUI.java:76)
    at com.monitec.mapatiempos.main.gui.MapaTiemposUI$1.loginSuccessful(MapaTiemposUI.java:57)
    at com.monitec.mapatiempos.security.gui.Login.login(Login.java:121)
    at com.monitec.mapatiempos.security.gui.Login.access$000(Login.java:20)
    at com.monitec.mapatiempos.security.gui.Login$3.buttonClick(Login.java:170)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:483)
    at com.vaadin.event.ListenerMethod.receiveEvent(ListenerMethod.java:508)
    at com.vaadin.event.EventRouter.fireEvent(EventRouter.java:198)
    at com.vaadin.event.EventRouter.fireEvent(EventRouter.java:161)
    at com.vaadin.server.AbstractClientConnector.fireEvent(AbstractClientConnector.java:1008)
    at com.vaadin.ui.Button.fireClick(Button.java:377)
    at com.vaadin.ui.Button$1.click(Button.java:54)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:483)
    at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:158)
    at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:118)
    at com.vaadin.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:408)
    at com.vaadin.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:273)
    at com.vaadin.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:79)
    at com.vaadin.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:41)
    at com.vaadin.server.VaadinService.handleRequest(VaadinService.java:1409)
    at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:364)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:790)
    at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:769)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1667)
    at org.eclipse.jetty.websocket.server.WebSocketUpgradeFilter.doFilter(WebSocketUpgradeFilter.java:172)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1650)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:316)
    at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.invoke(FilterSecurityInterceptor.java:126)
    at org.springframework.security.web.access.intercept.FilterSecurityInterceptor.doFilter(FilterSecurityInterceptor.java:90)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:114)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.session.SessionManagementFilter.doFilter(SessionManagementFilter.java:122)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:111)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.servletapi.SecurityContextHolderAwareRequestFilter.doFilter(SecurityContextHolderAwareRequestFilter.java:169)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:48)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.authentication.www.BasicAuthenticationFilter.doFilterInternal(BasicAuthenticationFilter.java:158)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.authentication.AbstractAuthenticationProcessingFilter.doFilter(AbstractAuthenticationProcessingFilter.java:205)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.authentication.logout.LogoutFilter.doFilter(LogoutFilter.java:120)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.header.HeaderWriterFilter.doFilterInternal(HeaderWriterFilter.java:64)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.context.request.async.WebAsyncManagerIntegrationFilter.doFilterInternal(WebAsyncManagerIntegrationFilter.java:53)
    at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.session.ConcurrentSessionFilter.doFilter(ConcurrentSessionFilter.java:133)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.context.SecurityContextPersistenceFilter.doFilter(SecurityContextPersistenceFilter.java:91)
    at org.springframework.security.web.FilterChainProxy$VirtualFilterChain.doFilter(FilterChainProxy.java:330)
    at org.springframework.security.web.FilterChainProxy.doFilterInternal(FilterChainProxy.java:213)
    at org.springframework.security.web.FilterChainProxy.doFilter(FilterChainProxy.java:176)
    at org.springframework.web.filter.DelegatingFilterProxy.invokeDelegate(DelegatingFilterProxy.java:344)
    at org.springframework.web.filter.DelegatingFilterProxy.doFilter(DelegatingFilterProxy.java:261)
    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1650)
    at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:583)
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:143)
    at org.eclipse.jetty.security.SecurityHandler.handle(SecurityHandler.java:577)
    at org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:223)
    at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1125)
    at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:515)
    at org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:185)
    at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1059)
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141)
    at org.eclipse.jetty.server.handler.ContextHandlerCollection.handle(ContextHandlerCollection.java:215)
    at org.eclipse.jetty.server.handler.HandlerCollection.handle(HandlerCollection.java:110)
    at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:97)
    at org.eclipse.jetty.server.Server.handle(Server.java:497)
    at org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:311)
    at org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:248)
    at org.eclipse.jetty.io.AbstractConnection$2.run(AbstractConnection.java:540)
    at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:610)
    at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:539)
    at java.lang.Thread.run(Thread.java:745)

Thanks a lot. 
 

Interesting. Again, would you please share which version of Vaadin you are using? In 7.6.4 line 48/49 of ResourceReference is:

GlobalResourceHandler globalResourceHandler = connector.getUI()
                    .getSession().getGlobalResourceHandler(false);

Which indicates that the player is not attached to a UI when setSource() is executed. This should be handled by the addon under the covers, which I'll work on. In the meantime you should be able to work around the issue by first attaching the component to the UI as in the sample code:

layout.addComponent(audioPlayer);

Hope that works for you, let me know if not. The fix to handle this automatically should be simple enough

-Bryson

Just released version 1.3.2 which fixes this issue. If you try it out let me know how it works for you.

-Bryson

Bryson Dunn: Just released version 1.3.2 which fixes this issue. If you try it out let me know how it works for you.

-Bryson

Hi, 

The new version solved the NullPointerException, but player is still not playing the audio file. I am using Vaadin 7.6.3 and 1.3.2 of your addon. 

I created this simple class for testing: 

package com.monitec.mapatiempos.main.gui;

import com.kbdunn.vaadin.addons.mediaelement.MediaElementPlayer;
import com.monitec.mapatiempos.security.shared.DCSessionData;
import com.vaadin.navigator.View;
import com.vaadin.navigator.ViewChangeListener;
import com.vaadin.server.FileResource;
import com.vaadin.ui.VerticalLayout;
import java.io.File;

/**
* Class MediaPlayer Created by Carlos-David on 28/03/2016 for Monitec REST API Copyright PWP Software SAS 2016 All
* rights reserved. carlosmosquera@pwpsoftware.com
*/

public class MediaPlayer extends VerticalLayout implements View
{
private MediaElementPlayer player;
public MediaPlayer()
{
player = new MediaElementPlayer();
this.addComponent(player);
}

public void play() { player.play(); }

public void setSource()
{
File sourceFile = new File( (DCSessionData.getServletContext().getRealPath("audio") + File.separator + "Darkling.mp3"));
player.setSource(new FileResource(sourceFile));
}
public void pause() { player.pause(); }
@Override
public void enter(ViewChangeListener.ViewChangeEvent viewChangeEvent) { } }

I think the problem is that the source is not being set within the audio tag

As you can see in the attached image

I don't see any java or javascript errors. 

Thanks, 

David

If you're using the same code as with the previous version (1.3.1) the only difference is that the exception will be surpressed. This root cause appears to be an issue with your application - the player is unable to retrieve the UI it is attached to and will not set the source until it is attached. It's strange that you're seeing the HTML when Vaadin doesn't think the component has been added.

Could you please post the code that adds your MediaPlayer view to your application?

Bryson Dunn: If you're using the same code as with the previous version (1.3.1) the only difference is that the exception will be surpressed. This root cause appears to be an issue with your application - the player is unable to retrieve the UI it is attached to and will not set the source until it is attached. It's strange that you're seeing the HTML when Vaadin doesn't think the component has been added.

Could you please post the code that adds your MediaPlayer view to your application?

But why if I set the source with ExternalResource and pass it a YouTube url, the player works just fine. The video is played. The issue only happens when I try to set mp3 files from my local machine. 

I'll attach the code in the next post. 

The reason is simple: ExternalResource is just a URL which gets passed to the component, whereas Vaadin must create a URI for any other Resource type. ThemeResources already have accessible URIs (/VAADIN/*), but ConnectorResource subclasses (FileResource, ClassResource) need to be registered explicitly to have a URI assigned. For example Vaadin would assign a URI such as this for a FileResource:

http://localhost:8080/APP/connector/0/58/0/my.mp3

The problem is that attempting to get this URI fails when the component is not attached to a UI. This has been fixed by queuing the player source if the component is not attached, and setting the source using an attach listener.

The root cause of this issue is that MediaElementPlayer#getUI() returns null when you are setting your source, meaning the component is not attached. What's interesting is that it seems the player is being displayed in your application, which means it should be attached.This may be a Vaadin bug or a problem with your code - please post it when you have the chance.

Great catch, thanks for finding this bug! The ThemeResource URL was not being properly translated, which has been fixed in version 1.3.3. Check it out and let me know if it works for you.

FYI as a result of the corrected URI translation the path of ThemeResources will be different. For example:

player.setSource(new ThemeResource("songs/song.mp3"));

...would have loaded a file at VAADIN/songs/song.mp3 in version 1.3.2, but will now load the file from the correct location (VAADIN/themes/mytheme/songs/song.mp3).

Does anybody knows how to add closed captions to the play back? Would be great to see the code and a sample closed captions text or a string. Thanks in advance!
 

Based on the exmample on the MediaElement.js website (http://mediaelementjs.com/examples/?name=translation) this should be doable by inserting a <track> tag in the HTML5 video element.

Please submit this feature request as an issue in GitHub and I'll look into adding that functionality.

-Bryson

Hi,

I'm currtently trying to use the component, but all I am getting, is an image of the first frame of the video, and a label "Error loading this resource" in Safari and Chrome on my Mac. Firefox seems to be working nicely. On Windows IE and Firefox seem to be failling too. I coudln't get an error from the Developer Tools of Chrome and I can even see it loading the resource nicely without any problems in the Network view of the Developer Tools nor on the server side. One thing I did notice was that the component seems to be requesting the Vaadin resource twice, the first time only a few bytes are loaded (I guess for the preview), the second time 0 bytes are loaded. As I am still able to load the resource from the Developer Tools panel way after the failure, this is probably not an issue that the component can't access the resource. 

Any ideas?

Chris

Ok ... so I integrated your sources into a test project of mine and switched to the non minimal version of the js and css by changing the references in MediaElementPlayer. Unfortunately this didn't quite help as the exception which is thrown doesn't contain any helpfull information. So I tried something different. 

I commented out the code that prevents me from using ExternalResource. I know that this is probably due to the fact that most players need some sort of Random Access to the resource. I already implemented this in a MultipartFileSender which allows this random access. So with the comented out check, I was able to run the MediaElementPlayer with my ExternalResource without any problems and now in contrast to the Vaadin Video component it seems to be working on all Desktop and Mobile browsers :-)

Eventually changing the exception thrown to one that gives a little more information and to explictly turn it off by some "setRandomAcessResourceServer(true)" would be a cool option for me to work without a custom version.

Great component, by the way :-)