Google AMP amp-3q-reproductor

Introducción: 3Q Player es un reproductor de video escrito en JavaScript. El reproductor implementa extensiones de fuente de medios para transmitir contenido de video. En AMP HTML para incrustar un reproductor 3Q, usamos un componente amp-3q-player . 3q-player tiene muchas características como grabación en la nube, transmisión de video, transmisión por Internet, etc.

Sitio oficial: https://3q.video/en/

Script requerido: importar amp-3q-player al encabezado.

<script async custom-element="amp-3q-player" src=
"https://cdn.ampproject.org/v0/amp-3q-player-0.1.js">
</script>

Atributos:

data-id: es la identificación de video de un reproductor 3Q que se requiere para incrustar un reproductor 3Q en una página AMP.
reproducción automática: si el atributo de reproducción automática está presente, el video comenzará a reproducirse tan pronto como se cargue.

Ejemplo: para incrustar un reproductor 3q, se debe tomar la identificación de datos del video para tomar la identificación de datos.

ir al video
Haz clic derecho en el vídeo
Haga clic en Mostrar información de depuración y copie el código resaltado

Pegue la identificación en la identificación del video de la etiqueta amp-3q-player

<!DOCTYPE html>
<html amp>
  
<head>
    <meta charset="utf-8" />
    <title>geeksforgeeks amp-3q-player</title>
  
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
  
    <script async custom-element="amp-3q-player"
src="https://cdn.ampproject.org/v0/amp-3q-player-0.1.js">
    </script>
  
    <!-- Import the `amp-ad` component in the header. -->
    <script async custom-element="amp-ad" 
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js">
    </script>
  
    <link rel="canonical" href=
"https://amp.dev/documentation/components/amp-3q-player/?format=websites" />
  
    <meta name="viewport" content="width=device-width,
                       minimum-scale=1,
                       initial-scale=1" />
  
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
  
            -moz-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
             
            -ms-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
             
            animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
        }
  
        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden;
            }
  
            to {
                visibility: visible;
            }
        }
  
        @-moz-keyframes -amp-start {
            from {
                visibility: hidden;
            }
  
            to {
                visibility: visible;
            }
        }
  
        @-ms-keyframes -amp-start {
            from {
                visibility: hidden;
            }
  
            to {
                visibility: visible;
            }
        }
  
        @-o-keyframes -amp-start {
            from {
                visibility: hidden;
            }
  
            to {
                visibility: visible;
            }
        }
  
        @keyframes -amp-start {
            from {
                visibility: hidden;
            }
  
            to {
                visibility: visible;
            }
        }
    </style>
  
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none;
            }
        </style>
    </noscript>
</head>
  
<body>
    <amp-3q-player data-id=
        "7201c779-6b3c-11e7-ae0e-002590c750be" 
        layout="responsive" width="400" 
        height="400">
    </amp-3q-player>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta