fluid-player/fluid-player

Fluid Player - an open source VAST compliant HTML5 video player

Fluid Player

Version 3 released

A new major version of Fluid Player has been released on May 20, 2020. Existing version 2 users are recommended to upgrade. See quick setup guide.

Overview

Fluid Player is a free HTML5 video player. It is lightweight, easy to integrate and has advanced VAST capabilities. The idea behind VAST, as well as the full VAST specification, can be found here: VAST 4.0.

Documentation

The integration and configuration of Fluid Player is fully outlined in Fluid Player Documentation

License

Fluid Player is licensed under the MIT License. View the License File.

Changelog

A full list of changes and updates can be found in the project CHANGELOG.

fluid-player's Issues

Demo?

Can you give me a working live demo?

Just wanna see it in action xD

Installing this player on wordpress

Hi can anyone tell how to proceed the step by step and install this player into my wordpress. I dont know where to place the code.

Video malfunction

Hi guys, can you please help me solve this situation: when i upload a video and post the first and second time a got a gray screen with the ad banner in corner upleft in the space should show up the player and no play. I have to update the browser page and then the video player appears, but no longe ad banner. What could this be?

If i place the video in the body of the post it works normally. Appearing the banner, disappear when play and appears at the end.

How to Install FluidPlayer to Weebly

having some trouble installing fluidplayer in weebly, would appreciate some help, thanks!

Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

I trying to integrate FP into my site instead of standard HTML5 player. And I see error in console:
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
at XMLHttpRequest. (fluidplayer.min.js:1)

Part of code: r=a.getElementsByTagName("Impression")

Error happened when we want to use responsive player such as:

  <video id='my-video' controls style="width: 640px; height: 360px;">   <source src='/pages/vid.mp4' type='video/mp4' />   </video>       <script type="text/javascript">   var testVideo = fluidPlayer('my-video','',{responsive:true}); </script>

Empty VAST tag causes this issue. Check it first.

P.S. Sorry, but I don't know why inserting code here doesn't working.

Pictures in the form of single thumbnails

Thanks for the player.
There is not enough support for this type of thumbnails:

<?xml version='1.0' encoding='utf-8'?>
<lists>
<pic src='thumb/1.jpg'/>
<pic src='thumb/2.jpg'/>
<pic src='thumb/3.jpg'/>
</lists>

(pictures in the form of single thumbnails)

iOS iFrame = no fullscreen option in v2

Expected behaviour

The player should offer the same functionalities like fullscreen option also when embedded via iFrame.
Plus the fullscreen option is working not in fullscreen, but inline anyways.

Actual behaviour

On iOS 11/ Safari the fullscreen option is automatically cut-back to the dimension of the inline iFrame once Fluid Player gets loaded inside an iFrame. It is looking very odd as well, when switching into this pseudo "fullscreen" mode. (no offense, your player is working flawlessly about anywhere else)

Environment

• Browser: Safari
• Version: latest
• Operating System: iOS
• Version: 11.2.6

Steps to reproduce

• Fluid Player without iFrame: http://alpine-dash-hls.gq/player/fluid-player.html
• Same Fluid Player loaded via iFrame: http://alpine-dash-hls.gq/demos/fluid-player with allowfullscreen parameter

<iframe src="../../player/fluid-player.html" type="text/html" frameborder="0" allowfullscreen width="100%" height="1080"><p>Failed to load Fluid Player! I'm sorry :(</p></iframe>

HLS Support

First, Great work.

Was wondering if this will support HLS or streaming?

Thank You.

State of buffer

Hi, Thanks for this awesome player.
I need a feature. Other players have a line that show, how much of video downloaded and buffered, I think its good idea to add this feature to Fluid player.
Thanks

htmlOnPauseBlock doesn't work properly

When I use this feature and I start video playback banner appears. I must pause playback and play again for make it disappear.

Help: Syntax for eventhandler

Hi,

we changed from videoJS to Fluidplayer.
We are using an overlay ad and handled it for VideoJS like this:

