FF 21 plays both flash video AND HTML5 fallback with swfobject.swf
Hi there,
I use SWFObject to define HTML 5 video content as a fallback to flash video, basically in line with the instructions given here:
http://gotoandlearn.com/play.php?id=128
This was a stable solution until very recently, when Firefox 21.0 started to play both the flash content AND the fallback video content's audio. You can hear double audio (echo). Chrome, IE etc are ok. Flash Player 11.7
The issue was already reported elsewhere with regard to youtube's HTML5 testing: http://forums.mozillazine.org/viewtopic.php?f=38&t=2487395
With latest swfobject.js referenced, the embed code is:
<script type="text/javascript">
swfobject.embedSWF("test.swf","player1","938","533","9");
</script>
<div id="player1">
<video src="video.mp4"
controls="controls"
autoplay="autoplay"
autobuffer="autobuffer"
height="533"
width="938">
</video>
</div>
Any ideas? Thank you -
J
Okulungisiwe ngu cor-el
All Replies (8)
This may be the consequence of landing this bug fix.
- bug 799315 - Windows Media Foundation backend for media playback
Please do not comment in bug reports: https://bugzilla.mozilla.org/page.cgi?id=etiquette.html
Does it help if you set the media.windows-media-foundation.enabled pref to false?
jottbeh wrote:
http://gotoandlearn.com/play.php?id=128
Notify the creator of the tutorial of this problem.
I haven't looked into the script, but at a glance, it seems to me that Firefox is simply behaving the way you tell it to. You have a Flash object, followed by a video. Therefore, you're playing two identical copies of the same video simultaneously.
This will only happen from version 21 onwards on Windows 7 and 8, and from the upcoming version 22 onwards on Windows Vista. Elsewhere on desktop platforms, Firefox doesn't support the MP4 format you specified, so only the Flash version will play.
If you want Flash Player to be used over the built-in MP4 support when available, stick the video tag inside Flash Player's object tag. See below for an example I've tested and validated. The player used is JW Player 5.0.753.
<!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Flash Player preferred over HTML5 video</title> </head> <body> <div id="video-container"> <object id="video-flash" type="application/x-shockwave-flash" data="player.swf" width="624" height="351"> <param name="allowfullscreen" value="true"> <param name="allowscriptaccess" value="always"> <param name="flashvars" value="file=video.mp4"> <!--[if IE]><!--><param name="movie" value="player.swf"><!--<![endif]--> <video id="video-html5" controls="controls" preload="metadata" poster="image.jpg" width="624" height="351"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> </video> </object> </div> </body> </html>
Notes
- You can use canPlayType() to check which codecs are supported, in case you want to display a custom error message when MP4 support is unavailable.
- If you also encode your video in WebM format, the HTML5 video element would be accessible to Firefox users on Windows XP, Mac and Linux, and Opera users on all desktop operating systems.
@ cor-el: Yes, setting media.windows-media-foundation.enabled pref to false does solve the issue on my browser.
@ Gingerbread-man: notification done, and thank you for the alternative code. Just to say that swfobject.js has been a good way to provide fallback content for flash, and still is in other browsers that have native H264 support.
Numerous sites use SWFObject, but shouldn't the script handle the detection and fallback all on its own without your having to hardcode anything? Maybe put your hardcoded fallback in <noscript> tags to pick up the case where SWFObject doesn't run at all.
Okulungisiwe ngu jscher2000 - Support Volunteer
(disregard duplicate post)
Okulungisiwe ngu jscher2000 - Support Volunteer
jscher2000 wrote:
Maybe put your hardcoded fallback in <noscript> tags to pick up the case where SWFObject doesn't run at all.
Isn't that just going to make things worse?
1. The noscript element would only have an effect for users with JavaScript disabled, and that's a minority. In fact, Mozilla believe JavaScript is so essential to viewing web pages, that the option to disable JavaScript has been removed in the upcoming Firefox 23 (bug 851702).
2. In cases where JavaScript is enabled but Flash Player is unavailable, the HTML5 video would no longer play.
Hmmm, I assumed SWFObject did video fallback.
jscher2000 wrote:
Hmmm, I assumed SWFObject did video fallback.
http://code.google.com/p/swfobject/
Note that it was last updated on June 11th 2009. So the latest version predates HTML5 video support in all browsers except Safari.
- You have your div, and you put your not-really-fallback content in there, in this case, a video element.
- When Flash is available, SWFObject turns the div into an object containing the Flash content. So the not-really-fallback content is simply there on the page, without any prerequisite condition, and it's supposed to disappear in the process.
- In Firefox, the Flash content gets inserted, but the not-really-fallback content video element continues playing invisibly somewhere. This only happens if the video has the autoplay attribute specified.
- Therefore, if you wrap the not-really-fallback content in a noscript tag, you essentially remove it from the page, except for that minority of users with JavaScript disabled. That means in cases where JavaScript is enabled (most of the time) and Flash Player is unavailable (notably on mobile devices, and on a minority of desktop computers), there will be no video whatsoever.
- This seems like a legitimate bug. I don't see the video element anywhere in the Inspector tool, so it shouldn't be playing from nowhere on the page.