Google AMP - Video
Amp-Video in Amp ist ein Standard-HTML5-Video, das zum Abspielen direkter Video-Einbettungen verwendet wird. Lassen Sie uns in diesem Kapitel verstehen, wie Sie mit Amp-Video arbeiten und es verwenden.
Um mit Amp-Video zu arbeiten, müssen wir folgendes Skript hinzufügen -
<script async custom-element = "amp-video"
src = "https://cdn.ampproject.org/v0/amp-video-0.1.js">
</script>Amp-Video hat das Attribut src, das die zu ladende Video-Ressource enthält, die zur Laufzeit von Amp träge geladen wird. Außerdem sind alle Funktionen fast identisch mit dem HTML5-Video-Tag.
Im Folgenden sind die Knoten aufgeführt, die dem Amp-Video hinzugefügt werden sollen:
Source - Mit diesem Tag können Sie verschiedene Mediendateien hinzufügen, die abgespielt werden sollen.
Track - Mit diesem Tag können Sie die Untertitel für das Video aktivieren.
Placeholder - Dieses Platzhalter-Tag zeigt Inhalte an, bevor das Video gestartet wird.
Fallback - Dieses Tag wird aufgerufen, wenn der Browser kein HTML5-Video unterstützt.
Format des Amp-Video-Tags
Das Format für das Amp-Video-Tag wird hier angezeigt -
<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>Lassen Sie uns Amp-Video anhand eines Arbeitsbeispiels verstehen, wie unten gezeigt -
Beispiel
<!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>Ausgabe
Die Ausgabe des oben angegebenen Codes ist wie folgt:
Attribute Verfügbar für Amp-Video
Die für Amp-Video verfügbaren Attribute sind in der Tabelle hier aufgeführt -
| Sr.Nr. | Attribute & Beschreibung |
|---|---|
| 1 | src Wenn der <source> -Knoten nicht vorhanden ist, muss src angegeben werden und lautet https: // url. |
| 2 | poster Das Poster nimmt eine IMG-URL an, die angezeigt wird, bevor das Video gestartet wird. |
| 3 | autoplay Wenn Sie dieses Attribut für Amp-Video verwenden, wird das Video automatisch wiedergegeben, wenn der Browser dies unterstützt. Das Video wird stummgeschaltet abgespielt und der Benutzer muss auf das Video tippen, um die Stummschaltung aufzuheben. |
| 4 | controls Wenn Sie dieses Attribut für Amp-Video verwenden, werden Steuerelemente für das Video ähnlich wie für HTML5-Videos angezeigt. |
| 5 | loop Wenn dieses Attribut in Amp-Video vorhanden ist, wird das Video nach Abschluss erneut abgespielt. |
| 6 | crossorigin Dieses Attribut wird angezeigt, wenn sich die Ressource zum Abspielen von Videos auf einem anderen Ursprung befindet. |
| 7 | rotate-to-fullscreen Wenn das Video sichtbar ist, wird das Video im Vollbildmodus angezeigt, nachdem der Benutzer sein Gerät in den Querformatmodus gedreht hat |
AMP-Video automatisch abspielen
Wir können das Autoplay-Attribut verwenden, falls wir das Video automatisch abspielen müssen. Diese Funktion funktioniert gemäß Browserunterstützung. Beachten Sie, dass das Video beim automatischen Abspielen stummgeschaltet ist. Wenn der Benutzer auf das Video tippt, wird die Stummschaltung aufgehoben.
Lassen Sie uns die Autoplay-Funktion anhand eines Arbeitsbeispiels wie unten angegeben ausführen.
Beispiel
<!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>
Sie können Steuerelemente für das Video aktivieren, indem Sie das Steuerelementattribut hinzufügen, wie im folgenden Code gezeigt.
<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>