View
441
Download
27
Category
Preview:
Citation preview
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
<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>
<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>
<script>
var video = fluidPlayer(
‘video-multi-res’,
‘’,
{
layout: ‘default’
}
);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Multiple resolutions code
AutoplayFluid Player supports autoplay.
AUTOPLAY
<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>
<video id=”video-autoplay” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</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.
<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>
<video id=”video-logo” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</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
<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>
<video id=”video-logo” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var testVideo = fluidPlayer(
‘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
<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>
<video id=”video-ad-text” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var my_vast_url = “http://cdn.fluidplayer.com/current/examples/vast.xml”;
var testVideo = fluidPlayer(
‘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!
<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>
<video id=“video-ad-text-cta” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ad text CTA code
Custom HTML BannerA custom HTML banner can be displayed while the video is on pause.
<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>
<video id=”video-html-on-pause” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<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>
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.
<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>
<video id=”video-fully-responsive” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var testVideo = fluidPlayer(
‘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)
<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>
<video id=”video-control-bar” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var testVideo = fluidPlayer(
‘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
<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>
<video id=”video-key-control” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var testVideo = fluidPlayer(
‘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):
<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>
<video id=”video-ad-list” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var testVideo = fluidPlayer(
‘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
<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>
<video id=”video-ad-list” controls>
<source src=”http://cdn.fluidplayer.com/current/examples/video.mp4” title=”720p” type=”video/mp4”>
</video>
<script>
var testVideo = fluidPlayer(
‘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
Recommended