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 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-multi-res” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 <source src=”http://cdn.fluidplayer.com/current/examples/video360.mp4” title=”360p” type=”video/mp4”>

7 </video>

8
9 <script>

10 var video = fluidPlayer(

11 ‘video-multi-res’,

12 ‘’,

13 {

14 layout: ‘default’

15 }

16 );

17 </script>
 Autoplay
Fluid Player supports autoplay.

AUTOPLAY
 Autoplay code
1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-autoplay” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var video = fluidPlayer(

10 ‘video-autoplay’,

11 ‘’,

12 {

13 autoPlay: true

14 }

15 );

16 </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 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-logo” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var testVideo = fluidPlayer(

10 ‘video-logo’,

11 ‘’,

12 {

13 logo: ‘https://www.fluidplayer.com/images/sample-logo.png’,

14 logoPosition: ‘top right’,

15 logoOpacity: .3

16 }

17 );

18 </script>
 ...Make it clickable
1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-logo” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var testVideo = fluidPlayer(

10 ‘video-logo’,

11 ‘’,

12 {

13 logo: ‘https://www.fluidplayer.com/images/sample-logo.png’,

14 logoPosition: ‘top right’,

15 logoUrl: ‘https://www.fluidplayer.com/’,

16 logoOpacity: .3

17 }

18 );

19 </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 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-ad-text” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var my_vast_url = “http://cdn.fluidplayer.com/current/examples/vast.xml”;

10
11 var testVideo = fluidPlayer(

12 ‘video-ad-text’,

13 my_vast_url,

14 {

15 adText: ‘YOUR MESSAGE HERE’

16 }

17 );

18 </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 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=“text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=“video-ad-text-cta” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var my_vast_url = “http://cdn.fluidplayer.com/current/examples/vast.xml”;

10 var testVideo = fluidPlayer(

11 ‘video-ad-text-cta’,

12 my_vast_url,

13 {

14 adCTAText : ‘YOUR CTA HERE!’

15 }

16 );

17 </script>
 Custom HTML Banner
A custom HTML banner can be displayed while the video is on pause.
 Custom HTML Banner code
1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-html-on-pause” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var testVideo = fluidPlayer(

10 ‘video-html-on-pause’,

11 ‘’,

12 {

13 htmlOnPauseBlock : ‘<a href=”https://www.fluidplayer.com”>

14 <img src=”https://www.fluidplayer.com/images/sample-banner.png” /></a>’

15 }

16 );

17 </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 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3
4 <video id=”video-fully-responsive” controls>

5 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

6 </video>

7
8 <script>

9 var testVideo = fluidPlayer(

10 ‘video-fully-responsive’,

11 ‘’,

12 {

13 responsive: true

14 }

15 );

16 </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.
 Control Bar Hiding

Customisation options now available for the player controls:

Now using autoHide the user will be able to hide the control bar after a few seconds. To do
so it’s necessary to set the value to true to turn the feature on (Default: false). Then if it’s
required to set an specific time to hide this control bar we should use autoHideTimeout in
order to set the number of seconds before hiding the control bar (Default: 3)

In addition setting to true/false the animated feature would enable/disable the fade out
effect (Default: true)
 Control Bar Hiding
1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3 <video id=”video-control-bar” controls>

4 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

5 </video>

6 <script>

7 var testVideo = fluidPlayer(

8 ‘video-control-bar’,

9 ‘’,

10 {

11 controlBar: {

12 autoHide: true,

13 autoHideTimeout: 5,

14 animated: true

15 }

16 }

17 );

18 </script>
 Keyboard Controls

We can also disable the keyboard shortcuts by setting to false the keyboardControl
variable. (Default: true).

Keyboard shortcuts:

• Space/Enter: Pause/Play video playback

• Left/Right arrow: Go back/forward 5 seconds
• Home/End: Go to beginning/end of video
• Numbers 0-9: Skip to a particular section of the
video (e.g., 5 goes to the video midpoint)
• Up/Down arrow: Increase/Decrease volume 5%
• m key: Mute/Unmute video volume
• f key: Go to Full Screen mode
 Keyboard Controls
1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3 <video id=”video-key-control” controls>

4 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

5 </video>

6 <script>

7 var testVideo = fluidPlayer(

8 ‘video-key-control’,

9 ‘’,

10 {

11
12 keyboardControl: false

13
14 }

15 );

16 </script>
 VAST Improvements
and Timeline seeking

adList (VAST only) will allow the user to setup one or multiple VastTag.

Mandatory:
Using the params roll in order to set the timeline positions (preRoll, midRoll, postRoll).
vastTag will be set it with the url of the VAST XML (Please find the supported tags/attributes
vastLinear.xml)

Not mandatory:
The timer (only for mid-roll) it’s the property schedules the Ad plays after the specified number
of seconds (Example timer: 8):
 VAST Improvements and Timeline seeking
1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3 <video id=”video-ad-list” controls>

4 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

5 </video>

6 <script>

7 var testVideo = fluidPlayer(

8 ‘video-ad-list’, ‘’,

9 {

10 adList: [

11 {

12 roll: ‘preRoll’, vastTag: ‘https://syndication.exosrv.com/splash.php?idzone=123456

13 },

14 {

15 roll:‘midRoll’, vastTag:‘https://syndication.exoclick.com/splash.php?idzone=789101, timer:8

16 }

17 ],

18 }

19 );

20 </script>
 timer can be also be set it as a %xx percent of the video content. Note that it is possible
to set multiple mid-roll Ads however only one pre-roll and one post-roll Ad is supported:

1 <link rel=”stylesheet” href=”https://cdn.fluidplayer.com/current/fluidplayer.min.css” type=”text/css”/>

2 <script src=”https://cdn.fluidplayer.com/current/fluidplayer.min.js”></script>

3 <video id=”video-ad-list” controls>

4 <source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>

5 </video>

6 <script>

7 var testVideo = fluidPlayer(

8 ‘video-ad-list’,

9 ‘’,

10 {

11 adList: [

12 {

13 roll:‘midRoll’, vastTag:‘https://syndication.exosrv.com/splash.php?idzone=123456, timer:8

14 },

15 {

16 roll:‘midRoll’, vastTag:‘https://syndication.exoclick.com/splash.php?idzone=789101, timer:‘50%’

17 }

18 ],

19 }

20 );

21 </script>
 CLICK HERE TO

Get Fluid Player

for free on Github