Showing source for: https://www.fluidplayer.com/
Duration: 0.062168s
Server: nginx

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Fluid Player</title>
    
    <meta name="description" content="Fluid Player, the VAST ready open source HTML5 video player">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

    <link rel="stylesheet" type="text/css" href="/build/css/application-ec57f0aef6.css">

            <script type="text/javascript" src="/build/js/bundle-a40b5f53bd.js"></script>
    
        <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/images/favicons/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/images/favicons/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/images/favicons/manifest.json">
    <link rel="mask-icon" href="/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

    <meta name="theme-color" content="#ffffff">

            <meta property="og:url" content="https://www.fluidplayer.com/" />
        <meta property="og:type" content="website" />
        <meta property="og:title" content="Fluid Player - HTML5 video player" />
        <meta property="og:description" content="Fluid Player, the VAST ready open source HTML5 video player" />
        <meta property="og:image" content="https://www.fluidplayer.com/images/fluid-player-meta.jpg" />

        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="Fluid Player - HTML5 video player">
        <meta name="twitter:description" content="Fluid Player, the VAST ready open source HTML5 video player">
        <meta name="twitter:image" content="https://www.fluidplayer.com/images/fluid-player-meta.jpg">
        <meta name="twitter:domain" content="">
    
    <!-- Begin Cookie Consent plugin by Silktide - http://silktide.com/cookieconsent -->
<script type="text/javascript">
    window.cookieconsent_options = {
        "message":"This website uses cookies to ensure you get the best experience on our website",
        "dismiss":"Got it!",
        "learnMore":"More info",
        "link":'/privacy-policy/#c8',
        "theme":"light-bottom"
    };
</script>

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/1.0.10/cookieconsent.min.js"></script>
<!-- End Cookie Consent plugin -->
</head>

<body id="home" class="">

<header class="site-header" role="banner">
    <nav class="navbar navbar-fixed-top" role="navigation">
    <div class="container-fluid">
    <div class="col-xl-12 col-xl-offset-0 col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0">
        <div class="navbar-header">
            <a class="navbar-brand" href="https://www.fluidplayer.com/">
                <img alt="logo-color" src="/images/logo.png">
            </a>

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="sr-only">Toggle navigation</span>
            </button>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
            <ul class="navbar-nav">
                <li>
                    <a class="active" href="/#overview">
                        Overview
                    </a>
                </li>
                <li>
                    <a href="/#demo">
                        Player
                    </a>
                </li>
                <li>
                    <a href="/articles/">
                        Articles
                    </a>
                </li>
                <li>
                    <a class="" href="/faq/">
                        FAQ
                    </a>
                </li>
                <li>
                    <a href="https://github.com/fluid-player/fluid-player" rel="noopener" target="_blank">
                        GitHub
                    </a>
                </li>
                <li>
                    <a class="btn btn-default" href="https://docs.fluidplayer.com/" rel="noopener" target="_blank">
                        Documentation
                    </a>
                </li>
            </ul>
        </div>
    </div>
    </div>
</nav>
</header>


    <main class="content" role="main">

        <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container-fluid header">
    <div class="row">
        <div class="col-md-7 col-md-offset-1 mobile-player-view">
            <h1>The free open source<br>HTML 5 video player</h1>
            <div class="mobile-player">
                <div class="mobile-player-wrap">
                    <div class="mobile-player-mask">
                        <div class="mobile-player-mask-notch">
                            <div class="mp-cam"></div>
                            <div class="mp-speaker"></div>
                            <div class="mp-cam"></div>
                            <div class="mp-cam"></div>
                        </div>
                        <div class="mobile-player-mask-buttons">
                            <div class="mp-sidebutton"></div>
                            <div class="mp-sidebutton"></div>
                        </div>
                        <div class="mp-skip-ad-wrapper">
                            <a class="mp-skip-ad" href="javascript:void(0)">Skip ad</a>
                        </div>
                        <video class="fluid_video_wrapper" id="video-header-1"> <source src="/videos/Pre-Roll_intro_Giles.mp4" type="video/mp4"/> </video>
                        <video class="fluid_video_wrapper" id="video-header-2"> <source src="/videos/Pre-Roll_intro2_Giles.mp4" type="video/mp4"/> </video>
                        <video class="fluid_video_wrapper" id="video-header-3"> <source src="/videos/In-video-Banner.mp4" type="video/mp4"/> </video>
                        <video class="fluid_video_wrapper" id="video-header-4"> <source src="/videos/Thumbnail.mp4" type="video/mp4"/> </video>
                        <video class="fluid_video_wrapper" id="video-header-5"> <source src="/videos/Livestreaming.mp4" type="video/mp4"/> </video>
                        <video class="fluid_video_wrapper" id="video-header-6"> <source src="/videos/API.mp4" type="video/mp4"/> </video>
                        <script>
                            $(document).ready(function() {

                                // Default options and structure
                                var headerOptions = {
                                    "layoutControls": {
                                        "controlBar": {
                                            "autoHideTimeout": 5,
                                            "animated": true,
                                            "autoHide": false
                                        },
                                        "logo": {
                                            "imageUrl": null,
                                            "position": "top left",
                                            "clickUrl": null,
                                            "opacity": 1
                                        },
                                        "htmlOnPauseBlock": {
                                            "html": null,
                                            "height": null,
                                            "width": null
                                        },
                                        "autoPlay": false,
                                        "mute": false,
                                        "allowTheatre": true,
                                        "playPauseAnimation": true,
                                        "playbackRateEnabled": true,
                                        "allowDownload": true,
                                        "playButtonShowing": true,
                                        "fillToContainer": true,
                                        "posterImage": ""
                                    },
                                    "vastOptions": {
                                        "adList": [],
                                        "adCTAText": false,
                                        "adCTATextPosition": ""
                                    }
                                };

                                var headerOptionsT = {
                                    "layoutControls": {
                                        "controlBar": {
                                            "animated": false,
                                            "autoHide": false
                                        },
                                        "logo": {
                                            "imageUrl": null,
                                            "position": "top left",
                                            "clickUrl": null,
                                            "opacity": 1
                                        },
                                        "htmlOnPauseBlock": {
                                            "html": null,
                                            "height": null,
                                            "width": null
                                        },
                                        "autoPlay": false,
                                        "mute": false,
                                        "allowTheatre": true,
                                        "playPauseAnimation": true,
                                        "playbackRateEnabled": true,
                                        "allowDownload": true,
                                        "playButtonShowing": true,
                                        "fillToContainer": true,
                                        "posterImage": "",
                                        "timelinePreview": {
                                            "file": "/videos/160p.vtt",
                                            "sprite": "/videos/160p-00001.jpg",
                                            "type": "VTT"
                                        }

                                    },
                                    "vastOptions": {
                                        "adList": [],
                                        "adCTAText": false,
                                        "adCTATextPosition": ""
                                    }
                                };

                                var headerOptionsN = {
                                    "layoutControls": {
                                        "logo": {
                                            "imageUrl": null,
                                            "position": "top left",
                                            "clickUrl": null,
                                            "opacity": 1
                                        },
                                        "htmlOnPauseBlock": {
                                            "html": null,
                                            "height": null,
                                            "width": null
                                        },
                                        "autoPlay": false,
                                        "mute": false,
                                        "allowTheatre": true,
                                        "playPauseAnimation": true,
                                        "playbackRateEnabled": true,
                                        "allowDownload": true,
                                        "playButtonShowing": true,
                                        "fillToContainer": true,
                                        "posterImage": ""
                                    },
                                    "vastOptions": {
                                        "adList": [],
                                        "adCTAText": false,
                                        "adCTATextPosition": ""
                                    }
                                };

                                // Vast - In Video banner
                                var headerOptionsInVideo = {
                                    "layoutControls": {
                                        "controlBar": {
                                            "autoHideTimeout": 5,
                                            "animated": true,
                                            "autoHide": false
                                        },
                                        "logo": {
                                            "imageUrl": null,
                                            "position": "top left",
                                            "clickUrl": null,
                                            "opacity": 1
                                        },
                                        "htmlOnPauseBlock": {
                                            "html": null,
                                            "height": null,
                                            "width": null
                                        },
                                        "autoPlay": false,
                                        "mute": false,
                                        "allowTheatre": true,
                                        "playPauseAnimation": true,
                                        "playbackRateEnabled": true,
                                        "allowDownload": true,
                                        "playButtonShowing": true,
                                        "fillToContainer": true,
                                        "posterImage": ""
                                    },
                                        "vastOptions": {
                                            "adList" : [{
                                                "valign" : "bottom", //only for In-Video
                                                "roll" : "preRoll",
                                                "vastTag" : "https://syndication.exoclick.com/splash.php?idzone=2933940",
                                                "nonlinearDuration" : "5",
                                                "timer" : "5"
                                            }]
                                        }
                                };


                                var player = [];
                                var fplayer = [];

                                player[1] = 'video-header-1';
                                player[2] = 'video-header-2';
                                player[3] = 'video-header-3';
                                player[4] = 'video-header-4';
                                player[5] = 'video-header-5';
                                player[6] = 'video-header-6';

                                fplayer[1] = fluidPlayer(player[1], headerOptions);
                                fplayer[2] = fluidPlayer(player[2], headerOptions);
                                fplayer[3] = fluidPlayer(player[3], headerOptionsInVideo);
                                fplayer[4] = fluidPlayer(player[4], headerOptionsT);
                                fplayer[5] = fluidPlayer(player[5], headerOptions);
                                fplayer[6] = fluidPlayer(player[6], headerOptionsN);

                                function nextVideo(v, s) {
                                    $('.video-controls a[data-video="' + v + '"]').click();
                                    if(s) {
                                        fplayer[1].pause();
                                    }
                                }

                                function showSkipAd(pos) {
                                    if(pos == "in") {
                                        $('.mp-skip-ad').addClass('in');
                                        setTimeout(function() {
                                            $('.mp-skip-ad').animate({
                                                right:0
                                            });
                                        }, 1000);
                                    } else {
                                        nextVideo(2, false);
                                        $('.video-controls li:nth-child(1)').addClass('active');
                                        $('.mp-skip-ad').animate({
                                            right: ($(this).width() - ($(this).width() * 2))
                                        });
                                    }
                                }

                                $('.fluid_video_wrapper').click(function() {
                                    let videoId = parseInt($(this).attr('id'));
                                    if($(this).attr('id') == "fluid_video_wrapper_video-header-1" && !$('.mp-skip-ad').hasClass('in')){
                                        showSkipAd('in');
                                    }
                                    /*if($(this).attr('id') != "fluid_video_wrapper_video-header-1" && $('.mp-skip-ad').hasClass('in')) {
                                        $('.mp-skip-ad').css({
                                            right: ($(this).width() - ($(this).width() * 2))
                                        });
                                    }*/
                                });

                                fplayer[1].on("ended", function() { nextVideo(2, false) });
                                fplayer[2].on("ended", function() { nextVideo(3, false) });
                                fplayer[3].on("ended", function() { nextVideo(4, false) });
                                fplayer[4].on("ended", function() { nextVideo(5, false) });
                                fplayer[5].on("ended", function() { nextVideo(6, false) });
                                fplayer[6].on("ended", function() { nextVideo(1, true) });

                                // Controls

                                var nv;

                                $('.video-controls a').click(function() {
                                    $('.video-controls li').removeClass('active');
                                    $(this).closest('li').addClass('active');
                                    nv = $(this).data('video');
                                    for(i = 1 ; i <= 6 ; i++ ) {
                                        fplayer[i].pause();
                                    }
                                    $('.mobile-player video:visible').stop().fadeOut(1000, function() {
                                        for(a = 1 ; a <= 6 ; a++ ) {
                                            document.getElementById('video-header-' + a).currentTime = 0;
                                        }
                                        if(nv == 1) {
                                           showSkipAd('in');
                                        } else {
                                            $('.mp-skip-ad').css({
                                                right: ($(this).width() - ($(this).width() * 2))
                                            });
                                        }
                                        $('#video-header-' + nv).stop().fadeIn();
                                        fplayer[nv].skipTo(0);
                                        fplayer[nv].play();
                                    });
                                });

                                $('.mp-skip-ad').on('click', function() {
                                    showSkipAd('out');
                                });

                            });

                        </script>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-offset-1 flex mobile-player-controls">
            <div class="control-wrapper">
                <ul class="video-controls">
                    <li class="active"><a data-video="1" class="demo-button" href="javascript:void(0)">Pre-roll</a></li>
                    <li class="hide"><a href="javascript:void(0)" class="demo-button" data-video="2">Skip Ad</a></li>
                    <li><a href="javascript:void(0)" class="demo-button" data-video="3">In-video banner</a></li>
                    <li><a href="javascript:void(0)" class="demo-button" data-video="4">Thumbnail</a></li>
                    <li><a href="javascript:void(0)" class="demo-button" data-video="5">Livestreaming</a></li>
                    <li><a href="javascript:void(0)" class="demo-button" data-video="6">API</a></li>
                </ul>
                <a href="/#demo" class="btn btn-default">Discover more</a>
            </div>
        </div>

        <div class="lamp">
            <div class="lava">
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob"></div>
                <div class="blob top"></div>
                <div class="blob bottom"></div>
            </div>
        </div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="blob-image">
            <defs>
                <filter id="goo">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
                    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
                    <feBlend in="SourceGraphic" in2="goo" />
                </filter>
            </defs>
        </svg>
    </div>
</div>
        <div class="container features" id="overview">
    <h2>Overview</h2>
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="feature">
                <img src="/images/svg/VAST.svg">
                <h3>Compatible with video advertising <br>industry standards <a target="_blank" href="https://docs.fluidplayer.com/ad_configuration/">VAST</a> and <a target="_blank" href="https://docs.fluidplayer.com/docs/configuration/ads/#vpaid">VPAID</a> </h3>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="feature">
                <img src="/images/svg/integration.svg">
                <h3>Integrate our <a target="_blank" href="https://wordpress.org/plugins/fluid-player/">WordPress Plugin</a> <br>and <a target="_blank" href="https://docs.fluidplayer.com/docs/integration/quick-setup/#integration-using-cdn">CDN hosted player</a> </h3>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="feature">
                <img src="/images/svg/manipulation.svg">
                <h3>Enables easy <a target="_blank" href="https://docs.fluidplayer.com/docs/configuration/layout/">manipulation</a> of a number <br>of properties after initialisation</h3>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 text-center">
            <div class="feature">
                <img src="/images/svg/streaming.svg">
                <h3>Video streaming support for  <br>MPEG-DASH and HLS <a target="_blank" href="https://docs.fluidplayer.com/docs/streaming/streaming/">streaming</a> protocols</h3>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="feature">
                <img src="/images/svg/VR.svg">
                <h3><a target="_blank" href="https://docs.fluidplayer.com/docs/configuration/vr/">VR support</a>    </h3>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="feature">
                <img src="/images/svg/frameworks.svg">
                <h3>Support for dynamic <a target="_blank" href="https://docs.fluidplayer.com/docs/integration/quick-setup/">frontend frameworks</a> <br>including Vue.js, React and Angular</h3>
            </div>
        </div>
    </div>
    <div class="col-md-10 col-md-offset-1">
        <div class="col-md-10 col-md-offset-1 text-center">
            <a href="https://docs.fluidplayer.com/" target="_blank" class="btn btn-inline btn-default">Read Documentation</a>
        </div>
    </div>
