How To Activate Fluid Player -
| Option | Purpose | Example Value | |--------|---------|----------------| | layoutControls.primaryColor | Brand color | "#ff6600" | | layoutControls.playButtonShowing | Show/hide play button | true | | layoutControls.fillToContainer | Stretch to parent container | true | | vastOptions | Enable VAST ads | ["adTagUrl": "https://example.com/ad.xml"] | | playlist | Create a video playlist | ["title":"Video 1", "sources":[...]] | | chromecast | Enable Chromecast support | "enabled": true |
<video id="my-video" controls> <source src="path/to/your-video.mp4" type="video/mp4"> <source src="path/to/your-video.webm" type="video/webm"> Your browser does not support the video tag. </video> After the DOM has loaded, instantiate Fluid Player by calling the constructor and passing the video element’s ID and optional configuration. how to activate fluid player
Check fluidplayer.com for the latest version number. Add a <video> element in the <body> of your page. Give it a unique id and specify your video source(s). | Option | Purpose | Example Value |
var container = document.getElementById('player-container'); var player = fluidPlayer(container, sources: [ src: "video.mp4", type: "video/mp4" ], layoutControls: fillToContainer: true ); | Problem | Likely Cause | Solution | |---------|---------------|----------| | Player doesn’t show | Script error or wrong ID | Check browser console (F12). Ensure video element exists before script runs. | | Video doesn’t play | Wrong file path or unsupported format | Use absolute path. Test .mp4 with H.264 encoding. | | Ads not working | CORS or invalid ad tag | Host ad XML on HTTPS. Test with a known working VAST tag. | | Chromecast missing | Not using HTTPS | Chromecast requires a secure origin (localhost or HTTPS). | 7. Complete Activation Example (Copy-Paste Ready) <!DOCTYPE html> <html> <head> <title>Fluid Player Demo</title> <link rel="stylesheet" href="https://cdn.fluidplayer.com/3.10.0/fluidplayer.min.css"> </head> <body> <div style="max-width: 800px; margin: auto;"> <video id="demo-video" controls> <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4"> </video> </div> <script src="https://cdn.fluidplayer.com/3.10.0/fluidplayer.min.js"></script> <script> fluidPlayer('demo-video', layoutControls: primaryColor: "#28a745", fillToContainer: true ); </script> </body> </html> 8. Conclusion Activation is simple: include the library, add a <video> element, and call fluidPlayer() with the element’s ID. No license keys or server-side setup are required. For advanced use (ads, playlists, Chromecast), refer to the official documentation at docs.fluidplayer.com . Add a <video> element in the <body> of your page
<script> var myFluidPlayer = fluidPlayer('my-video', // Configuration options (see Section 4) layoutControls: primaryColor: "#0099ff", playButtonShowing: true, fillToContainer: false ); </script> The player is now "activated" — it will replace the native HTML5 player with Fluid Player’s custom interface. 4. Common Activation Options (Configuration) You can pass a second argument to fluidPlayer() to enable advanced features:
<!-- Fluid Player CSS --> <link rel="stylesheet" href="https://cdn.fluidplayer.com/3.10.0/fluidplayer.min.css"> <!-- Fluid Player JavaScript --> <script src="https://cdn.fluidplayer.com/3.10.0/fluidplayer.min.js"></script>
fluidPlayer('my-video', layoutControls: primaryColor: "#e67e22" , vastOptions: adList: [ adTagUrl: "ad.xml" ] , playlist: [ title: "Intro", sources: [ src: "intro.mp4" ] ] ); If you want to create a player programmatically: