Starting this thread for discussion on the
mediaelementjs-player
addon.
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?
Daniel
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) {
this.setCaption(sTitle);
setModal(true);
setWidth(“800px”);
VerticalLayout main = new VerticalLayout();
VerticalLayout layout = new VerticalLayout();
Button pause = new Button(“Pause”);
pause.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
videoPlayer.pause();
System.out.println(“Current time is”+videoPlayer.getCurrentTime());
}
});
Button play = new Button(“Play”);
play.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
videoPlayer.play();
System.out.println(“Current time is”+videoPlayer.getCurrentTime());
}
});
layout.addComponent(videoPlayer);
videoPlayer.setSource(new ExternalResource(“https://youtu.be/kh29_SERH0Y”));
videoPlayer.setCaption(“this is playing you tube video”);
videoPlayer.setCurrentTime(10000);
videoPlayer.play();
main.addComponent(layout);
main.addComponent(pause);
main.addComponent(play);
setContent(main);
}
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
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.(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
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 
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")));
[/code][code]
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
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");
vaadinVideo.setSource(resource);
videoPlayer.setSource(resource);
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:
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 [code]
@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;
}
}
[/code]
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
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+.