¿Cómo insertar videos MP4 en Amp HTML?
amp-video
Embed videos MP4 en HTML AMP, los archivos de fuente de vídeo deben ser servidos a través de HTTPS
1 Código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
2 Disposición
El script amp-video es una etiqueta personalizada de orden interna y se importa automáticamente a través del tiempo de ejecución de AMP.
Inserte el siguiente script, justo abajo del <head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
3 Uso básico
Un simple video con el regulador. amp-video soporta los siguientes formatos:
MP4, WebM, Ogg, junto con todos los formatos compatibles con la etiqueta video de HTML5 incluyendo HLS.
Atributo booleano ( controls en este caso) debe ser sin valores. Expresión con valor, como controls="controls" no es válido
Código
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/mp4"
src="/video/tokyo.mp4">
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
Demostración
Your browser doesn't support HTML5 video.
4 Auto reproducción
En modo autoplay se reproducirá automáticamente, puede también pausar el video.
El vídeo se silencia automáticamente antes de iniciar la reproducción automática, cuando el usuario pulsa el vídeo, se activa el audio del video.
Si el usuario ha interactuado con el vídeo (por ejemplo, Silencia / restablece, pausa, etc.), y se dirige a mirar otra sección, el video se detiene hasta que el usuario vuelva a la misma sección donde estaba ubicado el video, el video permanecerá en el modo que lo dejo.
Código autoplay
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls
autoplay>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
Demostración
Your browser doesn't support HTML5 video.
A continuación la estructura completa del código
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<link rel="canonical" href="http://amphtmlejemplos.blogspot.com/2016/12/como-insertar-videos-mp4-en-amp-html.html">
<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-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/mp4"
src="/video/tokyo.mp4">
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
<amp-video width=480
height=270
src="/video/tokyo.mp4"
poster="/img/tokyo.jpg"
layout="responsive"
controls
autoplay>
<div fallback>
<p>Your browser doesn't support HTML5 video.</p>
</div>
<source type="video/webm"
src="/video/tokyo.webm">
</amp-video>
</body>
</html>
Comentarios
Disqus comments:
Facebook comments: