Skip to main content

Video Element

Use this to add videos to your skin. You can use local files, URLs or YouTube and Vimeo IDs.

Add the Video skin element by doing any of the following:

  • Select it in the Toolbar and click and drag in the Canvas to add the element.

  • Go the Elements menu and select Video. Click and drag in the Canvas to add the element.

Settings

Video Source – Choose the video’s source type:

  • File - To use a video from a local file. You can choose an optional poster frame (Poster Frame File) which is a preview image of the video. It is displayed until the video starts playing.

  • URL - To use a video from a URL. Enter the URL of the video and its poster frame URL.

  • YouTube - To embed a YouTube video. Paste the URL of a YouTube video into the YouTube ID field. When you do, you’ll see the video ID as a link. Click on this to check it is the correct video (it will open the page in a browser). You cannot mute the audio of YouTube videos.

  • Vimeo - To embed a Vimeo video. Paste the URL of a Vimeo video into the Vimeo ID field. When you do, you’ll see the video ID as a link. Click on this to check it is the correct video (it will open the page in a browser). You cannot hide the Vimeo movie controls or mute the audio.

Options – (not all options are available for all video source types):

  • Autoplay - To automatically start the video.

  • Controls - To show playback controls inside the video.

  • Loop - To continuously loop the video.

  • Mute - To mute the video’s audio.

LoadingUnload video on hide - Select to unload the video when it gets hidden through a skin action. This also stops the sound of the video.

✭ Tip: Use an action to show and hide the video.

Hide Videos when not playing using a Logic Block

  1. Click the arrows next to Visible to open the Logic Block for visibility.

    Open Logic Block

  2. In the Logic Block, create the following expression:

    → Trigger: Active

    → Comparison: =

    → Value: False

    → Visible: False

    This expression states that when the video is not playing it will not be visible; it will hide itself.

    Hide video expression

✭ Note: Using the Active trigger will not work with YouTube and Vimeo videos.

Fade Videos in and out using a Logic Block

  1. Click the arrows next to Alpha to open the Logic Block for visibility.

    Open Logic Block

  2. In the Logic Block, create the following expression:

    → Trigger: Active

    → Comparison: =

    → Value: False

    → Alpha: 0

    → Transition: 2 seconds (or desired length)

    This expression states that when video is not playing (not active), it hide itself with a transition from full opacity to transparent.

    Fade video expression

    So, if you have a button that toggles play and pause, for example, the video will fade in and out.

✭ Note: Using the Active trigger will not work with YouTube and Vimeo videos.


See also

2017-06-21 14:22:51