</div>
        <div class="demo" name="demo" id="demo">
    <div class="container demoWrapper">
        <h3>Player Builder</h3>
        <p class="text-center">Use the builder to see how easy it is to customize Fluid Player while seeing your changes in real-time in the video player<br> on the left, cut and paste the code created in the code generator box below the player to insert into your website</p>
        <a class="github" href="https://github.com/fluid-player/fluid-player" target="_blank"><img src="/images/github-logo.png" alt="Visit on Github" /></a>
        <div class="row">
            <div class="col-md-7">
                <div id="videoWrapper">
                    <video id="video-overview" style="height:326px" > <source src="https://cdn.fluidplayer.com/videos/valerian-480p.mkv" type="video/mp4"/> </video>
                </div>
                <div class="codeWrapper">
                <pre id="videoCode" class="videoCode">
<code>
&lt;script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"&gt;&lt;/script&gt;
&lt;video id="video-id"&gt;&lt;source src="video.mp4" type="video/mp4" /&gt;
&lt;script&gt;
    var myFP = fluidPlayer(
        'video-id',<div id="jsCode"></div>
&lt;/script&gt;</code></pre>
                    <textarea class="finalCode" readonly></textarea> <a class="btn btn-default copy-code">Copy code</a></div>
            </div>
            <div class="col-md-5">
                <div class="demoControls">

                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a class="demo-button" href="#demoControls" aria-controls="demoControls" role="tab" data-toggle="tab">Controls</a></li>
                        <li role="presentation"><a class="demo-button" href="#demoStyle" aria-controls="demoStyle" role="tab" data-toggle="tab">Style</a></li>
                        <li role="presentation"><a class="demo-button" href="#demoHtml" aria-controls="demoHtml" role="tab" data-toggle="tab">On-pause html</a></li>
                        <li role="presentation"><a class="demo-button" href="#demoAdvertising" aria-controls="demoAdvertising" role="tab" data-toggle="tab">Advertising</a></li>
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane active" id="demoControls">
                            <div class="row">
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="autoplay">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="When set to true the video will play automatically when the page loads.">Autoplay</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="mute" checked>
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Set this parameter to true to have the video muted by default.">Mute On load</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="theatre" checked>
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Theatre mode alters the size of the player, showing a full screen width and 60% screen height player instead.">Theatre mode</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="autohide" checked>
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Enable/disable autohide function for control bar.">Autohide controls</span>
                                        </label>
                                    </div>
                                                                    </div>
                                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">

                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="playpause">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="There is a Play / Pause animation that can be disabled using this parameter.">Play/Pause animation</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="playback" >
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Fluid Player allows the users to change the playback rate / speed of the video. ">Playback speed</span>
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="download">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="False by default, this option will allow users to download the video shown in the Fluid Player.">Download</span>
                                        </label>
                                    </div>

                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="playbutton">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="By default the play button will show in the middle of the player. To hide the button this option can be set to false.">Show play button</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="demoStyle">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="checkbox textLabel primaryColor">
                                        <label>
                                            <span data-toggle="tooltip" title="Primary color affects the following areas of the Fluid Player: <br><br> - Play button showing before video play (Default: grey)</li>
<br>- Play and pause animations and video toggle (Default: grey)
<br>- Video played progress bar (Default: white)
<br>- User defined ad text (Default: black)">Primary color</span>
                                            <input type="text" placeholder="#000000" value="">
                                        </label>
                                    </div>
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="The poster attribute for videos allows an image to be shown before the video plays. This can be set as a Fluid Player parameter. By default it will be set to false, and show no image.">Poster image</span>
                                            <input type="text" class="textFile" placeholder="/path/to/image.png" value="">
                                            &nbsp;&nbsp; <div class="hide clear-selection">(<a href="javascript:void(0)"><small>Clear selection</small></a>)</div>
                                            <input type="file" accept="image/x-png,image/gif,image/jpeg" style="display: none;" value="">

                                        </label>
                                        <div class="alert alert-danger" role="alert">
                                            <strong>Demo file</strong>  The demo file size must be lower than 2MB.
                                        </div>
                                    </div>
                                    <div class="container"><small>* Demo file max size: 2MB</small></div>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="fill">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="If the Fluid Player is placed into a container on your page you can use this parameter to fill to the size of that container. Set this parameter to true to set the width and height to 100%.">Fill container div</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="logo">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="The logo option allows you to show an image overlaid in the corner of the player. There are 4 options that can be set to configure this logo.">Display logo</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="demoHtml">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="textLabel primaryColor htmlText">
                                        <textarea type="text" placeholder="Type something"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="Defines in px the height of the html container.">Height</span>
                                            <input type="text" class="textSize" placeholder="0" value="">
                                            <span class="add-on">px</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="Defines in px the width of the html container.">Width</span>
                                            <input type="text" class="textSize width" placeholder="0" value="">
                                            <span class="add-on">px</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div role="tabpanel" class="tab-pane" id="demoAdvertising">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="preroll">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Set to true to enable pre-roll ad.">Pre-roll</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="midroll">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Set to true to enable mid-roll ad.">Mid-roll</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="postroll">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Set to true to enable post-roll ad.">Post-roll</span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="onpauseroll">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Set to true to enable on pause roll ad.">On pause roll</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" value="" data-control="ctaadmsg">
                                            <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
                                            <span data-toggle="tooltip" title="Set to true will include extra CTA text.">CTA ad text msg</span>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="">Pre-roll URL</span>
                                            <input type="text" class="textUrl" data-control="prerollurl" placeholder="Paste URL here" value="">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="">Mid-roll URL</span>
                                            <input type="text" class="textUrl" data-control="midrollurl" placeholder="Paste URL here" value="">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="">Post-roll URL</span>
                                            <input type="text" class="textUrl" data-control="postrollurl" placeholder="Paste URL here" value="">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="checkbox textLabel">
                                        <label>
                                            <span data-toggle="tooltip" title="">On pause-roll URL</span>
                                            <input type="text" class="textUrl" data-control="onpauserollurl" placeholder="Paste URL here" value="">
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="textLabel textSpecial">
                                        <label>
                                            <span data-toggle="tooltip" title="">Ad text position</span>
                                        </label>
                                        <div class="btn-group btn-group-vertical" role="group" aria-label="">
                                            <div class="btn-group" role="group">
                                                <button type="button" class="ctaposition btn btn-sm btn-primary active" data-control-value="top">Top</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="ctaposition btn btn-sm btn-primary" data-control-value="left">Left</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="ctaposition btn btn-sm btn-primary" data-control-value="top right">Top right</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="ctaposition btn btn-sm btn-primary" data-control-value="bottom left">Bottom left</button>
                                            </div>
                                            <div class="btn-group" role="group">
                                                <button type="button" class="ctaposition btn btn-sm btn-primary" data-control-value="bottom right">Bottom right</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-7">
                                    <div class="textLabel ctaTextArea">
                                        <label>
                                            <span data-toggle="tooltip" title="Custom text can be shown when an in-stream ad plays. This text appears in the top left corner of the player and will be set to the primary colour.">CTA ad text</span>
                                        </label>
                                        <textarea class="adCTAText" placeholder="Type something..."></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    // Default options and structure
    var options = {
        layoutControls: {
            controlBar: {
                autoHideTimeout:    3,
                animated:           true
            },
            logo: {
                imageUrl:           null,
                position:           'top left',
                clickUrl:           null,
                opacity:            1
            },
            htmlOnPauseBlock: {
                html:               null,
                height:             null,
                width:              null
            },
        },
        vastOptions: {
            adList: '',
            adCTAText: false,
            adCTATextPosition: '',
        }
    };

    var demoOptions;
    var demoPlayer = null;

    $(document).ready(function() {
        var control = {};
        function updateOptions() {

            setOptions();

            if (options.layoutControls.posterImage != '' && typeof (options.layoutControls.posterImage) != "undefined") {
                demoOptions.layoutControls.posterImage = 'your-real-file-here.png';
            } else {
                demoOptions.layoutControls.posterImage = '';
            }

            $('#jsCode').text("\t" + JSON.stringify(demoOptions, null, '\t'));
            $('.finalCode').text($('#videoCode').text());

            let video = $("#video-overview").clone();
            if(!!demoPlayer) {
                demoPlayer.destroy();
                $('#videoWrapper').append(video);
                demoPlayer = fluidPlayer("video-overview", options);
            }
        }


        $('.demo input[type="checkbox"]').on('click', function() {
            setOptions();
            updateOptions();
        });

        function setOptions() {

            $('.demo input[type="checkbox"]').each(function() {
                let actionName = $(this).data('control');
                control[actionName] = $(this).is(':checked');
            });

            var adList = [];

            $.each(control, function(e,i)
            {
                if(e == "autoplay") {
                    options.layoutControls.autoPlay = i;
                }
                if(e == "mute") {
                    options.layoutControls.mute = i;
                }
                if(e == "theatre") {
                    options.layoutControls.allowTheatre = i;
                }
                if(e == "keyboards") {
                    options.layoutControls.keyboardControl = i;
                }
                if(e == "playpause") {
                    options.layoutControls.playPauseAnimation = i;
                }
                if(e == "playback") {
                    options.layoutControls.playbackRateEnabled = i;
                }
                if(e == "download") {
                    options.layoutControls.allowDownload = i;
                }
                if(e == "playbutton") {
                    options.layoutControls.playButtonShowing = i;
                }

                if(e == "preroll") {
                    if(i == true) {
                        let preroll = {
                            roll:'preRoll',
                            vastTag: $('input[data-control="prerollurl"]').val(),
                            adText: ''
                        };
                        adList.push(preroll);
                    }
                }

                if(e == "midroll") {
                    if(i == true) {
                        let midroll = {
                            roll:'midRoll',
                            vastTag: $('input[data-control="midrollurl"]').val(),
                            adText: ''
                        };
                        adList.push(midroll);
                    }
                }

                if(e == "postroll") {
                    if(i == true) {
                        let postroll = {
                            roll:'postRoll',
                            vastTag: $('input[data-control="postrollurl"]').val(),
                            adText: ''
                        };
                        adList.push(postroll);
                    }
                }

                if(e == "onpauseroll") {
                    if(i == true) {
                        let onpauseroll = {
                            roll:'onPauseRoll',
                            vastTag: $('input[data-control="onpauserollurl"]').val(),
                            adText: ''
                        };
                        adList.push(onpauseroll);
                    }
                }

                options.vastOptions.adList = adList;

                if(e == "ctaadmsg") {

                    options.vastOptions.adCTAText = false;
                    options.vastOptions.adCTATextPosition = '';
                    if(i == true) {
                        if($('.adCTAText').val() != '') {
                            options.vastOptions.adCTAText = $('.adCTAText').val();
                            options.vastOptions.adCTATextPosition = $('.btn-primary.active').data('control-value');
                        }
                    }
                }

                if(e == "autohide") {
                    options.layoutControls.controlBar.autoHide = i;
                    if(i == true) {
                        options.layoutControls.controlBar.autoHideTimeout = 3;
                    }
                }

                if(e == "controlbar" && i == true) {
                    options.layoutControls.controlBar.autoHide = false;
                    options.layoutControls.controlBar.animated = false;
                    options.layoutControls.controlBar.autoHideTimeout = 0;
                }
                if(e == "fill") {
                    options.layoutControls.fillToContainer = i;
                }
                if(e == "logo" && i == true) {
                    options.layoutControls.logo.imageUrl = '/images/logo.png';
                } else if (e == "logo" && i == false)
                {
                    options.layoutControls.logo.imageUrl = null;
                }
            });

            demoOptions = JSON.parse(JSON.stringify(options));

        }

        $('.htmlText textarea').on('keyup', function() {
            options.layoutControls.htmlOnPauseBlock.html = $(this).val();
            updateOptions();
        });

        $('.textSize').on('keyup', function() {
            if($(this).hasClass('width')) {
                options.layoutControls.htmlOnPauseBlock.width = $(this).val();
            } else {
                options.layoutControls.htmlOnPauseBlock.height = $(this).val();
            }
            updateOptions();
        });

        $('.textLabel .textFile').on('click', function() {
            $(this).blur();
            $('.textLabel').find('input[type="file"]').click();
        });

        $('.textLabel input[type="file"]').on('change', function(e) {
            let newVal = e.target.files[0].name;
            $(this).parent().find('.textFile').attr('placeholder', newVal);

            var elm = this,
                img = elm.files[0],
                fileSize = img.size;
            var reader = new FileReader(),
                binary, base64;

            if(fileSize > 2097152) {
                $('.alert').fadeIn();
                return false;
            } else {
                $('.alert').hide();
            }
            reader.addEventListener('loadend', function () {
                binary = reader.result;
                base64 = btoa(binary);
                options.layoutControls.posterImage = 'data:image/jpeg;base64,' + base64;
                $('.clear-selection').removeClass('hide');
                updateOptions();
            }, false);
            reader.readAsBinaryString(img);

        });

        $('.clear-selection').on('click', function() {
            $('.textLabel input[type="file"]').val('');
            $('.textLabel input[type="file"]').parent().find('.textFile').attr('placeholder', '/path/to/image.png').val('');
            $('.clear-selection').addClass('hide');
            options.layoutControls.posterImage = '';
            updateOptions();
        });

        $('#demoAdvertising .btn-primary').on('click', function() {
            $('#demoAdvertising .btn-primary').removeClass('active');
            $(this).addClass('active');
        });

        $('.textUrl,.adCTAText,.ctaposition').on('keyup click', function(){
            updateOptions();
        });

        $('.textLabel.primaryColor').on('keyup', function(){
            options.layoutControls.primaryColor = $(this).find('input').val();
            updateOptions();
        });

        // Extra actions
        $('[data-toggle="tooltip"]').tooltip({html:true, delay: { show: 500, hide: 100 }});

        function scrollTo(event, type, hash) {
            if (type !== false && typeof(hash) != "undefined") {
                $('html, body').stop().animate({
                    scrollTop: $(hash).offset().top - $('nav').height()
                }, 1000, function() {
                    window.location.hash = hash;
                })
            }
        }

        $(window).on('load', function(event) {
            if(!!demoPlayer) {
                demoPlayer.destroy();
            }
            demoPlayer = fluidPlayer("video-overview", options);
            updateOptions();
            scrollTo(event, true, window.location.hash);
        });

        $("a").not('.demo-button').not('.direct-link').on('click', function(event) {
            $('html, body').stop();
            if(this.hash.length > 1) {
                scrollTo(event, true, this.hash);
            }
        });

        var copyTextareaBtn = document.querySelector('.copy-code');

        copyTextareaBtn.addEventListener('click', function(event) {
            var copyTextarea = document.querySelector('.finalCode');
            copyTextarea.focus();
            copyTextarea.select();
            var successful = document.execCommand('copy');

        });

    });
</script>
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
        <div class="blog" name="blog" id="blog">
    <div class="container">
        <h3>Articles</h3>
        <div class="row">
            <div class="articles-group">
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="article-wrapper">
                        <a href="/articles/fluidplayer-updated-v3"><img src="/blog/FP-blog-post.png" class="img-responsive"></a>
                        <div class="article-data">
                            <a href="/articles/fluidplayer-updated-v3"><h4>Fluid Player updated to Version 3</h4></a>
                            <p>Fluid Player, the free, open-source, HTML5 video player has been updated to version 3. The player has undergone a major modernization of the codebase significantly improving code quality and improving the player stability.</p>

                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="article-wrapper">
                        <a href="/articles/fluid-player-vr-vpaid/"><img src="/blog/FP-VR-VPAID.png" class="img-responsive"></a>
                        <div class="article-data">
                            <a href="/articles/fluid-player-vr-vpaid/"><h4>Fluid Player adds vr and vpaid features</h4></a>
                            <p>Fluid Player, the free, open-source, HTML5 video player has released two new features: VR (virtual reality) support and VPAID (video player ad-serving interface definition) support.</p>
                            <!--<a href="/articles/fluid-player-vr-vpaid/" class="read-more">Read more &gt;</a>-->
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-6 col-xs-12">
                    <div class="article-wrapper">
                        <a href="/articles/fluid-player-master-class-1-how-to-use-the-builder"><img src="/blog/FP-Masterclass.png" class="img-responsive"></a>
                        <div class="article-data">
                            <a href="/articles/fluid-player-master-class-1-how-to-use-the-builder"><h4>Fluid Player master class #1: how to use the builder</h4></a>
                            <p>If you are not an expert in writing code, this Master Class will show you how to use the Fluid Player Builder, which allows you to edit some of its key features and automatically generate the code you need to add it to your website.</p>

                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>


            </div>
            <br>
            <div class="text-center"> <a href="/articles/" class="btn btn-default">See all articles</a></div>
        </div>
    </div>
</div>

    </main>


    <footer class="site-footer">
    <div class="container">
        <div class="links pull-left">
            <ul>
                <li>
                    <small class="pull-left">Sponsored by </small><a class="exologo pull-left" href="https://www.exogroup.com" target="_blank"> <img src="/images/svg/exogroup-logo-black.svg" alt="Exogroup"></a>
                </li>
            </ul>
        </div>
        <div class="links pull-right">
            <ul>
                <li>
                    <a href="/privacy-policy/">
                        Privacy policy
                    </a>
                </li>
                <li>
                    <a href="/terms-and-conditions/">
                        Terms &amp; Conditions
                    </a>
                </li>
            </ul>
        </div>
    </div>
</footer>


<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92061033-1', 'auto');
ga('send', 'pageview');
</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />

</body>
</html>

Latest requests

# Url Url Source Date
1 https://www.fluidplayer.com/ 2020-07-08 09:27:07
2 https://www.garotalinda.com.br/ 2020-07-08 09:26:46
3 https://danki.com/ 2020-07-08 09:22:13
4 https://osanto.com.br/ 2020-07-08 09:05:20
5 https://tinder.com/app/likes-you 2020-07-08 08:32:02
6 https://classicthings-india.myshop… 2020-07-08 08:18:15
7 https://kudtkoekiewet.nl/?t=%2Fdum… 2020-07-08 07:57:51
8 https://vk.com/video_ext.php?hash=… 2020-07-08 07:51:33
9 https://noodlemagazine.com/video/c… 2020-07-08 07:42:24
10 https://projectfreetv.fun/episode/… 2020-07-08 07:38:32
11 https://www.gsa-online.de/ 2020-07-08 07:09:26
12 https://fast.com/nl/ 2020-07-08 06:45:41
13 https://membership.myswimmingclub.… 2020-07-08 06:38:42
14 https://uk.godaddy.com/ 2020-07-08 06:24:45
15 http://www.xe-88.asia/ 2020-07-08 06:06:09
16 https://accounts.google.com/Servic… 2020-07-08 06:00:36
17 https://onlyfans.com/21896694/ 2020-07-08 05:57:33
18 https://showcase.fm/ 2020-07-08 05:40:18
19 https://kudtkoekiewet.nl/?t=dumper… 2020-07-08 05:27:25
20 https://kudtkoekiewet.nl/?t=%2Fdum… 2020-07-08 05:11:23