javascript - JavaFx WebView 视频 : onended event

Question

我正在制作一个使用 Webview 的 JavaFX 应用程序显示本地 HTML 页面。将页面加载到 Webview 后，通过调用 JavaScript 函数显示初始视频 open() .该函数附加一个 onended <video> 的事件监听器元素。不幸的是，我无法获得 onended事件触发，尽管 playing事件确实如此。

Javascript:

function open()
{
    //set position
    pos = 0;
    //display the black, add video, play.
    var video = document.getElementById('vid');
    video.style.display = "block";
    video.setAttribute('src', breakout);
    video.load();
    video.play();

    //video.addEventListener("playing", clear, false);
    video.addEventListener("ended", clear, false); 
}

function clear()
{
    alert("clear"); //was the method called? 
    //clear anything that was displayed.
    document.getElementById('vid').style.display = "none";
    document.getElementById('vid').setAttribute('src', "");
    document.getElementById('image').style.display = "none";
    document.getElementById('image').setAttribute('src', "");
    //get next.
    change();
}

Java:

public class WebviewController
{

    @FXML
    private WebView webView;
    private WebEngine engine;
    private State state;

    @FXML
    public void initialize()
    {
        engine = webView.getEngine();
        engine.setJavaScriptEnabled(true);
        engine.setOnAlert(new EventHandler<WebEvent<String>>()
        {
            @Override
            public void handle(WebEvent<String> event)
            {
                Dialog<Void> alert = new Dialog<>();
                alert.getDialogPane().setContentText(event.getData());
                alert.getDialogPane().getButtonTypes().add(ButtonType.OK);
                alert.showAndWait();
            }
        });
        engine.load(getClass().getResource("/web/newhtml.html").t‌​oExternalForm());
        afterLoad();
    }

    public void afterLoad()
    {
        engine.getLoadWorker().stateProperty().addListener(
                new ChangeListener<Worker.State>()
        {
            @Override
            public void changed(ObservableValue ov, Worker.State oldState, Worker.State newState)
            {
                if (newState == Worker.State.SUCCEEDED)
                {
                    breakout();
                }
            }
        });
    }

    public void breakout()
    {
        engine.executeScript("open()");
    }
}

HTML:

<div class="col-8">
     <div class="slideshow">
            <video id="vid" src=""></video>
            <img id="image" src='' alt="" />
      </div>
</div>

我试过添加 onended="clear()"到视频元素，看看它是否是 JavaScript 的问题 Open()方法，这个没有用。我也试过发射 playing事件(如评论)，有效。所以这似乎是 onended 的问题事件触发器。

我缺少什么才能得到 onended Activity 上类？

Answer 1

您可能遇到了 WebView 的错误。实际上，这是一个有点原始的实用程序。例如，我无法播放 Big Back Bunny视频，但我在 JDK 1.8.0_121 上用另一个视频运行了一个简单的测试并且它有效:

public class VideoTest extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        WebConsoleListener.setDefaultListener((webView, message, lineNumber, sourceId) -> {
            System.out.println(message + "[at " + lineNumber + "]");
        });

        WebView webView = new WebView();
        WebEngine engine = webView.getEngine();
        engine.setJavaScriptEnabled(true);

        StringBuilder codeBuilder = new StringBuilder("<video id='test' src='http://techslides.com/demos/sample-videos/small.mp4' width='200' height='200' controls></video>");
        codeBuilder.append("<script>");
        codeBuilder.append("document.querySelector('#test').addEventListener('playing', function(e) { console.log('playing'); }, false);");
        codeBuilder.append("document.querySelector('#test').addEventListener('ended', function(e) { console.log('ended'); }, false);");
        codeBuilder.append("document.querySelector('#test').load();");
        codeBuilder.append("document.querySelector('#test').play();");
        codeBuilder.append("</script>");
        engine.loadContent(codeBuilder.toString());

        Scene scene = new Scene(webView, 600, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

无论如何，我有一些关于如何使用 WebView 的建议:

• 您可以通过 com.sun.javafx.webkit 中的 WebConsoleListener.setDefaultListener 打印到控制台，而不是 alert()包

• 尽量准确，你应该先注册监听器，然后你可以调用像load()或play()

  这样的函数。<

• 使您的代码尽可能简单并逐段扩展

您也可以尝试将 WebView 替换为 MediaView或使用其他嵌入式浏览器组件。例如，您可以使用 JCEF (Java Chromium 嵌入式框架)