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.
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.
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.
I get sound from the video, but no picture any suggestions please.
@Brian, Is your video properly encoded with a H264 encoder (e.g. handbrake)?
The video does not show up on the mobile site (dealernegotiator.com), any idea why?
@Corey, I don’t see any flowplayer shortcode on your homepage. It’s just a plain video embedded with HTML5 video tag.
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.
can you tell me how to add a tv channel livestream to my website?
@eion, Unfortunately that’s not possible at the moment.
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!
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!
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!
Hello,
I have added MP4 video and it is not playing on iphones. Please advise.
Reference link:
https://www.earthenergywi.com/Thank you
@Asok, Have you encoded your video properly (H264)? You can use a free tool like handbrake to do this.
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?
hello team
how to enable playlist video and the end loop
@tchouente, Unfortunately playlist is not available at the moment.
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"]@Osman, Does it work fine on desktop?
Yes, iT Does Works fine on desktop and Android mobile. But iT is not working with on mobile with iOS.
@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.
The code has H264. I have encoded with this online converter
https://www.online-convert.com/But still not working on iPhone.
Can it use for the playlits
@Tchouente, Unfortunately, playlist is not available at the moment.
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?
@Paul, I’m not sure what you mean. Are you copying and pasting the shortcode into a shortcode block?
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
@Ahmed, You use the shortcode and specify the video URL in it.
How can I add multi audio support, please let me know. I’ll be obliged if it can be done.
@Jagdish, Unfortunately, it’s not possible at the moment.
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
Why can’t I embed a video onto my web page that is currently on Facebook?
@V. Lavender, What shortcode are you using?
Does this work with youtube embeds? I also sometimes have vimeo, bilibili and dailymotion videos i want to embed on my site.
@DBeaumont, Only for MP4 videos unfortunately.