Brightcove Video Cloud es una plataforma en línea que se utiliza para alojar videos. amp-brightcove es un componente de amplificación que se utiliza para integrar un reproductor de video de brightcove o una nube de video de brightcove.
Scripts requeridos: Importación del componente brightcove en el encabezado
HTML
<script async custom-element="amp-brightcove" src= "https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"> </script>
Atributos:
- cuenta de datos: el ID de la cuenta de Brightcove Video Cloud.
- data-video-id: la identificación de Brightcove Video Cloud.
- data-player-id: el ID del jugador de Brightcove. Este es un identificador único global (GUID).
- data-playlist-id: la identificación de la lista de reproducción de Brightcove Video Cloud. Si se especifican tanto una lista de reproducción como un video, la lista de reproducción tiene preferencia sobre el video.
- reproducción automática: si se especifica este atributo, el video se iniciará automáticamente.
- dock: si se especifica este atributo y si el video se reproduce manualmente, el video se minimizará. Se requiere la extensión amp-video-docking para usar este atributo.
Se incrusta un video de brightcove como se indica a continuación, se requiere una cuenta de datos, una identificación de video de datos y una identificación de reproductor de datos .
HTML
<amp-brightcove data-account="906043040001" data-video-id="1401169490001" data-player-id= "180a5658-8be8-4f33-8eba-d562ab41b40c" layout="responsive" width="480" height="270"> </amp-brightcove>
Para obtener instrucciones de configuración del reproductor brightcove, puede consultar la siguiente documentación de soporte de Brightcove. https://amp.dev/documentation/components/amp-brightcove/?format=websites
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-brightcove</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import the Brightcove component
in the header. -->
<script async custom-element=
"amp-brightcove" src=
"https://cdn.ampproject.org/v0/amp-brightcove-0.1.js">
</script>
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-brightcove/index.html">
<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-brightcove data-account="906043040001"
data-video-id="1401169490001"
data-player-id=
"180a5658-8be8-4f33-8eba-d562ab41b40c"
layout="responsive" width="480"
height="270">
</amp-brightcove>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA