Vaadin应用中通过EventListener获取currentTime返回null的解决方法

问题原因 #

HTML <video> 元素的 currentTime 是客户端动态属性，Vaadin默认不会自动将这类实时变化的属性同步到服务器端。直接调用 getProperty("currentTime") 会因为服务器端没有缓存该属性值而返回null。

解决方案 #

有两种可靠的方式获取当前播放时间：

1. 监听事件时同步传递currentTime数据 #

通过addEventListener的重载方法，指定在触发timeupdate事件时，让客户端把currentTime作为事件数据一起发送到服务器：

@Tag("video")
public class Video extends Component implements ClickNotifier<Video> {
    public Video() {
        getElement().addEventListener("timeupdate", event -> {
            // 从事件数据中解析currentTime
            Double currentTime = event.getEventData().getNumber("event.target.currentTime");
            System.out.println("当前播放时间：" + currentTime);
        // 声明需要传递的客户端数据
        }).addEventData("event.target.currentTime");
    }
}

2. 主动调用JS获取实时currentTime #

通过executeJs方法异步从客户端获取最新的currentTime值：

@Tag("video")
public class Video extends Component implements ClickNotifier<Video> {
    public Video() {
        getElement().addEventListener("timeupdate", event -> {
            // 执行JS获取当前播放时间，异步处理结果
            getElement().executeJs("return this.currentTime;")
                .then(Double.class, currentTime -> {
                    System.out.println("当前播放时间：" + currentTime);
                });
        });
    }
}

内容的提问来源于stack exchange，提问作者Vincent