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.
Related
I have VideoJS displaying a video in a modal window in a Wordpress website. I'm NOT using a videoJS plugin, I've loaded the latest VideoJS version to the home directory. The code for the video tag is in a separate non-Wordpress html file all on it's own.
The video IS working fine in Safari on the Mac, it's also working fine in Firefox on Windows. It is NOT working properly in Firefox on the Mac.
I have traced this issue back to it being caused by the 'controls' option in the tag. As soon as I change the options to 'autoplay' and take out 'controls', the video plays perfectly well in Firefox and Safari on the Mac.
More specifically it appears to be the small timer (showing how much video has played) on the skin's slider.
The skin in Firefox is different that the one in Safari. The one in Safari is BLACK and displays the time to the left and right of the slider at the bottom of the player. The one in Firefox is GREY and has the time in a small raised box above the slider at the bottom of the player. It is this raised box that seems to be causing an issue with the video playing in Firefox. The video is only playing slowly on a strip just above the slider and only to the height of the timer box.
I have tried putting:
<script>
_V_.ControlBar.prototype.options.components = {'playToggle':{}}
</script>
right under the call to
<script src="http://vjs.zencdn.net/c/video.js"></script>
in the head of the Wordpress page that has the modal window displaying the separate html page containing the code.
That did NOT work; both Safari and Firefox still show the controls at the bottom of the player.
I also tried adding:
.vjs-default-skin .vjs-time-controls {display: none !important;}
to my WP theme's stylesheet. That did NOT work either.
QUESTION 1: Why is Firefox using a different skin for VideoJS than Safari? If I can get the same controller for Firefox (ie one without the raised time code box) then the video may play normally.
QUESTION 2: How can I limit the controls to show only the large centred play button without showing the controls at the bottom of the player? Again, not having the raised time code box may make the video display normally in Firefox.
QUESTION 3: All this came about because I discovered iPhone and iPad do not play videos with the autoplay setting. I had originally set the option for autoplay in the tag without 'controls', but because it wasn't working in iPad (just getting a black background to the video) I took out 'autoplay' and added the 'controls'. And that's when I noticed the problem in Firefox. So if I can't fix the issue with having controls in Firefox and it not working, is there a way to get round the black screen issue on the iPad and using 'autoplay' for Firefox without controls?
Please let me know if there's any other information you need.
You shouldn't need the code as it's all working; the problem only arises in Firefox on the Mac when I add 'controls' to the tag. And I'm sure this can be fixed by using a different skin or getting rid of the controls at the bottom of the video (well, I'm hoping that will fix it!).
BTW I'm using this in the head of my WP template
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
Oh, and Firefox is not falling back to the Flash Flowplayer, it's definitely playing the ogg file in the HTML5 video tag.
ctagney, thanks for taking the time to respond.
Question 1
Hmm, strange.
I have this in the header at the moment:
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
This is the code I have in the html page (I've replaced actual domain with ... as I don't want links to the site --- you can see the video on www. horizonyachtsgrenada .com/ new-yacht-sales-grenada/ at the top of the right-hand side bar:
<div style="margin:0; Padding:0;">
<video id="salesvideo" class="video-js vjs-default-skin" preload="auto" controls width="540" height="320"
poster="http://.../videos/horizon-dream-makers-splash.jpg"
data-setup="{}">
<source src="http://.../video/HORIZON_FINAL_HD.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://.../video/HORIZON_FINAL_HD.ogv" type='video/ogg; codecs="theora, vorbis"' />
<source src="http://.../video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="540" height="320" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":[http://.../videos/horizon-dream-makers-splash.jpg", {"url": "http://.../video/HORIZON_FINAL_HD.mp4","autoPlay":true,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://.../videos/horizon-dream-makers-splash.jpg" width="540" height="320" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>
</div>
Any ideas why it's not using the video.js?
Question 2
I've added that code to the page now, so hopefully once it's picking up video.js it will pick this up. I assume I won't need 'controls' in the video tag for this to work, is that correct?
Question 3
So, if I'm understanding your link correctly, I'm right in changing it from autoplay to having controls for it to work on the iPad and iPhone.
New issue:
It's not working in Chrome even though there is a webm version of the video! I'm beginning to go greyer ... just want the video to work now!! :(
Any help much appreciated.
Cheers,
Tracy
EDIT: BTW the video does play on Safari, Firefox, and Chrome on a different site (different server, different video code) so it's not the video itself causing an issue.
The players you're describing in firefox and safari sound like the native video players for each browser. In other words, you're not actually using video.js.
Question 1
Once you get it working, you'll notice that the players should look identical to one another in Safari and Firefox. Without seeing your code it's hard to say why your video.js player isn't getting initialized, but you need to do one of the following:
Include a data-setup='' tag in your video element, which you can use to specify options via a JSON value.
Have a separate script that calls _V_("video id", {}) once the page has loaded.
I recommend you use the second option since you have some additional setup to handle (see: below)
Question 2
The big play button you want is automatically hidden when controls are turned off, so you should just call it's show() method once the video player has been initialized.
<script>
_V_("example", {}, function() { this.bigPlayButton.show(); });
</script>
See the following for a working example.
http://jsbin.com/ijipag/2/edit
Question 3
See Can you autoplay HTML5 videos on the iPad?
The issue was I didn't include the call to the video.js
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
in the separate (non-WP) html page that's shown in the modal (FancyBox iframe) window. I've now included that and it's successfully calling the video.js and showing the big play button without the bottom controls in Safari and Firefox.
It's still NOT working in Chrome. In Chrome, when you click the play button it's just showing the poster image and the spinning loading gif.
UPDATE: Got it working in Chrome by moving :
<source src="http://www.horizonmotoryachts.com/video/HORIZON_FINAL_HD.webm" type='video/webm; codecs="vp8, vorbis"' />
above the calls to the mpeg4 and ogg files.
Tested on Firefox and Safari on Mac and its still working.
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'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.
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.