I've been reviewing material on different ways developers are adding Flash fallback to their HTML5 sites.
I have this test code with dummy video:
<video width="944" height="532" controls preload="auto" poster="imgs/vidPosterImg.jpg">
<source src="videos/2010reel.mp4" type="video/mp4" />
<source src="videos/2010reelogg.ogv" type='video/ogg; codecs="theora, vorbis"'>
<embed src="flash/mainsceen.swf" type="application/x-shockwave-flash" width="944" height="531" allowscriptaccess="always" allowfullscreen="true"></embed>
<object width="320" height="240" type="application/x-shockwave-flash"
data="flash/mainsceen.swf">
<param name="movie" value="flash/mainsceen.swf" />
<param name="allowfullscreen" value="true" />
</object>
<object type="application/x-shockwave-flash" data="flash/mainsceen.swf" width="944" height="532">
<param name="movie" value="flash/mainsceen.swf">
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always">
</object>
</video>
The mp4 works and the ogv works in Firefox. but Flash does not.
Also, in Safari, the poster image seems to be skipped over to the videos first frame when on metadata load.
Correction, WP4 does not work in Firefox, only OGG is supported. You must have tested in Firefox by removing both the WP4 and OGG sources. If you had left the OGG source it would have at least played using HTML5.
Video For Everybody (Video Encode section) states:
Firefox will only play Ogg (WebM is also supported in Firefox 4), and
it will not degrade to Flash if there is no Firefox-compatible video
file.
Therefore, an ogg source must be present in order for the flash fallback to work. You have to just trust that it works. This is just how the FireFox browser parses video elements - if it does not see an ogg source, then it will not reach the flash fallback and your fallback will appear to be broken.
If you need to test that the flash fallback works, you must remove the video and source tags around it so that the browser has no choice but to run the flash video.
Related
I am using Safari version 5.1.7 (7534.57.2) and Windows 8.1
I have a webpage that contains the following HTML:
<audio controls >
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3" type="audio/mpeg">
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.ogg" type="audio/ogg">
<embed height="50" width="100" src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3">
</audio>
When I open this page in Chrome, IE, Firefox, and Opera the audio does 'not' play (most browsers automute the volume as well). However, under Safari it automatically plays.
How do I prevent the quicktime player in Safari from autoplaying the audio file when the page loads?
I want the user to have a choice about clicking the play button.
You can try setting the preload attribute like this
<audio controls preload="metadata" >
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3" type="audio/mpeg">
<source src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.ogg" type="audio/ogg">
<embed height="50" width="100" src="https://s3-us-west-1.amazonaws.com/download.changeyourenergy.com/sounds/BrainRefreshing-Epiphany.mp3">
</audio>
I'm working on a website and have an mp3 embedded in a page like this:
<embed src="/resources/mymusic.mp3" height="20" width="300" autostart="false" loop="true">
however when that page loads in Firefox the browser window gets deselected, hence disabling user interaction with various elements until they click inside the window again. firefox is still the
app in focus but the browser window itself becomes deselected. this doesn't happen in Safari.
using:
<object height="20" width="300" data="/resources/mymusic.mp3"></object>
gave the same result.
also tried
<audio controls>
<source src="/resources/mymusic.mp3" type="audio/mpeg">
Your browser does not support this audio format.
</audio>
element but it won't load at all in firefox.
Any suggestions on how to keep the window active?
I'm working on a Silverlight 4 application that seems to run fine in IE, however when I try to view the application in FireFox, the application loads, but is not visible. The application is definitely loading, despite not being visible. I've run Fiddler and can see that the application makes the two web service calls I expect it to when the app loads.
The HTML hosting the Silverlight plugin is very simple, containing only a div with an object tag inside. There are no styles that would impact visibility of the containing div.
The HTML is below:
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/Shell.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
</div>
One last point that I just noticed, the problem with the Silverlight app not being visible only occurs when viewing the HTML page in FireFox via my local IIS. If I open the HTML page directly from the file system, the Silverlight app is visible.
Any suggestions as to how to fix this visibility problem would be greatly appreciated.
I was able to solve the problem by setting the size of the object tag to a fixed pixel size. Previously we had it set to 100% width and height. Once I changed to fixed pixel for width and height, I was able to view our application in both IE and FireFox.
You need to add the MIME type for .xap, .xaml, and .xbap within IIS.
I have this html5 code, with a MP4 for Chrome (working), an OGG for Firefox (failing) and the same ogg via a java applet for Internet Explorer (working):
<video width="848" height="480" controls="controls" autoplay="true" >
<source src="vernissage_cpal_2009.mp4" type="video/mp4" />
<source src="vernissage_cpal_2009.ogv" type="video/ogg" />
<applet code="com.fluendo.player.Cortado.class" archive="http://theora.org/cortado.jar" width="848" height="480">
<param name="url" value="vernissage_cpal_2009.ogv" />
</applet>
</video>
Firefox display a gray box with a X inside it. The file "vernissage_cpal_2009.ogv" also plays well inside normal media player, like VLC.
I had a similar issue, trying to embed ogg audio, where it was playing in FF, but not in chromium.
I found I was missing a tag, type audio/ogg. It now plays.
Here is the code:
<object width="300" height="42">
<param name="src" value="tonystheme.ogg">
<param name="type" value="audio/ogg">
<param name="autoplay" value="true">
<param name="controller" value="true">
<param name="bgcolor" value="#000000">
<embed src="tonystheme.ogg" autostart="true" loop="false" width="300" height="42"
controller="true" bgcolor="#000000"></embed>
</object>
Granted, this is not working with the new html5 code, but, it did make it so the file would play.
Use "video/ogg; codecs=theora,vorbis" as your mime type and Firefox will play it back happily.
This is my code
<table style="width:100%;height:100%;vertical-align:middle;text-align:center;">
<tr>
<td><object classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" type="application/x-oleobject">
<param name="src" value="../Documents/10695.wmv">
</param><param name="ShowStatusBar" value="true">
</param><param name="stretchToFit" value="true">
</param><param name="AutoStart" value="true">
</param><embed pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" autostart="1" stetchToFit="1" NAME="MediaPlayer" ShowControls="1" src="../Documents/10695.wmv" />
</object></td>
</tr>
</table>
Video works fine in IE but will not even play in firefox. control appears to buffer but then does not play.
-thanks for the heads up
This is because Firefox doesn't natively support WMV, whereas IE does. You'll need something like the JW Player for Silverlight to support this.