Cómo usar la propiedad Play de forma flexible



En este vídeo aprenderás cómo jugar de forma creativa con la propiedad Play, la cual determina cuándo se reproduce un elemento o cuando tiene lugar un evento.

No siempre sabrás el milisegundo exacto en el que un elemento o evento ha de reproducirse. Sin embargo, sí puedes usar de referencia cuándo empiezan o terminan de reproducirse otros elementos u objetos de la plantilla, para así especificar cuándo se reproducirá un elemento o evento.

En el ejemplo del vídeo hay dos elementos: "video_1" y "video_2". Lo que queremos conseguir es que "video_2" se reproduzca automáticamente cuando "video_1" termine de reproducirse, o incluso un poco antes. Pero no siempre sabremos qué duración tiene "video_1", por lo que no podemos especificar numéricamente un punto concreto cuando deba reproducirse "video_2" (por ejemplo, en el segundo 5). La solución es usar la propiedad Play de forma creativa, como por ejemplo indicando "quiero que video_2 se reproduzca cuando video_1 haya terminado". Eso lo hacemos de la siguiente forma:

"play": "video_1.end",

También podemos decirle a la plataforma "quiero que video_2 se reproduzca un segundo antes de que termine video_1". Eso lo hacemos de la siguiente forma:

"play": "video_1.end-1000",

Recuerda que la unidad de tiempo en Sezion son milisegundos. Es decir, 1 segundo es igual a 1000 milisegundos.

Aquí encontrarás la plantilla completa que muestro en el vídeo (sólo deberás añadirle tus propios vídeos):

[
  {
    "video": {
      "id": "video_1",
      "play": 0,
      "zIndex": 2,
      "alpha": 0,
      "events": [
        {
          "start": {
            "imageFadeIn": 0
          }
        },
        {
          "end - 0": {
            "imageFadeOut": 0
          }
        }
      ],
      "loop": false,
      "size": {
        "h": 1,
        "w": 1
      }
    }
  },
  {
    "video": {
      "id": "video_2",
      "play": "video_1.end-1000",
      "duration": 10000,
      "zIndex": 1,
      "alpha": 0,
      "imageAlignH": "center",
      "imageAlignV": "center",
      "imageAspect": "preserve",
      "events": [
        {
          "start": {
            "imageFadeIn": 0
          }
        },
        {
          "end - 0": {
            "imageFadeOut": 0
          }
        }
      ],
      "loop": false
    }
  }
]

Feedback and Knowledge Base