JavaFX in RPi 〜HTMLをロードする〜

今回は作成したHTMLファイルをJavaFXでロードします。
前回URLをロードしてみた結果、表示したくない部分も画面に出てきたのでそれをなくします。

問題と解決策

早い話が、HTMLにiframeを使用して動画部分のみを表示しようというところです。
下の画像がJavaFXでロードした結果です。

HTMLをロードする

JavaFXでHTMLをロードするのはとても簡単でした。
<ロードした結果>

<ロードしたHTML>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <iframe width="560" height="315"
         src="https://www.youtube.com/embed/S0LbTzCrkiw"
         frameborder="0"
         allow="accelerometer;
         autoplay;
         encrypted-media;
         gyroscope;
         picture-in-picture"
         allowfullscreen>
    </iframe>
</body>

</html>

<Javaコード>

public void start(Stage primaryStage) {
    try {
        // レイアウト(土台)になるペインを作成
        BorderPane root = new BorderPane();

        // WebView(ブラウザ)の作成
        WebView browser = new WebView();
        WebEngine engine = browser.getEngine();
        String aaa = getClass().getResource("iframe.html").toExternalForm();
        System.out.println(aaa);
        engine.load(aaa);

        root.setCenter(browser);
        // 画面を表示する土台(シーン)を作成
        Scene scene = new Scene(root,this.windowWidth,this.windowHeight);
        // JavaFX用のCSSを読み込む
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.setOnCloseRequest(event -> Platform.exit());
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

今回の課題

ロードしたHTMLファイルのプロパティ(画面サイズや、そのほかのコントロール)を操作したい

上の要件を満たすために、通常のHTML + JSで実装するのであれば、シンプルにHTMLファイルに全部記述してしまうのが手っ取り早く、メンテナンス性も優れています。

というわけで、Youtubeを単純に全画面表示する場合は下のようなHTMLファイルを作成してやればOKな感じでした。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body width="100%" height="100%">
    <iframe style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%"
         src="https://www.youtube.com/embed/S0LbTzCrkiw"
         frameborder="0"
         allow="accelerometer;
         autoplay;
         encrypted-media;
         gyroscope;
         picture-in-picture"
         allowfullscreen>
    </iframe>
</body>

</html>

しかし、自動再生が走らないのでちょいといじります。
iframeタグのsrcにautoplay=1を、allow属性にallow="accelerometer"を追加しました。HTMLを直接開いた場合は自動再生が始まらなかったのですが、JavaFXでロードしたら自動再生が始まりました。

ちょっと腑に落ちませんが、まぁよしとします(笑)

作成したコードはこちらにアップしてあります。

でわでわ。。。