Elemento personalizado Carretes de presentación corta

Carretes de presentación corta es un elemento personalizado HTML5 destinado a reproducir vídeos de forma automática y en silencio en creatividades rich media de Studio. Utilizando elementos personalizados, los desarrolladores web pueden definir nuevos tipos de elementos HTML o ampliar el comportamiento de los tipos básicos. Carretes de presentación corta se ha creado utilizando la especificación Custom Elements de la API de componentes web.

Si utiliza Google Web Designer, instale el componente personalizado Carrete de presentación corta.

Las presentaciones cortas son vistas previas del contenido de un vídeo que animan a los usuarios a ver el vídeo en su totalidad y con sonido. Con frecuencia, los sistemas operativos de dispositivos móviles, como iOS de Apple (en versiones anteriores a la 10), ignoran el atributo autoplay del elemento <video> HTML5 estándar. El componente Carretes de presentación corta encapsula las funciones de este elemento y permite reproducir en silencio la vista previa de un vídeo durante un máximo de 30 segundos. Al hacer clic en el vídeo de presentación corta o tocarlo, se reproduce su versión completa. Además, ni el vídeo inicial que se reproduce automáticamente ni los bucles se cuentan como visualizaciones.

Ver una creatividad de ejemplo

Funciones

• Permite reproducir vídeo de alta calidad y de forma automática en la mayoría de los dispositivos y las plataformas.
• Reproduce un vídeo de presentación corta durante un máximo de 30 segundos.
• Cuando se hace clic en el vídeo de presentación corta, se reproduce su versión completa con sonido.
• Permite crear un bucle entre el vídeo de presentación corta y su versión completa (opcional).
• Encapsula las funciones del elemento <video> HTML5 para poder reproducir de forma automática una presentación corta en un reproductor de vídeo completo.

Requisitos previos

• La creatividad debe haberse compilado como una creatividad HTML5.
• En el archivo HTML se deben incluir las bibliotecas de secuencias de comandos necesarias (consulte la siguiente sección: Elementos que se deben incluir).
• Para permitir la reproducción insertada en iOS 10 y versiones superiores, es obligatorio añadir el atributo playsinline en los anuncios (se incluye de forma automática). No es necesario añadir el atributo a los elementos de vídeo. El atributo también se ha añadido a las creatividades que ya haya.

Elementos que se deben incluir

Antes de utilizar el elemento personalizado, primero debe añadir estas secuencias de comandos en el encabezado del archivo HTML de la creatividad:

<script src="//s0.2mdn.net/ads/studio/Enabler.js"></script>
<script src="//s0.2mdn.net/ads/studio/videoteaser/1/avc_codec.js"></script>
<script src="//s0.2mdn.net/ads/studio/videoteaser/1/video_teaser_lib.js"></script>

Configurar el elemento personalizado

Para añadir el elemento personalizado a su archivo HTML, utilice un elemento <video-teaser>.

Cuando se llama al método play() o pause() en el elemento de vídeo, finaliza el vídeo de presentación corta y se muestra el vídeo completo. En las páginas web que se ven en dispositivos móviles, si llama a alguno de estos métodos, puede que la presentación corta no se reproduzca de ningún modo.

Etiqueta de Carretes de presentación corta de ejemplo

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video-teaser>

Limitaciones

• El elemento personalizado no se puede crear mediante programación con JavaScript ni modificando una etiqueta ya creada. Debe declarar el elemento dentro de un archivo HTML con los atributos necesarios. Esto significa que no puede extraer la URL del vídeo de un feed dinámico.
• Por motivos de rendimiento, solo se puede utilizar un único componente de Carretes de presentación corta por creatividad.

Especificar atributos de elementos personalizados

Emplee atributos para cambiar el comportamiento del vídeo de presentación corta. Estos atributos funcionan de la misma manera que las etiquetas HTML estándar. Especifique la altura y la anchura del vídeo, y añada elementos <source> secundarios por cada archivo de origen de vídeo que quiera usar. Por otra parte, si solo usa un archivo de origen de vídeo, puede asignar un único nombre de archivo al atributo src del elemento video-teaser.

Expanda estas secciones para obtener ejemplos e información sobre los atributos disponibles.

