¿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>


Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: