Vídeos Picture-in-Picture com JavaScript \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 14 Horas 10 Min 40 Seg Tempo restante da oferta: 14 10 40 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Vídeos Picture-in-Picture com JavaScript [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # Vídeos Picture-in-Picture com JavaScript Aprenda a usar a API de Picture-in-Picture do HTML5 para exibir vídeos fora do navegador com JavaScript [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/11/12071059/browser-pip.png) Olá Web Developers! Hoje vamos ver como permitir o usuário assistir a um vídeo da sua página web fora do navegador. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## O que é PIP? Picture-in-Picture (PIP), também conhecida aqui como Imagem sobre Imagem, é quando temos a imagem de uma tela sendo exibida em cima de outra imagem. Um exemplo são monitores para computador que também possuem funcionalidade de TV. Com PIP você pode trabalhar e ao mesmo tempo deixar a imagem da TV no canto da tela. ![Monitor - TV - PIP](https://dkrn4sk0rn31v.cloudfront.net/2019/11/12081604/158a.jpg) ## PIP no HTML5 A API de Picture-in-Picture permite que páginas da web peguem um vídeo qualquer presente em seu corpo e o exiba em uma pequena janela flutuante que ficará sempre em cima das outras janelas. Assim o usuário poderá continuar assistindo enquanto faz outras tarefas. Na imagem abaixo estamos com um vídeo comum no YouTube: ![](https://dkrn4sk0rn31v.cloudfront.net/2019/11/12082629/YouTube-V%C3%ADdeo.png) Ao ativar o PIP o vídeo passa a ser reproduzido em uma janela flutuante que você pode mover e redimensionar. Mesmo que você abra outras janelas, o vídeo continua em cima de todas as outras janelas. ![](https://dkrn4sk0rn31v.cloudfront.net/2019/11/12082626/YouTube-PIP.png) Na imagem abaixo vemos um exemplo de navegação em nosso blog enquanto o vídeo do YouTube permanece visível. Claro que você pode minimizar as janelas do navegador e abrir qualquer outro programa. ![](https://dkrn4sk0rn31v.cloudfront.net/2019/11/12082628/Blog-PIP.png) Esta funcionalidade está sendo adotada também em smartphones, o que nos permite continuar assistindo a um vídeo do navegador enquanto utilizamos outros aplicativos. ## Como iniciar o PIP? Para iniciar o Picture-in-Picture é necessário acessar o elemento HTML `` que está com o vídeo que você quer que flutue. Imagine que a gente tenha o seguinte HTML: ```html Picture in Picture ``` Criamos um botão para iniciar o PIP e adicionamos um vídeo. Agora basta pegar o elemento `` e executar o método `.requestPictureInPicture()`. Este método retorna uma Promise. ```js async function iniciarPIP(){ const video = document.querySelector('#meu-video'); await video.requestPictureInPicture(); } ``` Você pode ver o resultado abaixo: - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #API ](https://www.treinaweb.com.br/blog/tag/api) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #Vídeos ](https://www.treinaweb.com.br/blog/tag/videos) - [ #Vídeo Flutuante ](https://www.treinaweb.com.br/blog/tag/video-flutuante) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/dicas-de-como-estudar-programacao-400x280.png) [ Estudos ](https://www.treinaweb.com.br/blog/categoria/estudos) 6 anos atrás ## [ Dicas de como estudar programação ](https://www.treinaweb.com.br/blog/dicas-de-como-estudar-programacao) Confira neste artigo algumas dicas de como estudar programação com foco na prática. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/12/14174401/capa-BI-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 7 anos atrás ## [ Business Intelligence (BI): o que é e para que serve? ](https://www.treinaweb.com.br/blog/business-intelligence-bi-o-que-e-e-para-que-serve) Confira neste artigo como o BI pode trazer benefícios para as empresas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/como-fazer-animacoes-infinitas-de-fundo-com-css-puro-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 6 anos atrás ## [ Como fazer animação infinita de fundo com CSS? ](https://www.treinaweb.com.br/blog/como-fazer-animacao-infinita-de-fundo-com-css) Veja como criar uma animação infinita de fundo com efeito parallax usando apenas CSS puro. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/06145840/GANHOS-RECORRENTES-400x280.png) [ Design ](https://www.treinaweb.com.br/blog/categoria/design) 8 anos atrás ## [ Como ter ganhos recorrentes sendo um profissional freelancer ](https://www.treinaweb.com.br/blog/como-ter-ganhos-recorrentes-sendo-um-profissional-freelancer) Neste artigo, convido você a explorar 6 possibilidades de ganhos que vão além daquelas que já conhecemos e que irão te render uma graninha todo mês. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/06113120/advergames-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 8 anos atrás ## [ O que são Advergames? Conheça a união de jogos e marketing ](https://www.treinaweb.com.br/blog/o-que-sao-advergames-conheca-a-uniao-de-jogos-e-marketing) Entenda o que são Advergames e suas vantagens. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/05145511/444-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 8 anos atrás ## [ Barra de progresso que muda de tamanho e cor com apenas uma variável do CSS ](https://www.treinaweb.com.br/blog/barra-de-progresso-que-muda-de-tamanho-e-cor-com-apenas-uma-variavel-do-css) Veremos como aproveitar variáveis do CSS para criar uma barra de progresso bem simples e controlar sua largura e cor usando apenas uma variável. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/16095951/project-stream-400x280.png) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 8 anos atrás ## [ Project Stream: Netflix de jogos da Google ](https://www.treinaweb.com.br/blog/project-stream-netflix-de-jogos-da-google) Veja neste artigo o que é o Project Stream da Google, a Netflix dos jogos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/29143419/TW-ENTREVISTAS-FELIPE-MOURA-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 9 anos atrás ## [ TW Entrevista 02: Felipe Moura ](https://www.treinaweb.com.br/blog/tw-entrevista-02-felipe-moura) Fizemos uma série de entrevistas com desenvolvedores chamada “TW Entrevista”. O entrevistado de hoje é o Felipe Moura, co-fundador da Nasc e da maior conferência de JavaScript do mundo, a BrazilJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/08/capa-acessibilidade-400x280.png) [ Acessibilidade e User Experience (UX) ](https://www.treinaweb.com.br/blog/categoria/acessibilidade-e-user-experience-ux) 2 anos atrás ## [ UX Inclusivo: A importância da acessibilidade no design ](https://www.treinaweb.com.br/blog/ux-inclusivo-a-importancia-da-acessibilidade-no-design) Confira a importância de tornar suas aplicações móveis acessíveis para todos, garantindo inclusão social, maior alcance e conformidade legal. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/O-QUE-E-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html) No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/ideias-projetos-mobile-min-400x280.png) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 4 anos atrás ## [ Ideias de projetos para praticar - mobile ](https://www.treinaweb.com.br/blog/ideias-de-projetos-para-praticar-mobile) Para finalizar a série de ideias de projetos para praticar, trazemos neste artigo a versão para os estudantes de mobile. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ O que é NestJS? ](https://www.treinaweb.com.br/blog/o-que-e-nestjs) Vamos ver neste artigo uma breve descrição sobre o que é o NestJS e como criar uma aplicação base em minutos. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **14h 10min 40s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58