Atributos requeridos

Mostrar todo Ocultar todo

height

Permite especificar la altura en píxeles del vídeo y de su versión de presentación corta.

Ejemplo

En este ejemplo se asigna un valor de 200 píxeles a la altura del vídeo:

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="200"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

poster

Es una imagen que se muestra mientras se carga la presentación corta y cuando esta termina de reproducirse (siempre que no se haya especificado el atributo loop), o en caso de que la calidad de la reproducción automática sea demasiado baja.

Ejemplo

En este ejemplo se especifica starwars.jpg como imagen de póster:

<video-teaser
​       controls
       loop
       teaserduration="7"
       width="320"
       height="200"
       teasersrc="movie.mp4"
       poster="starwars.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

teaserduration

Permite definir la duración del vídeo de presentación corta (en segundos). Debe ser un valor numérico superior a 0. Se admiten valores con decimales (por ejemplo, 11,35).
Valor predeterminado: 10 segundos
Máximo: 30 segundos

Ejemplo

En este ejemplo se asigna un valor de 15 segundos a la duración de la presentación corta:

<video-teaser
​​       controls
       loop
       teaserduration="15"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

teasersrc

Permite definir el archivo de origen de vídeo que se debe usar para crear el vídeo de presentación corta. Es necesario que coincida con el vídeo especificado en el atributo src, o bien con uno de los elementos <source> secundarios del elemento <video>, si no se utiliza src. Si los atributos <source> o src contienen una ruta (por ejemplo, micarpeta/movie.ogg), use únicamente el nombre de archivo (movie.ogg).

Ejemplo

En este ejemplo se especifica el origen de vídeo ogg proporcionado como origen de la presentación corta:

<video-teaser
       ​​controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.ogg"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

width

Permite definir la anchura, en píxeles, del vídeo y de su versión de presentación corta.

Ejemplo

En este ejemplo se asigna un valor de 400 píxeles a la anchura del vídeo:

{video-teaser controla el bucle teaserduration="7" width="400" height="240" teasersrc="movie.mp4" poster="poster.jpg" src="movie.mp4" type="video/mp4"> {source src="movie.ogg" type="video/ogg"> El navegador no admite la etiqueta de vídeo.
</video-teaser>

 

Atributos opcionales

controls

Decida si mostrar controles cuando se reproduzca el vídeo completo. Este atributo es opcional, por lo que si no quiere mostrar los controles basta con no incluirlo.

Ejemplo

En este ejemplo puede verse cómo mostrar los controles cuando se reproduzca el vídeo completo:

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

loop

Permite definir si se debe crear un bucle entre el vídeo de presentación corta y su versión completa. Se trata de un atributo opcional, por lo que si no desea que se cree dicho bucle, no lo añada.

Ejemplo

En este ejemplo se muestra cómo reproducir el vídeo de presentación corta y su versión completa cada vez que terminen:

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

preload

Permite definir el comportamiento de precarga del vídeo completo. Los valores aceptados son los siguientes:

• auto: se carga el vídeo completo al cargarse la página.
• metadata: solo se cargan los metadatos del vídeo al cargarse la página.
• none: solo se carga el vídeo completo cuando el usuario hace clic en el botón de reproducción.

Si necesita minimizar el número de solicitudes y el tamaño descargado de una creatividad de Carretes de presentación corta en una página de editor, asigne los valores none o metadata a este comportamiento.

Ejemplo

En este ejemplo se inhabilita la precarga del vídeo completo:

<video-teaser
       controls
       preload="none"
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

src

Permite definir un único vídeo de origen para usarlo. Es posible que el atributo src contenga una ruta relativa junto con el nombre de archivo. Si define el atributo src, no es necesario añadir elementos secundarios <source> al elemento <video-teaser>.

Ejemplo

En este ejemplo se define un único vídeo de origen:

<video-teaser
       ​​controls
       teaserduration="7"
       width="320"
       height="240"
       src="movie.mp4"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

teaserexpandplay

Especifique si aplazar la reproducción automática hasta que la creatividad se expanda (pantalla completa o normal) y que se detenga cuando esté contraída. Este atributo es opcional. Además, solo es relevante en el caso de las creatividades que se expanden.

Ejemplo

En este ejemplo se inicia la reproducción automática únicamente tras la expansión de la creatividad:

<video-teaser
       teaserexpandplay
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

 

No utilice el atributo autoplay. No es compatible y dará lugar a un error.

Eventos y métricas

Para grabar eventos de vídeo estándar del vídeo completo, adjunte el identificador de informes de vídeo de Studio al elemento de vídeo.

Ejemplo

En este ejemplo se adjunta el identificador de informes de vídeo de Studio al elemento de vídeo.

Etiqueta de vídeo:

<video-teaser
       controls
       id="video1"
       teaserduration="7"
       width="320"
       height="240"
       src="movie.mp4"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  Su navegador no es compatible con la etiqueta de vídeo.
</video-teaser>

 

Código JavaScript utilizado para adjuntar el identificador de informes de vídeo de Studio:

var video1 = document.getElementById('video1');

Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
  studio.video.Reporter.attach('video_1', video1);
});

 

