Guide on how to convert your Flash VideoApps (Playlists) to HTML5

As you may know, we have recently released our HTML5 Video Player and made it primary for your videos. This update however affected only your single video players. Today we’ll show you how to convert your Video Apps Projects ( Video Playlists ) from Flash to HTML5 by following few simple steps and achieve: 1) Faster loading time and better performance 2) Responsive design.

1

Check your embed code type of your Flash Video App

There are two variants of embed code you may be have on your site, so it is important to identify which one is yours, so you can use the right HTML5 parameters for it from step 2 below. Is yours Variant 1, Variant 2 or Direct Link?

EMBED CODE VARIANT 1

Check code example for embed code Variant 1. Is yours similar?

EMBED CODE VARIANT 2

Check code example for embed code Variant 2. The code contains "new VappController". Is yours similar?

DIRECT LINK - If you are using direct link to your video apps, then below we'll refer to Direct Link and explain how to add parameters to the URL. - code example

2

Installation instructions

To convert your existing Video App Project(s) from Flash to HTML5, add one or more of the following HTML5 parameters to your existing embed code or Direct Link. The parameters gives you different layouts, colour themes or behaviour for your new HTML5 Apps. Once you are happy with the results, make the changes permanent, else try using different combination of the HTML5 parameters until you reach the desired outcome.

HTML5 PARAMETERS FOR VARIANT 1

HTML5 PARAMETERS FOR VARIANT 2

  • ,use_html5: "true"
    Use HTML5 version of VideoApps
  • ,layout: "default"
    ,layout: "wall"
    Check examples below for default layout and wall layout.
  • ,theme: "light"
    ,theme: "dark"
    Additional theme colours are also available: blue, orange, deep-purple and lime. Light theme is default.
  • ,is_inversed: "true"
    Inversed text colors. Use for VideoApp embedded on sites with dark backgrounds.
  • ,is_responsive: "true"
    Responsive layout takes 100% width and automatically calculates height depending on screen sizes. Recommended for responsive websites.
  • ,is_vertical: "true"
    Force player to always stay above thumbs, regardless of VideoApps size.
  • ,one_thumb_per_row: "true"
    Force thumbs width to 100%, regardless of VideoApps size. Always one thumb per row.

HTML5 PARAMETERS FOR DIRECT LINK

  • &use_html5=1
    Use HTML5 version of VideoApps
  • &layout=default
    &layout=wall
    Check examples below for default layout and wall layout.
  • &theme=light
    &theme=dark
    Additional theme colours are also available: blue, orange, deep-purple and lime. Light theme is default.
  • &is_inversed=1
    Inversed text colors. Use for VideoApp embedded on sites with dark backgrounds.
  • Direct link is always responsive
    Responsive layout takes 100% width and automatically calculates height depending on screen sizes. Recommended for responsive websites.
  • &is_vertical=1
    Force player to always stay above thumbs, regardless of VideoApps size.
  • &one_thumb_per_row=1
    Force thumbs width to 100%, regardless of VideoApps size. Always one thumb per row.

Layout: Default / Theme: Light

VideoApps Default Layout
Live demo

Layout: Wall / Theme: Dark

VideoApps Video Wall
Live demo
Share this Post: