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

JoaoP1 · Março 25, 2019, 11:36pm

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

JoaoP1 · Março 26, 2019, 11:42am

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 · Março 26, 2019, 1:29pm

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 · Março 26, 2019, 1:57pm

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 · Março 29, 2019, 1:41am

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 · Março 30, 2019, 9:46pm

É 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 · Março 31, 2019, 12:59am

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 · Março 31, 2019, 1:00am

Por nada!

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

JoaoP1 · Março 31, 2019, 1:27am

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 · Março 31, 2019, 2:02am

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 · Março 31, 2019, 3:23am

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 · Março 31, 2019, 4:23am

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 · Março 31, 2019, 5:19am

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 · Março 31, 2019, 2:47pm

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 · Março 31, 2019, 9:12pm

Estava usando nulo, tudo funcionando.

Sou extremamente grato pela sua ajuda!

Obrigado de coração!

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

referência do código.

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI