Para empezar es necesario crear una plantilla inicial como la siguiente y guardarla en un archivo con extensión .HTML
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<% canonical %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
<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>
<h1>Mediastream Player AMP</h1>
</body>
</html>
Como se aprecia, el contenido del body es normal a cualquier HTML, sin embargo hay etiquetas no muy conocidas, que son obligatorias para la estructura de un documento AMP.
Códigos AMP necesarios
Un documento AMP obligatoriamente debe tener:
Regla | Descripción |
Iniciar por el tipo de documento <!DOCTYPE html> | Estándar de HTML |
Incluir etiqueta <html amp> | Identifica la página como contenido AMP |
Incluir etiquetas <head> y <body> | Opcionales en HTML pero no en AMP |
Incluir etiqueta <meta charset="utf-8"> como primera etiqueta secundaria después de <head>. | Identifica la codificación de la página |
Incluir etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script> como segunda etiqueta secundaria de la etiqueta <head>. | Carga la librería JS de AMP. |
Incluir etiqueta <link rel="canonical" href="$SOME_URL %>"> dentro de <head> | Dirige a la versión HTML normal del documento AMP HTML o a sí misma si no existe dicha versión. |
Incluir etiqueta <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | Especifica ventana de visualización adaptable. |
Incluir código de plantilla de AMP <style amp-boilerplate> en la etiqueta <head> | Es una plantilla CSS que permite ocultar el contenido hasta que se cargue la librería AMP JS. |
Insertando el Player
Para hacer uso del player de Mediastream es necesario cargar la librería amp-video-iframe.js en nuestra sección <head> lo haremos de la siguiente manera:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<% canonical %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
<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>
<h1>Mediastream Player AMP</h1>
</body>
</html>
Finalmente añadiremos nuestro componente <amp-video-iframe> en el body y nuestra página quedaría de la siguiente manera:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<link rel="canonical" href="<% canonical %>">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>
<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>
<h1>Mediastream Player AMP</h1>
<div class="row">
<amp-video-iframe layout="responsive"width="640" height="360" src="https://mdstrm.com/embed/5e59f9e1bf600a71bdaffd94" poster="https://mdstrm.com/thumbs/51125d365e5630ca73000a6a/thumb_5e59f9e1bf600a71bdaffd94_5e59f9e1bf600a71bdaffd9f_6s.jpg"></amp-video-iframe>
</div>
</body>
</html>
Recuerda escribir el ID de Media y Poster URL que puedes obtener por API en cada Media.
Listo, de esa manera es posible utilizar nuestro player en una página AMP. Recuerda siempre ayudarte de herramientas de validación, acá te dejamos una. Siempre deberías ver esta pantalla si todo está correcto.
Puedes ver la validación en este link https://search.google.com/test/amp?id=3bbaDqftj88B72PklH5vMQ
Si tienes alguna pregunta adicional sobre este modulo y sus funciones, no dudes en contactarnos a través del chat.
Att: El equipo de Mediastream