Showing source for: https://www.fluidplayer.com/
Duration: 0.036973s
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-1271af5179.css">

            <script type="text/javascript" src="/build/js/bundle-e0b7a8479a.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() {
                                localStorage.setItem("fluidTheatre", "false");
                                // 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": false,
                                        "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": false,
                                        "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": false,
                                        "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": false,
                                        "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>
                        </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
            },
            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;
                }

            });

            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 - 80
                }, 1000, function() {
                    window.location.hash = hash;
                })
            }
        }

        $(window).on('load', function(event) {
            var wlh = window.location.hash;
            var wlg = wlh.substr(1, wlh.length);
            var wlgElem = $('a[aria-controls="' + wlg + '"]');
            if(wlgElem.length) { // Scroll to specific section open on demo section
                $('a[aria-controls="' + wlg + '"]').click();
                scrollTo(event, true, '#demo');
                return;
            }
            if(!!demoPlayer) {
                demoPlayer.destroy();
            }
            demoPlayer = fluidPlayer("video-overview", options);
            updateOptions();
            scrollTo(event, true, wlh);
        });

        $("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-vs-videojs"><img src="/blog/fluidplayer-vs-videojs.png" class="img-responsive"></a>
                        <div class="article-data">
                            <a href="/articles/fluidplayer-vs-videojs"><h4>Fluid Player vs Video.JS</h4></a>
                                <p>In this article we compare Fluid Player’s features with Video.JS, both are great video players, we test them both to show you the pros and cons in order to help you decide which one to use as your website’s video player.</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/fluidplayer-vs-jwplayer"><img src="/blog/fluidplayer-vs-jwplayer.png" class="img-responsive"></a>
                        <div class="article-data">
                            <a href="/articles/fluidplayer-vs-jwplayer"><h4>Fluid Player vs JW Player</h4></a>
                                <p>Monetizing video content needs a good HTML video player that has industry standard features. Click to read our comparison of these two market leaders. </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/fluidplayer-101-publishers"><img src="/blog/FP-fluidplayer-101.png" class="img-responsive"></a>
                            <div class="article-data">
                                <a href="/articles/fluidplayer-101-publishers"><h4>Fluid Player 101 for Publishers</h4></a>
                                <p>Everything you need to know about Fluid Player and how to use it as your video player to monetize your video content with industry standard video advertising.</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('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>

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

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
    var contactPost = '/contact/';
</script>
</body>
</html>

Latest requests

# Url Url Source Date
1 https://www.fluidplayer.com/ 2024-03-28 21:09:37
2 https://thebolditalic.com/?gi=b8bf… 2024-03-28 21:09:34
3 https://thebolditalic.com/?gi=08c6… 2024-03-28 21:09:30
4 https://thebolditalic.com/?gi=622d… 2024-03-28 21:09:26
5 https://thebolditalic.com/?gi=269d… 2024-03-28 21:09:25
6 https://thebolditalic.com/?gi=f194… 2024-03-28 21:09:22
7 https://thebolditalic.com/?gi=e79b… 2024-03-28 21:09:18
8 https://mmsi-pkc.auth0.com/login?s… 2024-03-28 21:09:14
9 https://thebolditalic.com/?gi=3a15… 2024-03-28 21:09:14
10 https://thebolditalic.com/?gi=f70f… 2024-03-28 21:09:10
11 https://thebolditalic.com/?gi=8431… 2024-03-28 21:09:06
12 https://thebolditalic.com/?gi=ca7e… 2024-03-28 21:09:04
13 https://thebolditalic.com/?gi=f007… 2024-03-28 21:09:02
14 https://thebolditalic.com/?gi=d886… 2024-03-28 21:08:58
15 https://thebolditalic.com/?gi=51e1… 2024-03-28 21:08:54
16 https://thebolditalic.com/?gi=a142… 2024-03-28 21:08:50
17 https://thebolditalic.com/?gi=fe58… 2024-03-28 21:08:46
18 https://thebolditalic.com/?gi=7816… 2024-03-28 21:08:42
19 https://thebolditalic.com/?gi=e326… 2024-03-28 21:08:38
20 https://thebolditalic.com/?gi=995d… 2024-03-28 21:08:34