Here are the steps to generate a fallback JPG from MP4 file using Adobe Photoshop.

1. File > Import > Video Frames to Layers.

2. Select the MP4 video file from your computer and click “Open”.

3. Set “From Beginning to End” and click “Ok”.

4. Photoshop will open new file with all the frames separated into layers.

5. Select the first layer, then click on File > Export > Save for Web to export it in JPG format.

6. Select “JPG” format from the dropdown menu as shown in the image below and save it.

7. Let’s upload our video to BannerNow library. Go to “Library” and select the “Video” category. Click on “Upload Video” button.

8. Upload the JPG image we have created as Fallback Image and also upload the MP4 video.

9. Now you can see that the video is saved into BannerNow library and you can use it for your banners.

Item visibility mode – Always. This is a default option and refers to a selected element/item that will be always visible (HTML/Fallback/Feed).

Item visibility mode – Only For HTML meaning this element will be shown in HTML5 format only and will not be visible on the Fallback GIF/MP4.

Item visibility mode – Only For Fallback. This option is the opposite of the previous one, meaning that the element will only be visible when the banner was generated as a fallback GIF/MP4. It will be hidden in HTML5 mode.

Item visibility mode – Feed Loaded & Item Feed Data Not Empty.

This option is related to Dynamic Data Feed.

Feed wasn’t loaded at all (some network error occurred) – Item visible FALSE

Feed was loaded but the data for the item is empty – Item visible FALSE

Feed was loaded and the data is not empty – Item visible TRUE

Item visibility mode – Feed Load Success.

Feed wasn’t loaded at all (some network error occurred) – Item visible FALSE

Feed was loaded but the data for the item is empty – Item visible TRUE

Feed was loaded and the data is not empty – Item visible TRUE

Item visibility mode – Feed Load Failed.

Feed wasn’t loaded at all (some network error occurred) – Item visible TRUE

Feed was loaded but the data for the item is empty – Item visible FALSE

Feed was loaded and the data is not empty – Item visible FALSE

*The feed visibility is usually used to display a fallback text or image in case there are some issues with the feed loading (network error) or when the feed data is empty. This way user will see the fallback elements instead of a broken feed banner.

Bannernow includes a handy feature called Fallback. When the Fallback option is enabled, Bannernow creates an animated GIF image or MP4 that replaces your HTML5 banner. This is handy when the client has a slow internet connection or has disabled javascript in the browser. In this case, Fallback will be shown until the HTML5 banner loads.

How to use this feature:

Click on the “Settings” menu button, then in the “Polite Loading” panel turn on “GIF” or “MP4” option.

Since fallback generates an animated GIF image based on framed screenshots. You can customize it will look exactly by using the fallback keyframes (draggable red indicator).

When dragging the keyframe indicator (red line) you’ll view how the banner changes its state on the stage, producing a preview of items visible on a particular timeframe. Click Add fallback keyframe button/icon to add a new frame to the fallback GIF animation. When a frame is added, a frame icon will appear on the timeline. However, if you want to remove a frame, simply click on the frame’s icon and in the menu click delete.

When producing a fallback GIF, you’ll be able to have as many frames as you want. In order to add another frame, just move the keyframe indicator further in the timeline and click the “add fallback keyframe” button/icon again. This way, another frame will be created.

To check the preview of the Fallback, simply click on “Fallback” tab in the top menu.
In some cases, you’ll notice the GIF preview is not matching the image visible on the editor canvas. This is simply because, during preview mode, you will only see the actual screenshot with an animation effect (for example, during the fade out) while on the canvas, you will see the item’s static position (visible or hidden).

When creating a fallback GIF keep in mind that the more frames you add to the fallback the heavier (more KB) the GIF image will be. It’s advised to try to limit the number of frames.

Also, when the Fallback option is enabled for a banner, Bannernow will utilize your first keyframe, in order to generate the banner’s thumbnail in the dashboard.

It’s possible to download the GIF/MP4 file and use it separately from the HTML5 banner.

GIF Fallback sample (3 keyframes)