Foliovision › Forums › FV Player › How to … › How can I disable the flash fallback?
-
Hi,
how can I disable the flash fallback?
I’m caching the HTML output from WordPress on a CDN (Google Pagespeed Service). A more detailed investigation will happen, but at the moment it looks like even browsers that should definitely support HTML5 with MP4 (encoded using Handbrake as described in the FV Flowplayer documentation) are using Flash?? Could that have to do with the CDN? Is any of the browser detection done using PHP? Can I disable the flash fallback or force HTML5 to be used in any other way?
Details on how I know which technology is being used:
When I remove the video file, Chrome displays:
“flash: Video file not found”
Only when I disable the flash plugin I Chrome I get:
“html5: Video file not found”
I woould like this to work be the other way around (use only HTML5, or use HTML5 as default, flash only as fallback …).
I’m using the most recent FV WordPress Flowplayer Version 2.2.6
Cheers,
Timon
-
-
P.S. O.K., after rethinking this I realize that it was not a good idea to remove the file to find out if HTML5 will be used by a certain browser: This may be misleading because if the HTML5 player can’t find the file, that might be a reason to fall back to the Flashplayer, too!?
Therefore:
Is there a quick and easy way to check in each browser whether it’s playing via HTML5 or Flash? (Other that checking the HTML source each time?)
Cheers,
Timon
Hello Timon,
could you please use the video checker to send us a report about your video? Here’s how it’s one: http://foliovision.com/wordpress/plugins/fv-wordpress-flowplayer/faq#properties-built-checker-report-playing
Thanks,
MartinHi Martin,
thanks for the hint, I clicked “Admin: Video OK” to submit problem reports for this video in some of the browsers. Find the details below:
I’m glad that 5 out of 8 browsers are working already.
I investigated more, as follows:
I re-encoded the video with the settings shown here:
http://www.php-schulung.de/wp-content/uploads/handbrake_settings_VIDEO_PSD2_v3.pngI display the new video here:
“http://www.v2.php-schulung.de/video-debug/”The video itself is at:
“http://www.v2.php-schulung.de/wp-content/uploads/video/willkommen_php_symfony_v3.mp4”The message “Admin: Video OK” shows in every browser.
Mac OS 10.8.5 Safari, Flash off: Works perfectly
Mac OS 10.8.5 Chrome, Flash off: Works perfectly
Mac OS 10.8.5 Opera 12.16, Flash off: Does not work, as expected
Mac OS 10.8.5 Opera 12.16, Flash on: Video plays, but is vertically stretched. It also extends below the top edge (open in Chrome to see what it is supposed to look like …).Mac OS 10.8.5 Firefox 28.0, Flash off: The following message is shown: “html5: Unsupported video format. Try installing Adobe Flash.”
Mac OS 10.8.5 Firefox 28.0, Flash on: Video plays, but is vertically stretched. It also extends below the top edge (open in Chrome to see what it is supposed to look like …).Windows 7 Internet Explorer 11.0.7, Flash off: Very weird display problems: The three flashing dots in the center that indicate the loding of the video keep flashing even when the video is playing. In addition, black bars are shown at top and bottom.
Windows 7 Opera 12.16, Flash off: Does not work, as expected
Mac OS 10.8.5 Opera 12.16, Flash on: Video plays, but is vertically stretched. It also extends below the top edge (open in Chrome to see what it is supposed to look like …).Windows 7 FireFox 28.0, Flash off: Works perfectly
I clicked “Admin: Video OK” to submit a problem report for this video in:
* Internet Explorer (Windows) (v1 and v3 of the video)
* FireFox (Mac) 2 times (v1 and v3 of the video)
* Opera (Mac) (v1 of the video)I’m glad that 5 out of 8 browsers are working already.
Any hints for the remaining three browsers?
Cheers,
Timon
Hello Timon,
first of all, thank you for the detailed reports!
1) if you want to figure out what Flowplayer engine is used, you can just check the element with your browser developer tools after it had started.
You can also execute a script like this, then you should see the engine in your JavaScript console:
jQuery('.flowplayer').bind('ready', function(e,api,video) { console.log(api.engine); } );
2) Regarding your video stretching issues – Flash is not aware of the actual dimensions of the video, so you need to enter the video width and height properly. If your actual video file contains some spacing above and below, you need to include this in the dimensions.
There is a way of switching the Flash behavior, but that stops it from being responsive. However perhaps there is a way of adding the responsiveness back in.
Other fix would be to include your video in WebM format. Typically 25% of users are not able to play MP4 in HTML5 (Firefox Mac, Firefox on old Windows, Opera and Linux users), they could use a WebM version of the video and benefit from random seeking as well.
3) IE 11 issues – I’m using IE 11.0.9600.16428 on Windows 7 with SP1 and while I’m seeing black bars above and below the video (please use correct video dimensions, the Video HTML5 tag appears not to be transparent in IE 11), there is no issue with loading indicator. What exactly are you using to turn off Flash? Perhaps that’s causing the problem.
Thanks,
MartinHi Martin,
thank you for your detailed response!
Regarding 1) Thank you for this useful shortcut!
Regarding 2) Ah, good to know. I read the section “Manual Editing” on the page
http://foliovision.com/wordpress/plugins/fv-wordpress-flowplayer/user-guide
which does not list the width and height shortcode attributes. But in retrospective, I could have guessed from the screenshots in the other sections. Thank you for pointing this out!!Regarding 3) After fixing the size, the black bars are gone. The load indicator weirdness is still there, but I’m going to describe that one in a separate thread. I turned off flash without any extra software, just by clicking the gear icon > internet options > programs > manage add-ons > flash > disable
so that should not interfere with the HTML5 video!?Thank you very much for your detailed response, 7 out of 8 browsers are working perfectly now!
Cheers,
Timon
My server has issues streaming mp4 in flash, the clip will not seek past buffer zone. I know I can install a mod but I don’t think it is really needed. Why can’t the player be configured to only fallback to flash for windows xp users or those on the older version of internet explorer? Right now it is going flash fallback on the latest version of firefox which is not necessary. Player should always be in html5 mode unless absolutely necessary.
Any way to get it to stop going flash fallback in new browsers?
– Steven
It is not a shortcode. I am using wordpress theme TrueMag and the player is one of several integrated into the theme. In Firefox here is the page source:
<input type=”hidden” name=”main_video_url” value=”http://mysite.com/wp-content/uploads/2015/12/myclip.webm
http://mysite.com/wp-content/uploads/2015/12/myclip.m4v
http://mysite.com/wp-content/uploads/2015/12/myclip.ogv”/>
<input type=”hidden” name=”main_video_type” value=”self-hosted”/>
<div class=”single-inbox”>
<div id=”player”>
<div class=”video-player”>
<div class=”player-content”>
<div class=”player-content-inner”>
<div id=”player-embed”>
<div id=”wpfp_45d4bbc62a1e855e23d629b771d6813c” class=”flowplayer no-brand is-splash play-button” style=”max-width: 720px; max-height: 480px; ” data-ratio=”0.6667″>
<video poster=”http://mysite.com/wp-content/uploads/2015/12/myclip.m4v.jpg” preload=”none”>
<source src=”http://mysite.com/wp-content/uploads/2015/12/myclip.webm” type=”video/webm”/>
<source src=”http://mysite.com/wp-content/uploads/2015/12/myclip.m4v” type=”video/mp4″/>
<source src=”http://mysite.com/wp-content/uploads/2015/12/myclip.ogv” type=”video/ogg”/>
</video>Now with this source in Firefox the m4v is what plays instead of the webm which is what should be playing. The reason i suspect it is flash is that it will not seek past the buffer line and with other players if m4v is the source it will seek fine(because it is playing the m4v in html5 not flash.)
– Steven