CUSTOMISATION FEATURES

Size: px

Start display at page:

Download "CUSTOMISATION FEATURES"

Jeffrey Elliott
6 years ago
Views:

1 CUSTOMISATION FEATURES

2 Fluid Player, the free open source HTML5 video player has been updated with lots of new features! This document showcases Fluid Player s new features and the code you need to implement each one.

3 Multiple resolutions Fluid Player supports multiple resolutions: 480p, 720p and 1080p. 1080p 720p 480p

4 Multiple resolutions code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-multi-res controls> <source src= title= 720p type= video/mp4 > <source src= title= 360p type= video/mp4 > </video> <script> var video = fluidplayer( video-multi-res,, { layout: default } ); </script>

5 Autoplay Fluid Player supports autoplay. AUTOPLAY

6 Autoplay code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-autoplay controls> </video> <source src= title= 720p type= video/mp4 > <script> var video = fluidplayer( video-autoplay,, { autoplay: true } ); </script>

7 Logo Fluid Player can feature an embedded logo showing for the entire length of the video. It supports different transparency levels and it can be placed in any of the four corners.

8 Logo code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-logo controls> </video> <source src= title= 720p type= video/mp4 > <script> var testvideo = fluidplayer( video-logo,, { logo: logoposition: top right, logoopacity:.3 } ); </script>

9 Ad text Fluid Player can feature an additional ad text message in the top right corner of the video ad. YOUR MESSAGE HERE

10 Ad text code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-ad-text controls> </video> <source src= title= 720p type= video/mp4 > <script> var my_vast_url = ; var testvideo = fluidplayer( video-ad-text, my_vast_url, { adtext: YOUR MESSAGE HERE } ); </script>

11 Ad text CTA Fluid Player can feature an additional Call To Action ad text message in the bottom left corner of the video ad. YOUR CTA HERE!

12 Ad text CTA code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-ad-text-cta controls> </video> <source src= title= 720p type= video/mp4 > <script> var my_vast_url = ; var testvideo = fluidplayer( video-ad-text-cta, my_vast_url, { adctatext : YOUR CTA HERE! } ); </script>

13 Custom HTML Banner A custom HTML banner can be displayed while the video is on pause.

14 Custom HTML Banner code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-html-on-pause controls> </video> <source src= title= 720p type= video/mp4 > <script> var testvideo = fluidplayer( video-html-on-pause,, { htmlonpauseblock : <a href= > <img src= /></a> } ); </script> 18

15 Fully responsive player Fluid Player supports fully responsive mode (disabled by default). The player will adapt to any resolution, easily testable by resizing the browser window.

16 Fully responsive player code 1 2 <link rel= stylesheet href= type= text/css /> <script src= ></script> <video id= video-fully-responsive controls> </video> <source src= title= 720p type= video/mp4 > <script> var testvideo = fluidplayer( video-fully-responsive,, { responsive: true } ); </script>

17 Skinnable Fluid Player s skin is fully customizable (CSS theme), 6 skins are already available: Default, Funky, Metal, Browser, Lady Penelope & Cool Blue from GitHub.

18 CLICK HERE TO Get Fluid Player for free on Github

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks