CUSTOMISATION FEATURES

CUSTOMISATION FEATURES

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.

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

Multiple resolutions code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 7 <video id= video-multi-res controls> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > <source src= http://cdn.fluidplayer.com/current/examples/video360.mp4 title= 360p type= video/mp4 > </video> 8 9 10 11 12 13 14 15 16 17 <script> var video = fluidplayer( video-multi-res,, { layout: default } ); </script>

Autoplay Fluid Player supports autoplay. AUTOPLAY

Autoplay code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 <video id= video-autoplay controls> </video> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > 7 8 9 10 11 12 13 14 15 16 <script> var video = fluidplayer( video-autoplay,, { autoplay: true } ); </script>

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.

Logo code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 <video id= video-logo controls> </video> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > 7 8 9 10 11 12 13 14 15 16 17 18 <script> var testvideo = fluidplayer( video-logo,, { logo: https://www.fluidplayer.com/images/sample-logo.png, logoposition: top right, logoopacity:.3 } ); </script>

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

Ad text code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 <video id= video-ad-text controls> </video> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > 7 8 9 <script> var my_vast_url = http://cdn.fluidplayer.com/current/examples/vast.xml ; 10 11 12 13 14 15 16 17 18 var testvideo = fluidplayer( video-ad-text, my_vast_url, { adtext: YOUR MESSAGE HERE } ); </script>

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!

Ad text CTA code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 <video id= video-ad-text-cta controls> </video> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > 7 8 9 10 11 12 13 14 15 16 17 <script> var my_vast_url = http://cdn.fluidplayer.com/current/examples/vast.xml ; var testvideo = fluidplayer( video-ad-text-cta, my_vast_url, { adctatext : YOUR CTA HERE! } ); </script>

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

Custom HTML Banner code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 <video id= video-html-on-pause controls> </video> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > 7 8 9 10 11 12 13 14 15 16 17 <script> var testvideo = fluidplayer( video-html-on-pause,, { htmlonpauseblock : <a href= https://www.fluidplayer.com > <img src= https://www.fluidplayer.com/images/sample-banner.png /></a> } ); </script> 18

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.

Fully responsive player code 1 2 <link rel= stylesheet href= https://cdn.fluidplayer.com/current/fluidplayer.min.css type= text/css /> <script src= https://cdn.fluidplayer.com/current/fluidplayer.min.js ></script> 3 4 5 6 <video id= video-fully-responsive controls> </video> <source src= http://cdn.fluidplayer.com/current/examples/video.mp4 title= 720p type= video/mp4 > 7 8 9 10 11 12 13 14 15 16 <script> var testvideo = fluidplayer( video-fully-responsive,, { responsive: true } ); </script>

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.

CLICK HERE TO Get Fluid Player for free on Github