amp-video
Description
Remplacer la balise vidéo HTML5.
Required Scripts
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Supported Layouts
Exemples
Ce composant remplace la balise video HTML5 ; il ne doit être utilisé que pour les intégrations directes de fichiers vidéo HTML5.
| Script requis | <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script> |
| Exemples | AMP By Example : |
| Mises en page compatibles | fill, fixed, fixed-height, flex-item, nodisplay, responsive |
Comportement
Le composant amp-video charge de manière différée la ressource vidéo spécifiée par son attribut src, à une heure déterminée par l'environnement d'exécution. Vous pouvez contrôler un composant amp-video de la même manière qu'une balise <video> HTML5 standard.
Le composant amp-video accepte jusqu'à quatre types de nœuds HTML uniques en tant qu'éléments enfants :
- Balises
source: comme pour la balise<video>HTML, vous pouvez ajouter des balises<source>enfants pour spécifier différents fichiers multimédias sources à lire. - Balises
trackpour activer les sous-titres dans la vidéo. Si le titre est hébergé sur une origine différente de celle du document, vous devez ajouter l'attributcrossoriginà la balise<amp-video>. - Espace réservé avant le lancement de la lecture de la vidéo.
- Création de remplacement si le navigateur n'accepte pas le contenu vidéo HTML5 : l'attribut
fallbackpeut être affecté à un ou à aucun nœud enfant immédiat. Si cet attribut est utilisé, ce nœud et ses enfants constituent le contenu qui s'affiche si la vidéo HTML5 n'est pas acceptée par le navigateur de l'utilisateur.
Exemple
This browser does not support the video element.
<amp-video controls
width="640"
height="360"
layout="responsive"
poster="/static/inline-examples/images/kitten-playing.png">
<source src="/static/inline-examples/videos/kitten-playing.webm"
type="video/webm" />
<source src="/static/inline-examples/videos/kitten-playing.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
</amp-video>
Analyse
Le composant amp-video est directement compatible avec la technologie d'analyse. Pour en savoir plus, consultez la page consacrée à l'analyse vidéo.
Attributs
| src | Obligatoire si aucun élément enfant <source> n'est présent. Doit être au format HTTPS. |
| poster | Image du cadre à afficher avant le début de la lecture de la vidéo. Par défaut, la première image est affichée. Vous pouvez également présenter une superposition click-to-play. Pour en savoir plus, reportez-vous à la section Superposition click-to-play ci-dessous. |
| autoplay | Si cet attribut est utilisé et que le navigateur est compatible avec la lecture automatique, la vidéo est lue automatiquement dès qu'elle est visible. Pour être lisible, le composant doit remplir certaines conditions, exposées dans la spécification relative à la vidéo dans AMP. |
| controls | Cet attribut est semblable à l'attribut controls de la balise video HTML5. Si cet attribut est utilisé, le navigateur propose des commandes permettant à l'utilisateur de contrôler la lecture de la vidéo. |
| controlsList | Identique à l'attribut controlsList de l'élément vidéo HTML5. Cet attribut est accepté uniquement par certains navigateurs. Pour plus d'informations à ce sujet, consultez la page https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList. |
| dock | Nécessite l'extension amp-video-docking. Si cet attribut est utilisé et que la vidéo est lue manuellement, cette dernière est" "réduite" et ancrée à un coin ou à un élément de la page lorsque l'utilisateur fait défiler la page au-delà la zone visuelle du composant vidéo. Pour en savoir plus, consultez la documentation relative à l'extension d'ancrage. |
| loop | Si cet attribut est utilisé, la vidéo revient automatiquement au début lorsque la lecture est terminée. |
| crossorigin | Obligatoire si une ressource track est hébergée sur une origine différente de celle du document. |
| disableremoteplayback | Détermine si l'élément multimédia peut être associé à une interface de lecture à distance telle que Chromecast ou AirPlay. |
| muted (obsolète) | L'attribut muted est obsolète et n'a plus aucun effet. L'attribut autoplay contrôle automatiquement la coupure du son. |
| noaudio | Ajoute une annotation pour indiquer que la vidéo est dépourvue de contenu audio. Cet attribut masque l'icône d'égaliseur qui est affichée lorsque la vidéo peut être lue automatiquement. |
| rotate-to-fullscreen | Si la vidéo est visible, elle s'affiche en mode plein écran après que l'utilisateur a fait pivoter son appareil en mode paysage. Pour plus d'informations, consultez la spécification relative à la vidéo dans AMP. |
| common attributes | Cet élément inclut des attributs communs étendus aux composants AMP. |
Attributs de l'API Media Session
Le composant amp-video met en œuvre l'API Media Session qui permet aux développeurs de spécifier davantage d'informations sur le fichier vidéo. Ces informations supplémentaires sur la vidéo s'affichent dans le centre de notifications de l'appareil de l'utilisateur (avec les commandes de lecture et de mise en pause de la vidéo).
| artwork | Indique l'URL d'une image PNG/JPG/ICO utilisée comme illustration de la vidéo. Si l'attribut "artwork" n'est pas utilisé, l'outil d'aide de l'API Media Session utilise le champ "image" de la définition "schema.org", la balise "og: image" ou la "favicon" du site Web. |
| artist | Indique le nom de l'auteur du fichier vidéo, spécifié sous la forme d'une chaîne. |
| album | Indique l'album ou la collection dont est extraite la vidéo, spécifié sous la forme d'une chaîne. |
| title | Indique le nom ou le titre de la vidéo, spécifié sous la forme d'une chaîne. Si cet attribut n'est pas indiqué, l'outil d'aide de l'API Media Session utilise l'attribut "aria-label" "ou revient au titre de la page. |
Exemple :
Cet exemple contient à la fois les attributs poster et artwork. L'attribut poster sert d'image d'espace réservé avant la lecture de la vidéo, tandis que l'attribut artwork est l'image qui s'affiche dans la notification via l'API Media Session.
<amp-video width="720" height="305" layout="responsive"
src="https://yourhost.com/videos/myvideo.mp4"
poster="https://yourhost.com/posters/poster.png"
artwork="https://yourhost.com/artworks/artwork.png"
title="Awesome video" artist="Awesome artist"
album="Amazing album">
</amp-video>
Superposition click-to-play
La superposition click-to-play est une fonctionnalité d'utilisation courante pour les lecteurs vidéo sur le Web. Vous pouvez, par exemple, afficher une icône de lecture personnalisée sur laquelle l'utilisateur peut cliquer, ou encore inclure le titre de la vidéo, des images poster de différentes tailles, etc. Étant donné que le composant amp-video est compatible avec l'action AMP play standard, vous pouvez facilement mettre en œuvre la technologie click-to-play.
Pour obtenir un exemple détaillé, consultez la page Superposition click-to-play pour amp-video sur AMP by Example.
Validation
Consultez les règles relatives à amp-video dans les spécifications du validateur AMP.
Vous avez lu ce document une douzaine de fois mais il ne répond pas à toutes vos questions ? D'autres personnes ont peut-être eu le même sentiment. Contactez-les sur Stack Overflow.
Se rendre sur Stack Overflow Vous avez trouvé un bug ou une fonctionnalité manquante ?Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.
Se rendre sur GitHub