今回は作成した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でロードしたら自動再生が始まりました。
ちょっと腑に落ちませんが、まぁよしとします(笑)
作成したコードはこちらにアップしてあります。
でわでわ。。。
