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