onClick="$(this).parent().hide(); videojsPlayer.play();
and
videojsPlayer.on("pause", function () {
$('#playerOverlay').show();
});
videojsPlayer.on("play", function () {
$('#playerOverlay').hide();
});

What is the syntax for this in Fluidplayer?
I can't find anything in your documentation.

Regards,

det66

features request

Hello,

thanks for pause roll html, and for quality switcher. Could you also make middle roll html, to show ads while video playing on top or bottom. And also call to action html on the end of the video.

Thanks.

Put Play Button and Loading

Hello, first I want to thank you for an excellent player, but I feel that you need 2 things.

1 play button in the center
and a state of loading so that after clicking the person knows that something is happening.

How can I do these 2 things?

Thank you.

Start screen only image poster and vast on mobile.

1. When you go on a video page
   [REDACTED]
   you do not see any player there only a poster image of the video. So is very difficult for the user to understand where is the video and click.
   Need the control buttons to be always visible before the video is clicked and used to control if he wants the play button or not in the middle.

2. On iPhone after pressing the play button vast advertisement do not starts. Needs to press again the play button. Also, there is no skip button.

controlBar: { autoHide:false

Hello
New code
controlBar: {
autoHide: false,
},
Do not work.

Only when I add.

<style> .fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container { visibility: visible;!important; opacity: 1;!important; } </style>

Fullscreen bug?

When going fullscreen on this page : https://fuckler.com/video/62663/skinny-brunette-gets-hardcore-fun-during-xxx-massage/

I can only see half of the video, the functionality seems to be broken. And when escaping, the control remain as if I was still in fullscreen.

Under Linux. Chrome v60

How do i add 2 video sources?

I tried to read all of instructor but i can't find the solution to add more source or separated for HQ-video button and SD-video.
I can only add just 1 source video on 1 player. Is it possible to add 2 video sources on 1 player?

Install fluid player on clipbucket ?

Hello

Someone know how to integrate fluid player on clipbucket ?

Thx

Guide for adultvideoscript

Hello

do you have any tutorial to install these player on
adultvideoscript script please let us know

Want to install this on my tube site

Use with Revive Adserver inline video fails with error "Access-Control-Allow-Origin' header in the response must not be the wildcard '*'"

I prepared a site with Fluid Player to get VAST data from Revive Adserver. Pre-roll inline video ads do not work and chrome gives an error:

Failed to load http://rigby.ga/www/delivery/fc.php?script=bannerTypeHtml:vastInlineBannerTypeHtml:vastInlineHtml&format=vast&nz=1&zones=pre-roll%3D1: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://rigby.ml' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

Any ideas?
Thanks

More than one VAST tag

Hello, I would like to know if is it posible to put more than one VAST tag. Example: 3 video ads tags. If 1st does not serving video ad calls the second, etc.

Thank you and best regards

Feature Request.

in addition to the nice features implemented ,The ability to add Multi Captions"srt"/"vtt" would be good .

timelinePreview looking thumbnails.jpg from always from the url root

Heya,

Encountered this issue today while looking to integrate the player.

If I set vtt path as follows:

timelinePreview: {
file: 'mysite.com/videos/thumbs/' + videoid + '/thumbnails.vtt',
type: 'VTT'
}

thumbnails.vtt is loaded, but the player is looking the thumbnails.jpg from the site root url "mysite.com/thumbnails.jpg", which naturally is not found as it is in the same directory where the .vtt file is.
Using the CDN and the latest current version of player v2

Fluidplayer Version 2: player is not defined

It says "player is not defined" in the console when using the Fluidplayer Version 2 and calling the fluidPlayer() Function.
How do you fix this?
Thank you.

[fluid-player-extended] shortcodes

Good day,

I am pretty new to coding so I use shortcodes for now.
I installed the fluid player plugin on wordpress, so far the player is running and also working.
My only issue is, I want my video to be played in different quality.
I can't get the shortcodes working for multiple resolution.
so far this is the code i am using:

[fluid-player video=”xxx.mp4″ vast_file=”xxx.xml” layout=”default”]

Can someone please tell me the codes to include the different resolution change?

Thank you.

Fluid Player Not entering true full screen mode on iOS

I installed fluid player about 10 days ago and when i tested it I could have sworn that it entered a true full screen mode which has a slightly different native style to it on ios.

But today i realized this feature wasnt working. Ive torn my site down and played with many config variables for fluid player and I still cant get it to trigger full screen mode.

So i went to the actual fluid player site and it seems as tho the player on their homepage is not entering full screen either.

I though it might be an ios issue so i went to other sites i found that use fluid player. A NSFW site called fuckler.com uses it and its version 1.1 and it seems like it works in true fullscreen perfectly. Below ive attatched pictures of the behavior fluidplayer is showing on full screen. Youll notice that you can see the adresss bar and footer bar in portrain mode on ios and in landscape mode you see the url bar.

Below is the native iOS player that was playing before. This is the functionality that I want and that im almost positive was working with fluid player before. And as i stated this functionality works on the site i found called fuckler.com but i wont post those screenshots because that would be NSFW and innapropriate.

Can someone else confirm this? Is this a change to the API? I noticed a recent changelog entry where there are some changes made to iOS display attributes.

DOMException: Failed to load because no supported source was found

I found that FluidPlayer doesn't working in Chromium browser (but it's working in Chrome). It's make an exception:

test_player.html:85 vast loaded
test_player.html:86 no vast
test_player.html:88 vast ended
test_player.html:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
Promise (async)
switchToMainVideo @ fluidplayer.min.js:1
playMainVideoWhenVastFails @ fluidplayer.min.js:1
onErrorDetection @ fluidplayer.min.js:1

Full Screen On Doubleclick

How can I get player to go fullscreen when doubleclicked on the video? And when in full screen same double click should return player back to normal play size.

Corrections to be applied on

Hi guys, and specially Fiorin the developer

After the recent update the player started to work finally in my template but there is a few issues that remain yet:
in the desktop the video container becomes gray with the banner in the upleft corner. No way to close it. After update the page once or twice the video finallly appears.
This behavior happens in the mobile too, with the banner big ocuppying almost all the video area. The only way to play is to click ouside the banner.

when the video is playing in mobile the fullscreen button is placed over the timeline so its not possible to enlarge it.
When i post a video in the body of the post it , like an article it works perfectly with the banner appearing in center, in pause, etc. as meant to.

By the way this is a brand new installed template, there is no any kind of hack,

On Safari needs to click the play button two times to play a video.

I have found two errors on Safari.

1. Needs to click the play button two times to play a video.
   example: https://www.fluidplayer.com/ This happened also with VAST video.

2. when you change video quality( from SD to HD ). The video starts from the beginning, not from the point that you was watching.

Help with html on pause

Hi, I am new to programming and I want to remove the default play event when an html block displayed on video pause is clicked. The documentation says add e.stopPropagation() to the event. Where exactly should I add this code?

Thanks in advance

skip_button and fluid_ad_cta same position

Hello
Mobile - tablet users can not skip vast ad. The reason is that ad-cta is on top because they have the same bottom position.
.fluid_video_wrapper.mobile .skip_button,.fluid_video_wrapper.mobile .fluid_ad_cta{bottom:75px}

I have fixed it by adding after style file this css code.

<style> .fluid_video_wrapper.mobile .skip_button{bottom:50px} .fluid_video_wrapper.mobile .fluid_ad_cta{bottom:100px} </style>

adText not working

Here's a sample code showing that adText is just not showing:
https://jsfiddle.net/GeekTnT/aLnt1vz8/

BTW: is it possible to do the following:

• display "play" button in the center of the screen before playing the video?
• make the logo image clickable?

thanks

mobile: VAST preroll ad automatically switches to full screen

Hi,
environment: Apple iPhone 7 and 6(s), iOS 11.2, Safari browser
layout: 'browser'
After pressing play all preroll video ads automatically switch to full screen mode and no adText, adCTAText and skip button is shown. After exiting from full screen mode (still preroll) all buttons are there.
This is not happening with Android.

