[RESOLVIDO] Executar vídeo youtube dentro Jframe ou HTML

25 de março de 2019 14 respostas

JoaoP1 25 de março de 2019

Boa tarde,

Estou usando netbeans em uma plataforma desktop. Tenho alguns tutoriais no youtube e quando meu usuário clicar em assistir gostaria que ao invés de abrir o navegador ele executasse o vídeo do youtube dentro do meu Jframe ou similar.

Vi alguns tutorais usando JWF, porém eu não tenho o vídeo no meu servidor ele já se encontra no youtube. Nesse caso era só executar mesmo o tutorial em uma janela do tamanho que eu definir.

1 - Ele clica no botão assistir tutorial
2 - Abre uma tela com o video ( Onde eu previamente inseri o link do youtube referente aquela tarefa, dentro do botão que ele clicou)
3 - O usuário só vai assistir.

Alguém pode dar uma direção? Teria algum vídeo? Algum codigo?

Obrigado

14 Respostas

JoaoP1 26 de mar. de 2019

Bom dia Abner,

Primeiramente ótimo vídeo e obrigado pelo interesse em me ajudar,

Nesse seu exemplo você abre uma página web completa, e no meu caso eu só precisaria abrir o vídeo, sem abrir todo a página web como um navegador. Entende?

Eu só gostaria de abrir o vídeo mesmo, só o quadrinho no tamanho que eu definir.

att

FearX 26 de mar. de 2019 1 like

Adicione o embed do vídeo na sua tela. Menor dor de cabeça que você terá.

Isso aqui pode te ajudar:

public class YouTubeViewer {

public static void main(String[] args) {
    NativeInterface.open();
    SwingUtilities.invokeLater(new Runnable() {
        public void run() {
            JFrame frame = new JFrame("YouTube Viewer");
            frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
            frame.getContentPane().add(getBrowserPanel(), BorderLayout.CENTER);
            frame.setSize(800, 600);
            frame.setLocationByPlatform(true);
            frame.setVisible(true);
        }
    });
    NativeInterface.runEventPump();
    // don't forget to properly close native components
    Runtime.getRuntime().addShutdownHook(new Thread(new Runnable() {
        @Override
        public void run() {
            NativeInterface.close();
        }
    }));
}

public static JPanel getBrowserPanel() {
    JPanel webBrowserPanel = new JPanel(new BorderLayout());
    JWebBrowser webBrowser = new JWebBrowser();
    webBrowserPanel.add(webBrowser, BorderLayout.CENTER);
    webBrowser.setBarsVisible(false);
    webBrowser.navigate("https://www.youtube.com/v/b-Cr0EWwaTk?fs=1");
    return webBrowserPanel;
}
}

referência do código.

rodriguesabner 26 de mar. de 2019 1 like

Cria um arquivo HTML e ao invés de rodar um site, roda o arquivo:

<!DOCTYPE html> 
<html> 
<body> 

<video width="400" controls>
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

</body> 
</html>

https://www.w3schools.com/html/html5_video.asp

JoaoP1 29 de mar. de 2019 1 like

Estou tentando esse embed, existe uma biblioteca privada que tem que fazer algumas importações.

usando esse vídeo de referencia:

Referente ao HTML não entendi.

rodriguesabner 30 de mar. de 2019 1 like

