播放視頻上Vaadin

Question

我打我的Vaadin應用的MP4視頻，但有幾個問題：

• 想聽聽何時結束，所以我可以關閉我曾經將其顯示在窗口中。

這裏是我到目前爲止的代碼：

//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(); 

可悲的是我無法找到此組件上多的信息。任何想法？

Answer 1

您可以使用來自this answer的JavaScript解決方案與Vaadin的component extension。

您需要連接器類，增加了中引用答案提出的簡單的JS事件偵聽器：

@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); 

    }-*/; 
} 

（您需要更改your.package到包含VideoEndedConnector類的包）

當事件發生時，服務器通知使用RPC：

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

最後一部分是在服務器sid上註冊RPC的擴展e和處理來電：

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); 
     } 
    } 
} 

你可以用你Video組件使用它：

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"); 
    } 
}); 

如果您想了解更多關於Vaadin的擴展檢查this guide。

原生JavaScript部分使用GWT的JavaScript Native Interface，如果它看起來很奇怪，你可以閱讀更多關於here。