Google AMP - Video
Amp-video in amp è un video html5 standard utilizzato per riprodurre incorporamenti video diretti. In questo capitolo, cerchiamo di capire come lavorare e usare amp-video.
Per lavorare con amp-video dobbiamo aggiungere il seguente script:
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>Amp-video ha l'attributo src che ha la risorsa video da caricare, che viene caricata pigramente da amp in fase di esecuzione. Inoltre, tutte le funzionalità sono quasi le stesse del tag video html5.
I seguenti sono i nodi che devono essere aggiunti al video di amp:
Source - È possibile aggiungere diversi file multimediali da riprodurre utilizzando questo tag.
Track - Questo tag ti consente di abilitare i sottotitoli per il video.
Placeholder - Questo tag segnaposto mostrerà il contenuto prima dell'inizio del video.
Fallback - Questo tag verrà chiamato quando il browser non supporta i video HTML5.
Formato del tag amp-video
Il formato per il tag amp-video è mostrato qui -
<amp-video controls width = "640" height = "360"
layout = "responsive" poster = "images/videoposter.png">
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>Facci capire amp-video usando un esempio funzionante come mostrato di seguito -
Esempio
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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>
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Video</h3>
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png">
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</body>
</html>Produzione
L'output del codice riportato sopra è come mostrato di seguito:
Attributi disponibili per amp-video
Gli attributi disponibili per amp-video sono elencati nella tabella qui -
| Suor n | Attributi e descrizione |
|---|---|
| 1 | src Se il nodo <source> non è presente, è necessario specificare src e deve essere https: // url. |
| 2 | poster Il poster accetta l'URL img che viene visualizzato prima dell'avvio del video. |
| 3 | autoplay Avere questo attributo su amp-video riprodurrà automaticamente il video se il browser lo supporta. Il video verrà riprodotto in modalità disattivata e l'utente dovrà toccare il video per riattivarlo. |
| 4 | controls Avere questo attributo su amp-video mostrerà i controlli sul video simili al video html5. |
| 5 | loop Se questo attributo è presente su amp-video, il video verrà riprodotto di nuovo una volta terminato. |
| 6 | crossorigin Questo attributo entra in scena se le risorse per riprodurre il video hanno un'origine diversa. |
| 7 | rotate-to-fullscreen Se il video è visibile, il video viene visualizzato a schermo intero dopo che l'utente ruota il dispositivo in modalità orizzontale |
Video AMP a riproduzione automatica
Possiamo utilizzare l'attributo autoplay nel caso in cui sia necessario riprodurre automaticamente il video. Questa funzione funzionerà secondo il supporto del browser. Tieni presente che il video sarà in stato muto durante la riproduzione automatica. Quando l'utente tocca il video, l'audio verrà riattivato.
Facciamo la funzione di riproduzione automatica con l'aiuto di un esempio funzionante come indicato di seguito:
Esempio
<!doctype html>
<html amp lang = "en">
<head>
<meta charset = "utf-8">
<script async src = "https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Amp Video</title>
<link rel = "canonical" href = "http://example.ampproject.org/article-metadata.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>
<script async custom-element = "amp-video" src = "
https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>
</head>
<body>
<h3>Google AMP - Amp Video Autoplay</h3>
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png" autoplay>
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
</body>
</html>
È possibile attivare i controlli al video aggiungendo l'attributo dei controlli come mostrato nel codice seguente:
<amp-video controls
width = "640"
height = "360"
layout = "responsive"
poster = "images/videoposter.png" autoplay>
<source src = "video/bunny.webm" type = "video/webm" />
<source src = "video/samplevideo.mp4" type = "video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>