Métricas personalizadas

El vídeo de presentación corta permite registrar métricas personalizadas con los eventos que se muestran a continuación. Para registrarlos, añada los eventos de contador o temporizador que prefiera utilizando los nombres siguientes en el paso Editar eventos del flujo de trabajo de creatividades de Studio.

Contadores

• Clics en el vídeo de presentación corta
  El número de interacciones del usuario (clics o toques) con el vídeo de presentación corta que dan lugar a la reproducción del vídeo completo. 
• Bucles del vídeo de presentación corta
  El número de bucles finalizados del vídeo de presentación corta. Solo se graba cuando el atributo loop está definido.
• Cuartil 1 del vídeo de presentación corta
  El número de veces que se reproduce el 25 % del vídeo de presentación corta.
• Cuartil 2 del vídeo de presentación corta
  El número de veces que se reproduce el 50 % del vídeo de presentación corta.
• Cuartil 3 del vídeo de presentación corta
  El número de veces que se reproduce el 75 % del vídeo de presentación corta.
• Cuartil 4 del vídeo de presentación corta
  El número de veces que se reproduce el 100 % del vídeo de presentación corta.

Temporizadores

• Temporizador del vídeo de presentación corta
  Los segundos durante los que se ha reproducido el vídeo de presentación corta, incluidos los bucles.

Los cuartiles del vídeo de presentación corta se calculan en función del atributo teaserlength y no de la duración del vídeo completo.

Vista previa y pruebas

Para previsualizar el vídeo de presentación corta, es necesario subir antes la creatividad a Studio.

Si el vídeo no funciona, compruebe cuándo se subió a Studio. El componente Carretes de presentación corta necesita archivos de vídeo transcodificados. La función de transcodificación de vídeos automática se habilitó el 17 de marzo del 2015. Si el archivo se subió antes de esa fecha, cambie el nombre del vídeo en la biblioteca de recursos y se generarán transcodificaciones para el archivo.

Garantizar una reproducción de alta calidad

El rendimiento depende del navegador y del hardware del dispositivo en el que se está reproduciendo el vídeo. Cuando el vídeo cargue por primera vez, se producirá una fase de pruebas inicial de 1 a 3 segundos en la que se analiza el hardware para determinar si se puede reproducir la presentación corta por completo.

Si los resultados del análisis son demasiado bajos para admitir una reproducción de alta calidad, se muestra la imagen del póster en lugar del vídeo. Esta imagen también se muestra en cualquier momento durante la reproducción de la presentación corta del vídeo si el número de fotogramas por segundo se sitúa por debajo de un umbral determinado, como cuando se visualiza el vídeo con una conexión de red deficiente.

Navegadores y dispositivos admitidos

Los carretes de presentación corta funcionan en la mayoría de las plataformas y los navegadores modernos.

• Entornos de SDK compatibles con MRAID 2.0
• La versión de escritorio de Safari, Internet Explorer 10 o superior, Chrome y Firefox
• Safari en dispositivos con iOS 8 o superior, con menos de 2 años de antigüedad (por ejemplo: iPhone 5C y iPhone 6)
• Chrome en dispositivos Android con menos de 2 años de antigüedad