=== FV Flowplayer Video Player === Contributors: FolioVision Donate link: https://foliovision.com/donate Tags: video player, flowplayer, mobile video, html5 video, Vimeo, html5 player, youtube player, youtube playlist, video playlist, RTMP, Cloudfront, HLS Requires at least: 3.5 Tested up to: 4.7.2 Stable tag: trunk License: GPLv3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html WordPress's most reliable, easy to use and feature-rich video player. Supports responsive design, HTML5, playlists, ads, stats, Vimeo and YouTube. == Description == Custom HTML 5 video on your own site with Flash fallback for legacy browsers is here. FV Player is a free, easy-to-use, and complete solution for embedding FLV or MP4 videos into your posts or pages. With MP4 videos, FV Player offers 98% coverage even on mobile devices. * **NEW** easy AB looped playback for your visitors (great for teaching sites) * **NEW** improved and more powerful playlists (more playlist features coming soon). * Automated checking of video mime type for logged in admins on MP4 videos * FV Player is a completely responsive WordPress video player. * Custom start and end screens are built right in. You can use your own custom design before and after the video. * Enjoy unlimited instances in a single page. * No expensive plugins: unlike other players who nickel and dime you for every feature, with FV Player all advanced features are available in the standard license (Google Analytics, Cuepoints, Native fullscreen, Keyboard shortcuts, Subtitles, Slow motion, Random seeking, Retina ready) * Single site pro license available (JW Player requires five pack for full features) * Ultra-efficient player: just 129kB of JavaScript and 9.9kB of Flash code. You can extend FV Player using just HTML and CSS, leaving the JavaScript heavy lifting up to us. * 98% Browser coverage. Built-in Flash fallback will get the job done on older browsers. * Full support for Amazon S3, Cloudfront and other CDN's. * Totally Brandable. Stop selling YouTube and start selling yourself. Even design your own player. To remove our branding and add your own branding and get access to additional pro support, [you can buy your own license here](https://foliovision.com/player/download). Back to school special 25% off pro licenses until end of September. **Additional Technical information** * Core video engine: open source Flowplayer 6. * Supported video formats are MP4, WebM and OGV ([read about HTML5 video formats](https://foliovision.com/player/encoding)). * Supported video streaming formats are HLS (Flash and JavaScript fallback available for incompatible devices), MPEG DASH and RTMP. * Default options for all the embedded videos can be set in comprehensive administration menu. * In comparison with WordPress Flowplayer plugin, there are several improvements: 1. Allows user to display clickable splash screen at the beginning of video (which not only looks good, but improves the performance significantly). 2. Allows user to display popup box after the video ends, with any HTML content (clickable links, images, styling, etc.) 3. Does not use configuration file, but WordPress Options 4. Does not drive you to use an in-house proprietary CDN but supports all CDN. 5. Includes advanced built-in social sharing. 6. Inexpensive [pro support](https://foliovision.com/pro-support) available. 7. Includes an advanced built-in video encoding and theme checker to make sure your videos are encoded properly and your site is set up for video playback. **Additional Documentation at Foliovision.com** [Support](https://foliovision.com/support/fv-wordpress-flowplayer/) | [Change Log](https://foliovision.com/player/changelog) | [Installation](https://foliovision.com/player/installation)| [User Guide](https://foliovision.com/player/user-guide) | [Detailed FAQ](https://foliovision.com/player/faq) == Installation == There aren't any special requirements for FV Player to work, and you don't need to install any additional plugins. 1. Download and unpack zip archive containing the plugin. 2. Upload the fv-wordpress-flowplayer directory into wp-content/plugins/ directory of your wordpress installation. 3. Go into WordPress plugins setup in WordPress administration interface and activate FV Player plugin. 4. If you want to embed videos denoted just by their filename, you can create the /videos/ directory located directly in the root of your domain and place your videos there(you use complete URL of video files). 5. Go to plugin Settings screen and click both "Check template" and "Check videos" buttons to check your template and videos mime type. Visit [our site](https://foliovision.com/player/installation) for a fully featured guide with **screenshots** and more! == Frequently Asked Questions == = 1. My video doesn't play in some browsers. = This should be related to your video format or mime type issues. Each browser supports different video format, MP4 is the recommended format. In general, it's recommended to use constant frame rate. Detailed instructions about [video encoding for HTML 5](https://foliovision.com/player/encoding). HTML5 is pickier about what video it can play than Flash. Please note that MP4 is just a container, it might contain various streams for audio and video. You should check what audio and video stream are you using. Read next question to find out how. = 2. Player buttons are gone - there are only square symbols. = 1) This can happen if your site is at www.domain.com, but the CSS is loaded from your CDN at cdn.domain.com. Based on CSS3 and HTML5 specs not all the resources can be shared between domains. So you need to set the following on your CDN for web fonts (woff, eot, ttf, svg): Access-Control-Allow-Origin: * Or you can allow your domain only (but in that case it might be good to also allow it with https): Access-Control-Allow-Origin: http://www.domain.com Or you can exclude wp-content/plugins/fv-wordpress-flowplayer/css/flowplayer.css from CDN. 2) Second cause might be that your webfonts are served with bad mimetype `AddType application/x-font-woff woff AddType application/x-font-ttf ttf AddType application/vnd.ms-fontobject eot AddType image/svg+xml svg` = 3. I want to align my player (left/right/middle). = By default the player is positioned in the middle. To change alignment of the player to either left or right: Go to FV Player settings > scroll down to post interface options > tick "Align". Now you can insert your video. In the interface you can now choose you alignment from the drop down menu: default (middle), left, or right. You can check [demo in here](https://foliovision.com/player/demos/align-settings). = 4. How to check my video properties using the built-in checker and how to report video not playing = The video checker works automatically when you're logged in as admin. You'll see a text in upper left corner of any video on your site. All the necessary info can be found in [this guide](https://foliovision.com/player/basic-setup/how-to-use-video-checker). = 5. My video doesn't play in Internet Explorer 9 and 10. = Most of the issues is caused by bad mime type on the server which serves your video files. Our plugin contains an automated checked for this - just click the "Check Videos" button on the plugin Settings screen. Here's how to fix the mime type: **If your videos are hosted on a standard server:** You need to put the following into your .htaccess: `AddType video/mp4 .mp4 AddType video/webm .webm AddType video/ogg .ogv AddType application/x-mpegurl .m3u8 AddType video/x-m4v .m4v AddType video/mp2t .ts` If you use Microsoft IIS, add following into web.config (one should be in your root website folder) into configuration/system.webServer/staticContent section: ` ` This can be also done in the Apache configuration. If you are on Microsoft IIS, you need to use the IIS manager. **If you host videos on Amazon AWS:** They might be served with bad mime type too - "application/octet-stream". This largely depends on the tool which you use to upload your videos. Using your Amazon AWS Management Console, you can go though your videos and find file content type under the "Metadata" tab in an object's "Properties" pane and fix it to "video/mp4" (without the quotes, of course different video formats need different mime type, this one is for MP4). There are also tools for this, like S3 Browser Freeware, good place for start is here: https://forums.aws.amazon.com/thread.jspa?messageID=224446 Good example can be seen in our support forum: https://foliovision.com/support/fv-wordpress-flowplayer/how-to/how-to-set-correct-mime-type-on-videos-hosted-by-amazon Also for Internet Explorer, it's not recommended to use MPEG-4 Visual or MPEG-4 Part 2 video stream codecs. = 6. How do I fix the bad metadata (moov) position? = This means that the video information (such as what codecs are used) is not stored at the beginning of the file. In our experience, video with bad meta data position might be slow to load in Flash engine (check some browser which doesn't play MP4 format in Flash - like Opera) and Firefox. Although Safary and iOS (iPAd, iPhone) may play it just fine. In general we recommend you to re-encode your video as [per our instructions](https://foliovision.com/player/encoding#encoding-samples), but here are some quick tools: If you are using Mac, try Lillipot (just remember to rename the file back to .mp4 extension): http://www.qtbridge.com/lillipot/lillipot.html If you have Quick Time Pro, just open the video and in the Movie Properties -> Video Track -> Other Settings turn on the "Cache (hint)" - [screenshot](http://drop.foliovision.com/webwork/it/quick-time-pro-cache-hint.png). If you are using Windows, try MP4 FastStart: http://www.datagoround.com/lab/ There are also server-side tools for fixing of this written in Python and there one for PHP, but it fails on videos bigger than the PHP memory limit. = 7. I'm getting error about 'HTTP range requests'. = Please check with your technical support if your web server supports HTTP range requests. Most of the modern web servers support this feature (Apache, Nginx, Lighttpd, Litespeed...). It's important for fast seeking in HTML5 video playback. Other possible cause is that you are using some membership plugin to protect downloading of your videos (Premise and others). While this might seem like a good solution, we don't recommend it as it increases the load of your server and it won't allow seeking in the videos. You can use Amazon S3 with privacy settings, just hit the link to read our illustrated guide. = 8. Are there any known compatibility issues?. = We heard about problems when using some fancy pro templates like OptimizePress (read below for fixing instructions) or Gantry framework. These templates often break the WordPress conventions (probably as they often try to add too many non-template functions, like video support built-in into the template). We can debug the issues for you, just head over to our website and order the pro support. Full list of conflicting plugins is available here: https://foliovision.com/player/compatibility = 9. I'm using OptimizePress version 1 template. = First click the "Check template" button on the pluging settings screen. It will likely report an issue like: `It appears there are multiple Flowplayer scripts on your site, your videos might not be playing, please check. There might be some other plugin adding the script. Flowplayer script http://site.com/wp-content/themes/OptimizePress/js/flowplayer-3.2.4.min.js is old version and won't play. You need to get rid of this script.` The problem with this template is that it includes that old Flowplayer library without using the proper WordPress function to add a new script (wp_enqueue_script). You need to go through the template and make sure the script is not loading. Typically it will be in any of the header.php files - including header-myheader.php, header-singleheader.php or similar files. There is also a workaround - on each page what is using one of the OptimizePress custom templates, check Launch Page & Sales Letter Options --> Video Options --> "Activate Video" and enter "<!-- FV Flowplayer -->" into Launch Page & Sales Letter Options --> Video Options --> "External Player Code" field. That way the template thinks the video is external and will not try to put in the Flowplayer library and the video will play. = 10. I'm using OptimizePress version 2 template. = FV Flowplayer will handle all the videos inserted by the Live Edit. = 11. Does this plugin support Shoutcast?. = Unfortunatelly HTML5 does not support live broadcasting. Please read about it here under "Flash. The good parts": http://flowplayer.org/docs/#flash = 12. I get an error message like this when activating the plugin: Parse error: parse error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /wp-content/plugins/fv-wordpress-flowplayer/models/flowplayer.php on line 4. = You need to use at least PHP 5, your site is probably still running on old PHP 4. = 13. I get "Can't create temporary file for video analysis" in admin video checker. = This temporary file is required as our plugin contains a video checker for admin users - it checks the video format and other information and warns you about potential issues why your video might not play for everybody. The error message means the WordPress media uploads directory (by default wp-content/uploads) is not writable by PHP. We use this standard WordPress path as it should work for nearly all the websites. Most of people use the standard WordPress Media Library, so this should really work. You can try to set the permissions of that folder to allow writing for everybody and see if that helps. If you are not sure, ask your web host support about what PHP permission model you use. = 14. I installed the plugin, inserted the video, but it's not working - there is no control bar or only a gray box appears. = Go to plugin Settings screen and hit "Check template" button. It will check if both jQuery library and Flowplayer JavaScript is loading properly. Also, check "I'm using OptimizePress template" question above. = 15. Your player works just fine, but there are some weird display issues. = Please check if these issues also appear when using the default WordPress template. There seems to be some sort of conflict between the Flowplayer CSS and your theme CSS. = 16. Fullscreen is not working properly for me. = Are you using some old lightbox plugin like http://www.4mj.it/slimbox-wordpress-plugin/ ? Or are you putting the video into Iframe? Also, the video should not be placed in an HTML element with lowered z-index. = 17. How to make this plugin WPMU compatible?. = Just copy the plugin into wp-content/plugins and then activate it on each blog where you want to use it. = 18. Is there a way to force pre-buffering to load a chunk of the video before the splash screen appears?. = This option is not available. With autobuffer, it means every visitor on every visit to your page will be downloading the video. This means that you use a lot more bandwidth than on demand. I know that I actually watch the video on only about 1/3 of the pages with video that I visit. That saves you money (no bandwidth overages) and means that people who do want to watch the video and other visitors to your site get faster performance. If you want to autobuffer, you can turn that on in the options (we turn it off by default and recommend that it stays off). = 19. My videos are hosted with Amazon S3 service. How can I fill the details into shortcode?. = Just enter the URL of your video hosted on Amazon S3 as the video source. = 20. I would like to localize the play again button. = Currently there is no support for other languages. = 21. Where can I change the default directory for videos?. = You can change this manually in the the models/flowplayer.php in the flowplayer_head function. It you use videos in widgets you might need to edit the function flowplayer_content in controller/frontend.php as well. Please be carefull when editing source codes. = 22. How do I insert flowplayer object outside the post, for example to a sidebar? = You need to use following code to include the shortcode into a sidebar: echo apply_filters('the_content', '[flowplayer src=yourvideo.mp4 width=240 height=320]'); Fill the Flowplayer shortcode part according to your needs. The apply filter needs to be called because the flowplayer shortcodes are not parsen outside posts automatically. Also, please do not forget to add the echo at the beginning. = 23. How can I style the popup or ad? = Check out .wpfp_custom_popup and .wpfp_custom_ad in /fv-wordpress-flowplayer/css/flowplayer.css. You might want to move your changes to your template CSS - make sure you use ID of container element, so your declarations will work even when the flowplayer.css is loaded later in the head section of your webpage. = 24. Is there a way to remove the share (embed) button? = Yes, there's a global option in settings to disable sharing/embed. We plan to add an individual flag on a per video basis to allow sharing when sharing is turned off globally and vice versa. = 25. My videos are taking long time to load. = 1. Check your hosting for download speed. 2. Try to use different settings when encoding the videos, try to turn on the cache when encoding with [Quick Time](http://drop.foliovision.com/webwork/it/quick-time-pro-cache-hint.png) = 26. How can I change the play icon? = You need to copy the CSS from the Flowplayer CSS (default theme) and put it into your theme CSS. Also add some element ID in front of it to make sure it overrides the default Flowplayer CSS: `#content .is-paused.flowplayer .fp-ui{background:url({PATH TO YOUR IMAGE}.png) center no-repeat;background-size:12%;} #content .is-rtl.is-splash.flowplayer .fp-ui, #content .is-rtl.is-paused.flowplayer .fp-ui{background:url({PATH TO YOUR IMAGE-rtl}.png) center no-repeat;background-size:12%} @media (-webkit-min-device-pixel-ratio: 2){ #content .is-splash.flowplayer .fp-ui, #content .is-paused.flowplayer .fp-ui{background:url({PATH TO YOUR IMAGE@2x}.png) center no-repeat;background-size:12%} #content .is-rtl.is-splash.flowplayer .fp-ui, #content .is-rtl.is-paused.flowplayer .fp-ui{background:url({PATH TO YOUR IMAGE-rtl@2x}.png)} }` The image needs to be 100x106px normal version nad 200x212px hi res version. You only have to include the RTL version if your site runs in such language. = 27. How can I change position of my custom logo? = Check out Settings -> FV Player -> Sitewide Flowplayer Defaults -> Logo. = 28. Volume control in player looks weird. = Make sure you are not using obsolete tags like <center> to wrap the video. Such tag is not supported in HTML5, you have to use CSS to center elements. = 29. How do I get rid of the 'Hit ? for help' tooltip on the player box? = You can put this into your template's functions.php file, if you know a bit of PHP. It will disable the tooltip. `add_filter( 'fv_flowplayer_attributes', 'tweak_fv_flowplayer_attributes', 10, 2 ); function tweak_fv_flowplayer_attributes( $attrs ) { $attrs['data-tooltip'] = 'false'; return $attrs; }` = 30. How can I customized the player control bar? I want to add a play/pause button. = Just put this code into the template's functions.php file. If you know a bit of PHP, it should not be a problem for you: `add_filter( 'fv_flowplayer_attributes', 'tweak_controlbar_fv_flowplayer_attributes', 10, 2 ); function tweak_controlbar_fv_flowplayer_attributes( $attrs ) { $attrs['class'] .= ' play-button'; return $attrs; }` It simply adds a class "play-button" to the player DIV element and then it knows to use the play button. The other options are: `no-mute no-time no-volume` = 31. Minify plugins are interfering with FV Player = Read our guide [Using FV Player with Minify Plugins](https://foliovision.com/player/advanced/player-minify-plugins). There you'll find how to set up plugins such as Autoptimize or WP Rocket so they work properly with the FV Player. = 32. What if the FV Player doesn't work for me? = No worries. 1. You can always downgrade to version the Flash version ([delete the plugin then grab older version here and install from the ZIP file](https://wordpress.org/plugins/fv-wordpress-flowplayer/developers/)). If you downgrade to version 1.x you do lose a lot of mobile and iOS capability but you didn't have it in the first place. 1. Contact us via [support](https://foliovision.com/support). We are actively investigating and fixing people's sites now during the initial release period. We will help you to get FV Flowplayer 5 working in your environment. = 33. I can't see overlay ads on my videos = The problem is probably in AdBlock. If it's active, the overlay ads will be blocked. Once AdBlock is deactivated for the particular domain where the video is played, the overlay ads will be displayed (page refresh needed). FV Player Pro comes with a money back guarantee so you can even try the commercial no-branding version risk free. Or make it work first with the free versions. Thank you for being part of the HMTL 5 mobile video revolution! ======= == Screenshots == 1. Post containing modified flowplayer playing a video. 2. Adding three players with different arguments into a post. 3. Add new video dialog window in editing mode. 4. Configuration menu for administrators. 5. Video checker. This shows up for admins only. Click on Admin: Video Ok or Admin: Video Issues in top left corner of the video when you are logged in as admin to get it. == Changelog == = 6.0.5.25 - 2017/05/?? = * CSS - moving FV Player stylesheet down to increase it's priority over the WP themes. Pro users need to upgrade FV Player Pro as well if they experience slight display issues. = 6.0.5.24 - 2017/05/09 = * Amazon S3 - adding support for new AWS Regions - US East (Ohio), Asia Pacific (Mumbai) and EU (London). * End Popup - making sure it works on the last item in playlist only * Speed control - making sure it works for Android when using Firefox * Vimeo (Pro) - showing a notice to install Firefox if user has playback issues due to TLS 1.2 incompatibility on Android 4 and old OS X. More details: https://foliovision.com/2017/05/issues-with-vimeo-on-android = 6.0.5.23 - 2017/04/04 = * Bugfix - Compatibility for browsers with localStorage blocked * Bugfix - Playlist autoadvance disabled for people who upgrade from FV Player 6.0.5.20 * Bugfix - Playlist autoplay broken when Video Links disabled * Bugfix - Sharing - Fix for Twitter post titles = 6.0.5.22 - 2017/03/29 = * Feature - Video Links - Adds a "Link" item to the top bar. Clicking it gives your visitors a link to the exact place in the video they are watching. On by default, unless you have disabled embedding. * Feature - Sharing settings added into shortcode editor * Beta Feature - Audio support - allows you to use all the FV Player Pro features with audio and also playlists. Needs to be enabled in "Sidewide FV Player Defaults". * Bugfix - making the license check work even if SSL certificates are not installed on your server * Bugfix - subtitles not server via https:// when using SSL and paths without domain name = 6.0.5.21 - 2017/03/15 = * Compatibility - fix for Gravity Forms Partial Entries when video starts playing on background * Feature - clicking playlist item now scrolls to the player if it's outside of view * Bugfix - disabling video element right click menu * Bugfix - shortcode editor preview not working in some themes * Code refactoring = 6.0.5.20 - 2017/02/22 = * CSS - fixing play icon size on mobile devices in fullscreen * Feature - Disable Playlist Autoadvance global setting and also a shortcode editor option * Feature - Removing FV Simpler SEO and FV Tracker tracking from Shortcode Editor preview * Feature - Sharing text "Check the amazing video here" can now be customized using the "Sharing Text" global setting * Feature - Skin settings - quick preview of subtitle styling * Bugfix - Shortcode editor - disabling live preview to increase stability, use the "Refresh preview" button or Enter key = 6.0.5.19 - 2017/02/09 = * Mobile - using the native fullscreen only on older devices - iPad with iOS < 7 and Android < 4.4. This takes care of the Google Chrome video download button = 6.0.5.18 - 2017/02/07 = * Feature - Facebook Video Sharing - when enabled the first MP4 video in the post will be shared directly rather than the post excerpt. * Feature - Lightbox - now you can use HTML like to make clicking that image open a video * Feature - Skin settings - now you can see the changes you are doing live if you play the video * CSS - renaming the play-button class to fvp-play-button to prevent conflicts with some themes * CSS - subtitle styling improvements * Bugfix - PHP 5.2 compatilibty fix for FV Player widget = 6.0.5.17 - 2017/01/30 = * Feature - Featured image - check the "Add featured image automatically" setting and video splash image will be set as featured image if it's not already specified * Feature - HLS - video duration check now works with m3u8 files * Feature - Subtitles - added settings for font face, backgroud opacity and color * Fix - Lightbox - moving into a separate file for faster loading if using for images * Fix - Splash screen ascept ratio incorrect during pageloads if not matching the player size * Fix - Splash screen showing with black border if ascept ratio not matching player aspect ratio in Chrome * CSS - fix for splash screen appearing behind the video when aspect ratios don't match and the video is paused * Beta feature - User Profile Videos now supports bbPress and Easy Digital Downloads = 6.0.5.16 - 2017/01/13 = * Feature - Subtitles - Added option for SDH (Subtitles for the deaf or hard-of-hearing) * Fix - Iframe embedding scrollbars appearing * Fix - Iframe embedding for Youtube and Vimeo is now responsive * Fix - Lightbox - no longer using href attribute to increase theme compatibility * Translations - German translation improvements contributed by Helmar Rudolph http://www.helmar.org/ = 6.0.5.15 - 2017/01/05 = * "FV WordPressFlowplayer" menu item - removed, look for "FV Player" * Fix - Chrome 55 adds download button for the video player which appears for fullscreen mode on mobile - hiding this button * Bugfix - RTMP - making sure it takes priority over other formats to prevent browser from trying to load HLS in Flash engine = 6.0.5.14 - 2016/12/23 = * Feature - "Parse Vimeo and YouTube links" option now affects BuddyPress as well * Bugfix - HLS - fix for HLS.js fallback to Flash HLS in playlists * Bugfix - Iframe embedding - not working for posts * Bugfix - Lightbox - text links not working in Divi theme due to their smooth scrolling script * Bugfix - Lightbox - fix for images regex to pick the right anchor tag * Bugfix - New Shortcode Editor - disabled for Edge and Safari due to stability issues for now = 6.0.5.13 - 2016/12/13 = * New Shortcode Editor! Better looking, with improved workflow and video preview functionality. = 6.0.5.12 - 2016/12/08 = * Feature - Google Analytics - added tracking of playback errors * Feature - HLS.js - added code for HLS playback using JavaScript without need for Flash - for all modern desktop browsers. Check the "Enable HLS.js" option * Feature - Lightbox can now be disabled for WP galleries - check the "Use video lightbox for WP Galleries" setting * Pro - Beta - Vimeo MPEG-DASH playback option = 6.0.5.11 - 2016/12/02 = * Fix - strange videos appearing in posts on some sites due to PHP incompatibilites = 6.0.5.10 - 2016/12/01 = * Fix - strange videos appearing in posts on some sites due to PHP incompatibilites = 6.0.5.9 - 2016/11/30 = * Feature - Amazon S3 - support for the new region Seoul, thanks to mods2003 * Feature - Lightbox - added support for WP [gallery] galleries - these will automatically link the items to media files rather than attachment pages when "Use video lightbox for images as well" option is enabled. * Feature - MPEG-DASH support * Beta feature - User Profile Videos added, use Integrations/Compatbility -> Enable profile videos * Beta feature - Users Ultra integration, use Integrations/Compatbility -> Enable profile videos * Fix - AMP - disabling the custom integration as it was breaking the AMP validation * Fix - AMP - putting in new code which uses bare