Regards,

det66

several doubts

Hello, I have some doubts:

I want to use the default layout, but how can I make the play button appear in the middle of the video frame?

It is typical, because the controls are hidden and only the image is seen, should always appear the button to play so that it is known that is a video.

The player should let choose the image that I want to show, this is possible or not yet?

How can I create the .vtt file. for each video any specific tool?

Playlist

Is it possible to use playlist (multiple video files) within fluidplayer?
Or switch to another video during playback by clicking a link or somehow?

Help with wordpress integration

`I know that there is a plugin but it does not have a feature that is important to me...html block on pause.

I think I did everything correctly. The css and js are in the header and I made a page and put the

link to the page: http://sprintkings.com/fluid-player-test/

However, everything works fine when I when I use raw html

link to working version: http://sprintkings.com/fluidtest.html

They are basically the same thing, but I can't get it to work in my blog. Could someone tell me what I am doing wrong?

Installation of the new version

In wordpress repository i find the version 1.1.0 but id like to install the last one via zipped github file,but the wordpress dont accept the zip file. ..so i set the folder via ftp into plugin but it ignores dont appear at plugin list. What happens?

fluidPlayer function syntax

Is there any particular reason with the "vastTag" parameter is set as a separate parameter in the function? When using the player without VAST, it makes the function call slightly awkward as it forces you to set an empty parameter before to have the options array.

Why not having it as one more option in the array?

Also, since there are a few options that are specific to VAST, why not having them as a sub-array to group them together?

Just some syntax suggestions...

Fluid Player Vast Issue [In Video Ad Not Showing Up]

<script src="vast.js"></script> <script type="text/javascript"> var testVideo = fluidPlayer( "my-video", "http://syndication.exoclick.com/splash.php?idzone=2893020" ); </script>

VAST Wrappers support

Looks like fluid-player currently not support VAST wrappers through <VASTAdTagURI>

Example: http://am15.net/video.php?s=5459&show=preroll&type=direct

Select source quality

Hello,
is it a function to select video quality for user ?

VAST: Position and fontsize for adCTAText and SkipButton

Hi,

I am using your player for mobile to serve VAST preRoll ads.
Problem is that adCTAText and SkipButton are quite big and are hiding the center part of the video ads.
Is there a possibility to move those buttons to the bottom of the video and maybe reduce the (font)size?

Regards,

Jens

Fluid player controls don't autohide

In pc the fluid player controls dont autohide when the mouse in in frame. This is especially annoying on mobile fullscreen when they cover 1/5th of the screen. Is there any way to fix this?

[Error] (101): Failed to load Vast

What does the error code
[Error] (101): Failed to load Vast
mean and where can I look up all the error codes?

Thanks!

How add image in embed videos? and how add logo in video? fluid-player

some one can help me?

Video playback stops when I change resolution

When I change video resolution the video playback stops. I must click pause button and click play again for continue playback.

Several players on the page with VAST support

Hello!

How I can use more than one player on the page with VAST (and Exoclick InVideo Ad) support? As I understand, in the layout: 'browser' mode I can't use VAST, BTW Exoclick InVideo Ad isn't working too.
In any other layout mode I see [object HTMLDivElement] message before each player on the page.

Thank you!

Video file streaming

Please, tell, how display the video duration and rewind the video file for streaming video? And what are the opportunities for video streaming?

VAST XML without <mediafiles> Tag and Version

I have a VAST XML which works in Googles Video Suite Inspector, but not when I give the same URL to the fluidPlayer Javascript Function.
If a <mediafiles> Tag is present, Fluidplayer works as expected. But without it, it does not and says in the console "[Error] (101): Failed to load Vast" and executes the "noVastVideoCallback" function.
Even though if I add the same XML to https://developers.google.com/interactive-media-ads/docs/sdks/html5/vastinspector it works fine and plays the video.
Any Idea why this is the case?
Also, does fluidplayer support VAST Version 2.0 and 3.0?