Question

我正在制作一个使用Webview来显示本地HTML页面的JavaFX应用程序。将页面加载到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();
}

爪哇：

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事件发挥作用，我错过了什么？

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提出了一些建议：

您可以alert()包

WebConsoleListener.setDefaultListener

com.sun.javafx.webkit

确切地说，您应首先注册听众，然后您可以调用load()或play()
等函数
尽可能简化您的代码并逐一扩展

您还可以尝试使用MediaView或使用其他嵌入式浏览器组件替换WebView。例如，您可以使用JCEF（ Java Chromium Embedded Framework ）

JavaFx WebView视频：onended事件

1 个答案: