Video auf Vaadin Spielen

Question

ich auf meiner Vaadin Anwendung ein MP4-Video zu spielen, aber ich habe ein paar Probleme:

• hören mögen, wenn es endet, so kann ich das Fenster, das ich es anzuzeigen verwendet schließen.

Hier ist mein Code so weit:

//Display video 
    ThemeResource fileResource = new ThemeResource("videos/intro.mp4"); 
    Video vd = new Video(); 
    vd.setAutoplay(true); 
    vd.setSource(fileResource); 
    vd.setResponsive(false); 
    vd.setReadOnly(true); 
    vd.setSizeFull(); 
    Window intro = new Window(); 
    intro.setContent(vd); 
    intro.setHeight(100, Unit.PERCENTAGE); 
    intro.setWidth(100, Unit.PERCENTAGE); 
    intro.center(); 
    intro.setModal(true); 
    addWindow(intro); 
    vd.play(); 

Leider war ich nicht in der Lage viele Informationen über diese Komponente zu finden. Irgendeine Idee?

Answer 1

Sie können die JavaScript-Lösung von this answer mit Vaadins component extension verwenden.

Sie benötigen Stecker-Klasse, die in der zitierten Antwort vorgeschlagen einfache JS-Ereignis-Listener fügt hinzu:

@Connect(VideoEndedExtension.class) 
public class VideoEndedConnector extends AbstractExtensionConnector { 

    @Override 
    protected void extend(ServerConnector target) { 
     addVideoEndedListener(((ComponentConnector) target).getWidget().getElement()); 
    } 

    private void onVideoEnded() { 
     getRpcProxy(VideoEndedRpc.class).onVideoEnded(); 
    } 

    private native void addVideoEndedListener(Element el) 
    /*-{ 
      var self = this; 
      el.addEventListener('ended', $entry(function(e) { 
       self.@your.package.VideoEndedConnector::onVideoEnded()(); 
      }), false); 

    }-*/; 
} 

(Sie müssen your.package um das Paket zu ändern, die VideoEndedConnector Klasse enthält)

, wenn ein Ereignis der Server auftritt, ist mit der Verwendung von RPC informiert:

public interface VideoEndedRpc extends ServerRpc { 
    void onVideoEnded(); 
} 

der letzte Teil ist Erweiterung, die RPC auf dem Server registriert sid e und verarbeitet eingehende Anrufe:

Video v = new Video("video", new ExternalResource("link.to.video")); 
VideoEndedExtension ext = new VideoEndedExtension(); 
ext.extend(v); 
ext.addVideoEndedListener(new VideoEndedListener() { 

    @Override 
    public void onVideoEnded() { 
     Notification.show("Video ended"); 
    } 
}); 

Wenn Sie mehr über Vaadin die Erweiterungen überprüfen this guide lesen wollen:

public class VideoEndedExtension extends AbstractExtension { 

    private List<VideoEndedListener> videoEndedListeners = new ArrayList<>(); 

    public interface VideoEndedListener extends Serializable { 
     void onVideoEnded(); 
    } 

    public void extend(Video video) { 
     super.extend(video); 
     registerRpc(new VideoEndedRpc() { 

      @Override 
      public void onVideoEnded() { 
       for (VideoEndedListener listener : videoEndedListeners) { 
        listener.onVideoEnded(); 
       }    
      } 
     }); 
    } 

    public void addVideoEndedListener(VideoEndedListener listener) { 
     if (listener != null) { 
      videoEndedListeners.add(listener); 
     } 
    } 
} 

Sie es mit Ihren Video Komponente verwenden können.

Nativer JavaScript-Teil verwendet das JavaScript Native Interface von GWT. Wenn es Ihnen seltsam vorkommt, können Sie mehr darüber lesen here.