Flowplayer is a video player plugin that allows you to embed and play videos on your WordPress site using Flowplayer style. Flowplayer allows you to embed a self-hosted video or any video that is publicly accessible. This player is sleek with a fresh and more functional user interface.
Flowplayer Video Player Info
Requirements
- A self-hosted WordPress site running on a WordPress Optimized Environment.
Installation
You can install the plugin by following one of the two options.
Option 1
- Go to “Plugins->Add New” from your WordPress admin dashboard
- Search for “Flowplayer 6 Video Player”
- Click Install once you have found it
Option 2
- Download the zip version of the plugin
- Go to “Plugins->Add New”
- Click “Upload Plugin”
- Select the zip file on your computer
- Install it
Video Embedding
There is no additional configuration for this plugin. Once you have installed it simply start embedding videos. In order to embed a video in WordPress, create a new post/page and insert the following shortcode:
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4"]
“src” is the source of your video file (The URL of the video). This parameter takes URL to a mp4 video (H264 encoded). Additionally, you can specify path to a webm video for maximum browser compatibility. But that’s optional since mp4 format is recognized by all major browsers and smart mobile devices (iOS, android).
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" webm="http://example.com/wp-content/uploads/videos/test.webm"]
Video Poster
You can use the “poster” parameter to show an image as placeholder before the video plays.
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" poster="http://example.com/wp-content/uploads/images/poster.jpg"]
Video Autoplay
You can automatically start playing a video when the page loads using the “autoplay” parameter.
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" autoplay="true"]
Video Player Size
If no width is specified, the player takes up the whole content area (based on the aspect ratio). However, if you want to customize it you can do so by specifying a width for it:
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" width="480"]
Video Player Ratio
The default ratio of the player is set to “0.417” (16:9). If you have a video with different aspect ratio you can specify it in the shortcode:
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" ratio="0.345"]
Video Loop
If you enable loop option for a video it will loop to the beginning every time it finishes.
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" loop="true"]
Video Demo
This is a screenshot of a video embedded with Flowplayer.
William Gibson says
I have a couple of questions…
1. How to show the play/pause button in the control bar like in the demo picture? There’s nothing about this in the documentation.
2. How to change the color of the progress and volume meters? Because the current “highlighter” blue clashes with my purple website scheme. There’s also nothing about this in the documentation either.
Brian Streetly says
I get sound from the video, but no picture any suggestions please.
admin says
@Brian, Is your video properly encoded with a H264 encoder (e.g. handbrake)?
Corey says
The video does not show up on the mobile site (dealernegotiator.com), any idea why?
admin says
@Corey, I don’t see any flowplayer shortcode on your homepage. It’s just a plain video embedded with HTML5 video tag.
Patrick C Petranech says
We are using Flowplayer 6 and I must say it’s fantastic!! I have one problem when using it on WPTouch for mobile friendly capabilities, a black screen containing a arrow. When the is tapped nothing happens. My setting includes auto start and loop. I checked WP Touch and had me run it on laptop mode and it still did not work leading that the directed me to you.
eion clarke says
can you tell me how to add a tv channel livestream to my website?
admin says
@eion, Unfortunately that’s not possible at the moment.
Doug says
Is there any way to turn off the admin messages?
This was a great feature and it got me to optimize my original HUGE mp4 into webm format and saved me 80mb of file space!
I need this feature b/c the owner of the site always gets tired of seeing the Admin: Video Status Ok at the top left.
Thank you for the good work….
PS: I had to figure a way out to get the player to work in the header of the theme… omg this was easy, you don’t even need a plug-in, simply use:
Thanks again!
Doug says
The poster feature does not work. I have a valid png file specified and it is there on the server. The player using both desktop and android devices are black until you press play.
I even switched the original file (mp4 from webm) and it made no difference.
Thanks!
Doug says
I looked at your code and figured it out.
Somewhere along the line an array was supposed to be changed from ‘poster’ to ‘splash’.
I changed my source to ‘splash’ and the image works great!
[splash='http://mysite/blah/file]Requisite files looked at were frontend.php and shortcodes.php < that's the file where the variable substitution is supposed to take place I guess.
Thank you again!
Asok says
Hello,
I have added MP4 video and it is not playing on iphones. Please advise.
Reference link:
https://www.earthenergywi.com/Thank you
admin says
@Asok, Have you encoded your video properly (H264)? You can use a free tool like handbrake to do this.
Doug says
I have examined the video in question and it is indeed encoded with H264.
Codec: H264 – MPEG-4 AVC (part 10) (avc1)
The issue may be with the Iphone itself. Were you looking for auto-play?
Or do you get no play at all?
tchouente says
hello team
how to enable playlist video and the end loop
admin says
@tchouente, Unfortunately playlist is not available at the moment.
Osman says
it is not working with iphone . I got error message : html5: video file not found.
I use the below shortcut with my own mp4 and webm file. Android device and PC works fine.
How can I solve the issue with iphone ios ? I have now added instagram embedded file which is working fine.
But I want to host my own file.
[flowplayer src="https://example.com/wp-content/uploads/videos/test.mp4" webm="http://example.com/wp-content/uploads/videos/test.webm"]admin says
@Osman, Does it work fine on desktop?
Osman says
Yes, iT Does Works fine on desktop and Android mobile. But iT is not working with on mobile with iOS.
admin says
@Osman, Have you encoded the video properly? The codec needs to be H264 (web optimized). You can use a free encoder like handbrake to do this.
Osman says
The code has H264. I have encoded with this online converter
https://www.online-convert.com/But still not working on iPhone.
Tchouente says
Can it use for the playlits
admin says
@Tchouente, Unfortunately, playlist is not available at the moment.
Paul says
Hello: All the short codes are cut off and not complete in Safari. How can I get a list of the short codes as I want the Poster short code?
admin says
@Paul, I’m not sure what you mean. Are you copying and pasting the shortcode into a shortcode block?
Ahmed Anwr says
how to assign the player to specific links in post
i mean i have videos URLS in my post and it in specific location
how to change the all link to be embed with the player
admin says
@Ahmed, You use the shortcode and specify the video URL in it.
Jagdish Fartade says
How can I add multi audio support, please let me know. I’ll be obliged if it can be done.
admin says
@Jagdish, Unfortunately, it’s not possible at the moment.
Bazo says
Is it possible to schedule different videos for certain days to start autoplay? (ie when opening the site, the video plays automatically)
thank you for your reply
V. Lavender says
Why can’t I embed a video onto my web page that is currently on Facebook?
Noor Alam says
@V. Lavender, What shortcode are you using?
D Beaumont says
Does this work with youtube embeds? I also sometimes have vimeo, bilibili and dailymotion videos i want to embed on my site.
Noor Alam says
@DBeaumont, Only for MP4 videos unfortunately.