Incrustando el reproductor de vídeo de WS.WebTV en una página AMP HTML

Tutoriales, documentos técnicos y descargas

AMP HTML

Rev. Mar. 9, 2016

Descripción:

Intrucciones para incrustar el reproductor de vídeo de WS.WebTV en una página AMP HTML

Imprimir

¿Qué es AMP HTML?

AMP quiere decir, por sus siglas en inglés, "Accelerated Mobile Page" (Página Móvil Acelerada). Es un proyecto de Google diseñado para hacer páginas móviles rápidas de visualizar; es básicamente una forma de HTML reducida.
Para más información sobre AMP, visite https://github.com/ampproject/amphtml.

Aquí no vamos a explicar cómo crear páginas AMP, nos centraremos exclusivamente en cómo incrustar el reproductor de vídeo de WS.WebTV. Si desea aprender a crear páginas AMP, visite
https://github.com/ampproject/amphtml/blob/master/docs/create_page.md

Incrustando el reproductor de vídeo de WS.WebTV / Ejemplo de Implementación

Como las páginas AMP HTML utilizan un conjunto especial de etiquetas HTML, no puede usar el código embed estándar para incrustar el reproductor de vídeo en una página AMP; en su lugar, necesita utilizar la etiqueta especial <amp-iframe> tal como mostramos en los ejemplos a continuación.

URL de ejemplo: https://webtvsolutions.s3.amazonaws.com/amp-demo-es.html

Notas de implementación
1 - Su WebTV debe usar HTTPS
2 - Su página AMP debe tener el "custom-element" "amp-iframe" definido en el encabezado:

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

3 - La fuente (src) del amp-iframe debe ser https://url-de-la-webtv/embed.php?id=id_clip&w=1&h=1
4 - Para la imagen "placeholder" utilice la URL del poster del Clip (puede obtenerla del Administrador de Contenidos, editando el Clip).

Código de ejemplo para incrustar el reproductor de vídeo con un tamaño fijo de 400x225:

    <div id="videoPlayer" style="width:400px; height:225px; margin: auto auto;">
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-es/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-es/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
    </amp-iframe>
    </div>

Código de ejemplo para incrustar el reproductor de vídeo con un tamaño variable (reescalable/responsive):

    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      resizable
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-es/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-es/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
        <div overflow tabindex=0 role=button aria-label="Watch more" style="display:none;">Watch more!</div>
    </amp-iframe>

Poniéndolo todo junto...

<!doctype html>
  <html amp lang="es">
    <head>
      <meta charset="utf-8">
      <title>WS.WebTV video player in AMP page demo</title>
      <link rel="canonical" href="https://webtvsolutions.s3.amazonaws.com/amp-demo-en.html">
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">
      <script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" async></script>
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    </head>
    <body>

    <h1>WS.WebTV video player in AMP page demo</h1>
    
    <h3>Fixed size</h3>
    <div id="videoPlayer" style="width:400px; height:225px; margin: auto auto;">
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-es/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-es/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
    </amp-iframe>
    </div>
    
    <h3>Resizable</h3>
    <amp-iframe 
      layout="responsive"
      width="400" 
      height="225"
      sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
      scrolling="no"
      frameborder="0"
      resizable
      allowfullscreen
      src="https://www.webtvsolutions.com/webtv-es/embed.php?id=17&w=1&h=1" >
        <amp-img layout="fill" src="https://s3-eu-west-1.amazonaws.com/webtvsolutions/webtv-es/images/clip_17_1360499364_poster.jpg" placeholder></amp-img>
        <div overflow tabindex=0 role=button aria-label="Watch more" style="display:none;">Watch more!</div>
    </amp-iframe>

    </body>
  </html>

Incrustando el reproductor de vídeo de WS.WebTV en una página AMP HTML | Documentación WS.WebTV | WebTV Solutions

Soluciones de vídeo online profesionales y económicas

Instalación y Mantenimiento

Configuración

Solucionando Problemas de Login

Estadísticas

Contenidos, Administración

‹Ext› Gest. Avz. Usuarios

‹Ext› Store (Tienda)

Personalización Avanzada

Otros

AMP HTML