在 Vaadin 上播放视频

Question

我正在我的 Vaadin 应用程序上播放 mp4 视频，但有几个问题：

想听听什么时候结束，这样我就可以关闭我用来显示它的 window。

到目前为止，这是我的代码：

    //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 with Vaadin's component extension 中的 JavaScript 解决方案。

您需要连接器 class，它添加了引用答案中提出的简单 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的包 class)

当事件发生时，使用 RPC 通知服务器：

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

最后一部分是在服务器端注册RPC并处理来电的扩展：

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。

Native JavaScript 部分使用 GWT 的 JavaScript Native Interface，如果你觉得奇怪，你可以阅读更多相关内容 here.

在 Vaadin 上播放视频

Playing Video on Vaadin

video

vaadin7