É bem simples, cria um arquivo .html assim e salva:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Teste Video</title>
</head>
<body>
	<div class="videoContainer">
		<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/4WtpFjzTSgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>

	<style type="text/css">
		.videoContainer {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		iframe {
			/* optional */
			width: 100%;
			height: 100%; 
		}
	</style>
</body>
</html>

E lá no Java, ao invés de você chamar um site, por exemplo: "http://www.guj.com.br", você vai chamar o arquivo que você criou, exemplo: "C:\\arquivos\\video.html".

Entendeu?

JoaoP1 31 de mar. de 2019

Legal! Obrigado Abner,

Agora me tira uma dúvida o SRC já está na minha tabela no banco precisava apenas parametrizar ele.

Teria alguma forma ou teria que digitar tudo na mão?

rodriguesabner 31 de mar. de 2019

Por nada!

Você quer clicar na tabela e já pegar o src né?

JoaoP1 31 de mar. de 2019

Isso, esse src (link do video) ja encontra na minha tabela do banco de dados.

Quando o usuario clica em uma tabela de produtos, ele trás todo o descritivo do item e um vídeo. Esse descritivo está online no meu banco Mysql junto com o link do vídeo.

Nesse caso eu precisava substituir.

rodriguesabner 31 de mar. de 2019

Quando você clicar na tabela, é só alterar a String idVideo, método:

public void webViewPadrao(String idVideo) {
        JFXPanel jfxPanel = new JFXPanel();

        JFrame open = new JFrame();
        open.setTitle("Visualizador de Vídeo");
        open.setSize(800, 600);
        open.setLocationRelativeTo(null);
        open.add(jfxPanel, BorderLayout.CENTER);
        open.setVisible(true);

        Platform.runLater(() -> {
            WebView webView = new WebView();
            WebEngine webEngine = webView.getEngine();

            webEngine.reload();

            jfxPanel.setScene(new Scene(webView));

            webEngine.setJavaScriptEnabled(true);

            webEngine.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36");
            webEngine.loadContent("<!DOCTYPE html>\n"
                    + "<html>\n"
                    + "<head>\n"
                    + "	<meta charset=\"utf-8\">\n"
                    + "	<title>Visualizador de Vídeo - Funcionando</title>\n"
                    + "</head>\n"
                    + "<body>\n"
                    + "	<div class=\"videoContainer\">\n"
                    + "		<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/" + idVideo + "\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n"
                    + "	</div>\n"
                    + "\n"
                    + "	<style type=\"text/css\">\n"
                    + "		.videoContainer {\n"
                    + "			position: absolute;\n"
                    + "			width: 100%;\n"
                    + "			height: 100%;\n"
                    + "			top: 0;\n"
                    + "			left: 0;\n"
                    + "			bottom: 0;\n"
                    + "			right: 0;\n"
                    + "			display: flex;\n"
                    + "			flex-direction: column;\n"
                    + "			justify-content: center;\n"
                    + "			align-items: center;\n"
                    + "		}\n"
                    + "\n"
                    + "		iframe {\n"
                    + "			/* optional */\n"
                    + "			width: 100%;\n"
                    + "			height: 100%; \n"
                    + "		}\n"
                    + "	</style>\n"
                    + "</body>\n"
                    + "</html>");

            //Get the site title
            webEngine.titleProperty().addListener(new ChangeListener<String>() {
                @Override
                public void changed(ObservableValue<? extends String> ov,
                        final String oldvalue, final String newvalue) {
                    open.setTitle(newvalue);
                }
            });
        });
    }

Na hora de chamar o método é só passar o ID do vídeo, exemplo:

webViewPadrao("lJTRVX9R5EA");

EDIT:

Cada vídeo tem um ID,

https://www.youtube.com/watch?v=RubBzkZzpUA. O id desse é: RubBzkZzpUA
https://www.youtube.com/watch?v=xJubVipcHrM. O id desse é: xJubVipcHrM
https://www.youtube.com/watch?v=lJTRVX9R5EA. O id desse é: lJTRVX9R5EA

Aí no método é só pegar esse ID e ser feliz, deu pra entender?

JoaoP1 31 de mar. de 2019

Boa Abner, funcionou sim.

Estou com dois problemas e antes de perguntar eu tentei algumas coisas. Até fiz uma tela a parte para testar.

1 - O primeiro é o mais grave, mesmo eu fechando Jframe ele continua executando o vídeo.

Como na minha base tem o link completo, tentei algo sem precisar de tratamento.

https://www.youtube.com/watch?v= (32 caracteres)
https://youtu.be/ (17 caracteres)

src="" + idVideo (tentei isso mais não funcionou, só passando o ID). Mais tranquilo eu faço um tratamento com substring ou algo do tipo e resolvo isso.

Eu tentei fazer ele abrir internamente dentro da minha tela e não consegui, usei um Jframe e um Jpane Teria a possibilidade? Seria de extrema ajuda

mesmo alterando essa parte do codigo:

JFrame open = new JFrame();

Agradeço demais a sua ajuda!!!

rodriguesabner 31 de mar. de 2019

Adiciona um evento de WindowClosing:

open.addWindowListener(new WindowAdapter() {
            @Override
            public void windowClosing(WindowEvent e) {
                    Platform.runLater(() -> {
                        webEngine.load(null);
                    }
                    );
            }
        });

Cara, eu fiz um teste aqui e funcionou tranquilo com um JPanel, ao invés de JFrame eu apenas indiquei qual jPanel seria usado. Como eu uso o Layout Absoluto, ficou desse jeito:

//        JFrame open = new JFrame();
//        open.setTitle("Visualizador de Vídeo");
//        open.setSize(800, 600);
//        open.setLocationRelativeTo(null);
//        open.add(jfxPanel, BorderLayout.CENTER);
//        open.setVisible(true);
        jPanel2.add(jfxPanel, new org.netbeans.lib.awtextra.AbsoluteConstraints(0, 0, 690, 440));
        jPanel2.repaint();

Ficou assim:

JoaoP1 31 de mar. de 2019

Funcionou quando fecho o vídeo ele para com o novo codigo (deu certo)

Quando fui fazer o video abrir no Jpanel:

1 - Ele parou de funcionar quando substitui o open por um jpanel. Fiz igual ao seu código.
Quando eu setei o Jpanel1, ele não me informa nenhum erro porém não funciona mais e o jpanel1 não executa nada.

jPanel1.add(jfxPanel, new org.netbeans.lib.awtextra.AbsoluteConstraints(0, 0, 690, 440));
jPanel1.repaint();

2- Essa parte do windows close parou de funcionar porque substitui o open pelo Jpanel1. Como não tenho mais instancia do open eu até mudei mais não funcionou.

antes
open.addWindowListener(new WindowAdapter()

depois
jPanel1.addWindowListener(new WindowAdapter()

public void webViewPadrao(String idVideo) {
        JFXPanel jfxPanel = new JFXPanel();
//JFrame open = new JFrame();
           // open.setTitle("Visualizador de Vídeo");
        //open.setSize(800, 600);
        //open.setLocationRelativeTo(null);
        //open.add(jfxPanel, BorderLayout.CENTER);
        //open.setVisible(true);
        
        jPanel1.add(jfxPanel, new org.netbeans.lib.awtextra.AbsoluteConstraints(0, 0, 690, 440));
        jPanel1.repaint();

        Platform.runLater(() -> {
            WebView webView = new WebView();
            WebEngine webEngine = webView.getEngine();

            webEngine.reload();

            jfxPanel.setScene(new Scene(webView));

            webEngine.setJavaScriptEnabled(true);

            webEngine.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36");
            webEngine.loadContent("<!DOCTYPE html>\n"
                    + "<html>\n"
                    + "<head>\n"
                    + "	<meta charset=\"utf-8\">\n"
                    + "	<title>Visualizador de Vídeo - Funcionando</title>\n"
                    + "</head>\n"
                    + "<body>\n"
                    + "	<div class=\"videoContainer\">\n"
                    + "		<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/"+ idVideo + "\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n"
                    + "	</div>\n"
                    + "\n"
                    + "	<style type=\"text/css\">\n"
                    + "		.videoContainer {\n"
                    + "			position: absolute;\n"
                    + "			width: 100%;\n"
                    + "			height: 100%;\n"
                    + "			top: 0;\n"
                    + "			left: 0;\n"
                    + "			bottom: 0;\n"
                    + "			right: 0;\n"
                    + "			display: flex;\n"
                    + "			flex-direction: column;\n"
                    + "			justify-content: center;\n"
                    + "			align-items: center;\n"
                    + "		}\n"
                    + "\n"
                    + "		iframe {\n"
                    + "			/* optional */\n"
                    + "			width: 100%;\n"
                    + "			height: 100%; \n"
                    + "		}\n"
                    + "	</style>\n"
                    + "</body>\n"
                    + "</html>");

            //Get the site title
            webEngine.titleProperty().addListener(new ChangeListener<String>() {
                @Override
                public void changed(ObservableValue<? extends String> ov,
                        final String oldvalue, final String newvalue) {
                   
                }
            });

>       **jPanel1**.addWindowListener(new WindowAdapter() {

@Override
            public void windowClosing(WindowEvent e) {
                    Platform.runLater(() -> {
                        webEngine.load(null);
                    }
                    );
            }
        });

rodriguesabner 31 de mar. de 2019

Se você for usar um JPanel não precisa do evento de windowClosing.

Sobre o JPanel, o seu está com o Layout Absoluto também? Se não estiver, vc precisa colocar de acordo como está.

JoaoP1 31 de mar. de 2019 1 like

Estava usando nulo, tudo funcionando.

Sou extremamente grato pela sua ajuda!

Obrigado de coração!

Criado 25 de março de 2019

Ultima resposta 31 de mar. de 2019

Respostas 14

Participantes 3

14 Respostas

referência do código.

Topicos relacionados