customisation features - fluid player player, the free open source html5 video player has been...

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 resolutionsFluid Player supports multiple resolutions: 480p, 720p and 1080p.

1080p720p480p

AutoplayFluid Player supports autoplay.

AUTOPLAY



<video id=”video-autoplay” controls>


</video>

<script>

var video = fluidPlayer(

‘video-autoplay’,

‘’,

{

autoPlay: true

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Autoplay code

LogoFluid 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.



<video id=”video-logo” controls>


</video>

<script>

var testVideo = fluidPlayer(

‘video-logo’,

‘’,

{

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

logoPosition: ‘top right’,

logoOpacity: .3

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Logo code



<video id=”video-logo” controls>


</video>

<script>


‘video-logo’,

‘’,

{

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

logoPosition: ‘top right’,

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

logoOpacity: .3

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

...Make it clickable

Ad textFluid Player can feature an additional ad text message in the top right corner of the video ad.

YOUR MESSAGE HERE



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


</video>

<script>

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


‘video-ad-text’,

my_vast_url,

{

adText: ‘YOUR MESSAGE HERE’

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Ad text code

Ad text CTAFluid Player can feature an additional Call To Action ad text message in the bottom left corner

of the video ad.

YOUR CTA HERE!

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



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


</video>

<script>


‘video-html-on-pause’,

‘’,

{

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

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

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Custom HTML Banner code

Fully responsive playerFluid Player supports fully responsive mode (disabled by default). The player will adapt to any

resolution, easily testable by resizing the browser window.



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


</video>

<script>


‘video-fully-responsive’,

‘’,

{

responsive: true

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Fully responsive player code

SkinnableFluid 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)



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


</video>

<script>


‘video-control-bar’,

‘’,

{

controlBar: {

autoHide: true,

autoHideTimeout: 5,

animated: true

}

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

Control Bar Hiding

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



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


</video>

<script>


‘video-key-control’,

‘’,

{

keyboardControl: false

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Keyboard Controls

VAST Improvementsand 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):

https://github.com/fluid-player/fluid-player/blob/master/docs/demo/vastLinear.xml



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


</video>

<script>


‘video-ad-list’, ‘’,

{

adList: [

{

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

},

{

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

}

],

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

VAST Improvements and Timeline seeking



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


</video>

<script>


‘video-ad-list’,

‘’,

{

adList: [

{

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

},

{

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

}

],

}

);

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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:

Get Fluid Playerfor free on Github

CLICK HERE TO

https://github.com/fluid-player/fluid-player

https://github.com/fluid-player/fluid-player

customisation features - fluid player player, the free open source html5 video player has been...

Documents