Header Ads Widget

Ticker

6/recent/ticker-posts

Imagen en imagen con JavaScript y Angular 10

 En este ejemplo rápido, aprenderemos a usar el modo Picture-in-Picture en JavaScript. A continuación, veremos cómo hacer un ejemplo del uso de esta nueva API web con Angular 10.

Picture-in-Picture (PiP) es una nueva característica en los navegadores modernos que permite a los usuarios ver videos en una ventana flotante que permanece siempre encima de otras ventanas.

Cómo comprobar si su navegador es compatible con Picture-in-Picture

Simplemente puede usar el document.pictureInPictureEnabledbooleano para verificar si Picture-in-Picture es compatible y está habilitado en su navegador web.


if ('pictureInPictureEnabled' in document) {

    if(document.pictureInPictureEnabled){
          console.log('Picture-in-Picture Web API is enabled');
    }

}
else{
  console.log('Picture-in-Picture Web API is not supported');
} 

Para la compatibilidad con Picture-in-Picture, verificamos si la pictureInPictureEnabledpropiedad existe en el objeto del documento y luego verificamos que la API web esté habilitada si es igual a verdadero.

Implementación de video Picture-in-Picture en JavaScript

Ahora, después de verificar que Picture-in-Picture es compatible y habilitado en su navegador web, veamos cómo implementar esta función en un ejemplo simple con JavaScript vanilla.

Cree un archivo HTML y agregue el siguiente código:

    <video id="videoElement" controls="true" src="<URL TO VIDEO>"> </video>
    <button id="btn"> Enable Picture in Picture </button>

A continuación, agregue una <script>etiqueta con el siguiente código:

<html>
  <head>
   <title>Picture-in-Picture Example</title>
  </head>
  <body>
    <video id="videoElement" controls="true" src="<URL TO VIDEO>"> </video>
    <button id="btn"> Enable Picture in Picture </button>

    <script>
        const videoElement = document.getElementById('videoElement');
        let startButton = document.getElementById('btn');

        startButton.addEventListener('click', startPiPMode);

        async function startPiPMode(event) {
            startButton.disabled = true; 

            try {
                if (videoElement !== document.pictureInPictureElement) {
                    await videoElement.requestPictureInPicture();
                    startButton.textContent = "Exit Picture In Picture";
                }
                else {
                    await document.exitPictureInPicture();
                    startButton.textContent = "Enable Picture In Picture";
                }
            } catch (error) {
                console.log(error);
            } finally {
                startButton.disabled = false;
            }
        }

    </script>
  </body>
</html>

Primero, agregamos una función de manejo de clics al botón en la que agregamos el código para verificar si ya tenemos un video reproduciéndose con Picture in Picture habilitado simplemente comparando el elemento DOM de video con document.pictureInPictureElementSi no se está reproduciendo ningún video, recurrimos requestPictureInPicture()al elemento de video para habilitar Picture in Picture, que devolverá una promesa.

Usamos la sintaxis Async / Await para evitar lidiar con la then()devolución de llamada

Si la promesa se resuelve o la función se devuelve en caso de async / await, el elemento de video se mueve a la esquina derecha de su pantalla con su video en reproducción.

Finalmente, cambiamos el botón para salir del modo Imagen en imagen usando el document.exitPictureInPicture()método.

Implementación de video Picture-in-Picture en TypeScript y Angular 10

Veamos ahora cómo implementar Picture-in-Picture con TypeScript y Angular 10.

Como requisito previo, debe tener Node.js y Angular CLI v10 instalados en su máquina de desarrollo local.

Creando un Proyecto Angular 10

Primero, cree un proyecto de Angular 10 usando el siguiente comando:

$ ng new Angular10PictureInPictureExample
$ cd Angular10PictureInPictureExample 

La CLI le hará un par de preguntas: ¿ Si desea agregar enrutamiento angular? Escriba y para Sí y ¿Qué formato de hoja de estilo le gustaría usar? Elija CSS .

A continuación, abra el src/app/app.component.htmlarchivo y actualícelo de la siguiente manera:

   <h1>
     Picture-in-Picture with Angular 10 Example
   </h1>
    <video #videoElement controls="true" src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"> </video>

A continuación, abra el src/app/app.component.tsarchivo y comience importando ViewChildElementRef:

import { Component, ViewChild, ElementRef } from '@angular/core';

A continuación, defina la siguiente interfaz:

interface VideoElement extends HTMLVideoElement {
  requestPictureInPicture(): any;
}

Entonces podemos acceder requestPictureInPicture()sin obtener el error de método indefinido ya que estamos usando TypeScript.

A continuación, busque el elemento de video a través de su variable de plantilla usando ViewChildlo siguiente:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild("videoElement") videoElement: ElementRef;

A continuación, llame al addEventListener()para escuchar el playevento en el elemento DOM de video (al que se accede desde la .nativeElementpropiedad) y luego llame al requestPictureInPicture()método para ingresar al modo Imagen en imagen de la siguiente manera:

  ngAfterViewInit(){
    const video:  VideoElement = this.videoElement.nativeElement;

    video.addEventListener('play', async (e) => {
      await video.requestPictureInPicture();
    })
  }

Este es el código del componente completo:

import { Component, ViewChild, ElementRef } from '@angular/core';

interface VideoElement extends HTMLVideoElement{
  requestPictureInPicture(): any;
}
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  @ViewChild("videoElement") videoElement: ElementRef;

  ngAfterViewInit(){
    const video:  VideoElement = this.videoElement.nativeElement;
    video.addEventListener('play', async (e) => {
      await video.requestPictureInPicture();
    })
  }

}

Este es el ejemplo en vivo en Stackblitz

Conclusión

En este ejemplo, hemos visto qué es Picture-in-Picture y cómo usarlo con JavaScript vanilla y dentro de una aplicación TypeScript Angular 10.

Publicar un comentario

0 Comentarios