How to Add a Video Preview to Your Apps in Fliplet

When you're adding a video to your app, you might want to think about adding a preview.

A video preview is a still image that gives the user a preview of what the video will be about. The preview will be visible to the user before they have selected to play the video.

There are three steps to adding a preview image to your video:

  1. Getting a preview image
  2. Adding your image to the screen
  3. Linking the video to your image
VideoPrev1 A video preview should normally be representative of the video itself, but it's not mandatory. To create a video preview, you have a few different options:
  • Use an image already available to you
  • Get a screenshot of the video
  • Edit an existing image

Use an existing image

If you have a preview image saved or would like to use a non-specific image as a preview then all you have to do is add an image to your screen.

Please follow these instructions to add your image, then continue reading this post to find out how to link the image to a video

Getting a screenshot of your video

An effective way of creating a preview of your video is to get a screenshot from the video itself. It is very easy to do this on Mac and PC.

In either case, opening the video file rather than viewing the video online will be the easiest option. To get started, open your video and pause on the image you’d like to have as your preview.

On a Mac

Getting a screenshot on a Mac is particularly easy. Follow these simple steps to video preview success:
  1. Open your video and go to the desired frame
  2. Once you are happy, press: Command + Shift + 4 simultaneously.
  3. With your mouse or trackpad, hold down and drag the cursor across the area you’d like to capture.
  4. Your screenshot will automatically be saved to your desktop

On a PC

Getting a screenshot to use as a preview from a PC is just as easy, but works slightly differently.

Follow these simple steps to getting your screenshot:

  1. Open your video in a new window and move to the desired frame
  2. Tap or click on the video window
  3. Once you are happy, press: Alt. + Print Screen simultaneously.
  4. A picture of the window is copied and you can paste it wherever you'd like.
  5. Go to your desktop and press: Ctrl + V to create an image file

Editing an existing image

If you want to use an image that doesn’t feature in your video, you can always edit an image to make it more informative.

The most common way of doing this is to add text to an image.

To do this, you don’t need any fancy image editing software. Free to use applications such as Microsoft Paint or online tools like Pixlr will work well.

  1. Open the image in your image editor
  2. Select the text tool, which is usually displayed as a ‘T’
  3. Add your text to the image and save
Open the screen where you want your image to go:
  1. Click on the ‘+Image’ at the top of the content editor.
  2. Click on ‘Click to add files’ in the middle of the window
  3. Imageblog2
  4. Select the image file you’d like to add from your computer
  5. Imageblog31
  6. Click ‘open’ to upload the file to Fliplet.
  7. Once uploaded, click ‘Use’ to add your image to the screen
You’ve got your preview image in your screen, now you want your video to play when the user taps it.To link your video to the preview image, open up the content editor, then:
  1. Double Click on the preview image, then click on ‘Add Link’
  2. Click on the dropdown menu labeled ‘Link Action’ and select ’Play a video’.
  3. Click on ‘Browse your media library’
  4. Click on ‘Click to add files’ and select the video file you’d like to upload. When you have found it, click ‘Open’ to begin uploading
  5. VideoBlog3
  6. When the video has been uploaded, click ‘Use’, then ‘Save’ to insert the video into your screen
  7. Click ‘Save’ to return to the app preview screen, then ‘View your app’ to see it on your mobile device via Fliplet Viewer
VideoPrev2 Find out further ways to add video into apps created with Fliplet

Want some help with your app?

You should speak to a member of the Customer Success team. You can do this by:
  • Email: support@fliplet.com
  • Telephone: UK: +44 (0) 203 582 9720 US: +1 (415) 200 3720
  • Live chat: Chat to us in Fliplet Studio
  • Fliplet FAQ
We look forward to hearing what you think of this new feature – feedback is welcome!