Using HTML5 video tag in a javafx application


Question

I have a simple javaFX application that loads a webpage in a WebView componant.

StackPane root = new StackPane();
Scene scene = new Scene(root, 80, 20);
browser = new WebView();
webEngine = browser.getEngine();

webEngine.load("test.html");
root.getChildren().add(browser);
jfxPanel.setScene(scene);

This works fine and test.html can be seen. The issue is with the HTML5 video on the page.

<video width="320" height="240" controls="controls">
    <source src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" type="video/ogg" />
    Your browser does not support the video tag.
</video>

The page works in Chrome 16, but in the java application you can only see the controls and clicking play does nothing. I assume the WebEngine allows HTML5 as the controls appear and the text inside the <video></video> tags isn't output.

Can anyone shed some light on what I doing wrong?

1
3
1/19/2012 12:58:59 PM

Accepted Answer

You are encountering a codec issue.

From the JavaFX FAQ question 7, JavaFX (as of 2.0.2) only supports flv videos encoded using the on2 vp6 codec.

Additional codec support is scheduled for future releases. The relevant feature request is RT-18296 (login required, but anybody can sign up to view the JavaFX issue database and create feature requests, vote for issues or post comments).

A related StackOverflow question provides a summary of considerations for playing video in JavaFX 2.1 (including a JavaFX WebView).

To demonstrate a html5 video tag and video playback within a JavaFX WebEngine, run the following code, which plays an Oracle supplied vp6 encoded video.

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class WebViewVideo extends Application {
  public static void main(String[] args) { Application.launch(args); }
  @Override public void start(Stage primaryStage) {
    WebView root = new WebView();
    root.getEngine().loadContent(
      "<video width='320' height='240'controls='controls'>" +
        "<source src='http://download.oracle.com/otndocs/products/javafx/oow2010-2.flv'/>" + 
        "Your browser does not support the video tag." + 
      "</video>");
    primaryStage.setScene(new Scene(root, 340, 260));
    primaryStage.show();
  }
}
7
5/23/2017 12:29:05 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon