I found a nice way to use the audio tag, Audio for everybody. It tries first to use the html5 player, then wmp, then flash, then an image.
Unfortunately, the mp3 format isn't supported on firefox even if it's supported by the os, and it displays an X instead of degrading to the flash player.
There's a way to let firefox ignore the html5 player?
ps: converting all my mp3s to ogg it's not an option
I solved using this code: Quick Guide to Implementing the HTML5 Audio Tag (with Fallback to Flash)
The js code will detect lack of mp3 support in opera/firefox, hide the audio and create a flash player
edit: their solution to hide the controls does not work in my firefox, change
document.getElementsById('audio_with_controls').style.display = 'none';
with
var audio = document.getElementById("audio_with_controls");
audio.removeAttribute("controls");
Related
In my Windows Phone application I'm loading a html site into a view, really simple stuff with this method:
var itemView = view as NorwegianBrowserView;
var webBrowser = itemView.browserContainer;
webBrowser.Navigate(new Uri(_globalAccessObjects.ActiveNorwayLink,UriKind.RelativeOrAbsolute));
The site loads everything except a video clip. Or well it knows the video is there but it just shows a black square. And pressing that black square does nothing.
As i side note i can add that i got the same application for iOS and Android and they both got no problem in loading the very same website(+ they load the video). And here i can press the video clip and it will start playing.
Am i loading the website into my view the wrong way? or does microsoft.phone.controls.webbrowser not support a video clip?
Any help is much appreciated.
The ability to play video clips in line in a web page is dependent upon the version of Windows Phone you are running on and the format of the video.
Only Window Phone 8.1 supports playing video within a page. Unfortunately this isn't yet widely available.
Even then the video format may still be an issue and if not supported could lead to a placeholder image being displayed.
We don't have the .ogv format available from the encoder in our system, but I would like to use the HTML5 Video tag with an MP4 source for those browsers that support it--unfortunately, Firefox does not support MP4.
After some experimentation, it seems that once you put the video tag in Firefox, it will figure out if any of the provided sources are playable, and if none of them are, it will do nothing. It will also ignore the nested fallback object. This is technically the correct behavior per the HTML5 spec, but it seems that if Firefox can't play the MP4 source it should just render the inner object tags.
I know there are JavaScript techniques for testing whether a browser "canPlayType", but I would rather avoid the JavaScript insertion of the video tag.
Am I correct that Firefox ignores the internal fallback markup in a video whether or not the video tag sources are supported?
This is technically the correct behavior per the HTML5 spec
I believe you have your answer. ;)
I know Firefox strives for compliance so I doubt they would go against the grain here. Although, I'll admit, it does seem odd that the spec doesn't allow for a fallback.
I'm developing an application that has to display some html content that contains an html5 video (no flash/silverlight plugins). The html and the video are playing fine in safari, but when displayed inside the webview in my application i get a black box where the video should be. But the video seems to be playing, because if i click fullscreen, the video goes fullscreen and is correclty displayed, and also the audio is present, in fullscreen and non fullscreen mode. It seems like the video is played behind the page.
Maybe i'm missing something as a newbe?
does anyone has an html5 video correctly displayed inside a webview on a mac os x 10.6?
Thanks a lot!
Here's my code:
<audio controls preload="auto">
<source src="audio/batcat.mp3" />
Your browser doesn't play MP3s. Download the audio instead.
</audio>
In Chrome & IE9, the browser displays the native audio player.
In Firefox, I would expect it to show the fallback text and the link. Instead, it shows an ugly grey box with an X in the middle and doesn't show the fallback content.
Is this a Firefox bug, or am I doing something wrong?
Are browser makers actually saying include every possible format, or don't use the element at all. That seems a bit harsh.
EDIT
The answer to the above question is "yes" apparently. All I can say to that is :(
Firefox should indeed fallback to the link to the audio file as you've said. It goes through the source list and if it can't find one it is able to play, it should move on.
Perhaps try adding the type aatribute to the source declaration to help the browser decide it won't be able to play it?
<source src="audio/batcat.mp3" type="audio/mp3">
Also if you had a sample page so we could see it in action (or not as the case may be!) that would be helpful.
edit
I've tested it myself and indeed you are correct, it simply doesn't work. How strange, I would have expected it to. The only way to get it to work was by adding a source with an OGG file which it can play.
I suggest you use something like Modernizr to check if it can play MP3s or not.
You're right. This is because each browser supports different "codecs." Originally, HTML5 was going to have a single codec, but the browser vendors could not agree on which one (patent-encumbered vs. open source) so that requirement was dropped.
For example, for video, IE and Safari support H264 (MP4), Chrome, FF, and Opera WebM/Ogg.
To ensure it works in all browsers, you can supply multiple source elements and encode your video three times. Mp4 first, WebM or Ogg second (browsers that support video will try each source element until they find one they can play. Note: currently there is a "bug" on the iPad where it can only play the first source element)
You can even embed a Flash object for your fallback so your video will also work in older versions of IE (<9). You'll end up with something like this:
<!—Multiple videos with alternate Flash content-->
<video controls>
<source src="rocpoc.mp4">
<source src="rocpoc.ogv">
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="rocpoc.swf"/>
</object>
A movie by Rocky Lubbers
</video>
If you want to show a link to the file if the browser cannot play the MP3 file, you can use a little bit of JavaScript code to test if the browser can handle the MP3 format and show a link to a file instead of the video instead. The JavaScript method to call is canPlayType.
//Checking for browser support
//canPlayType returns null, maybe, or probably (the best)
//You can check if they are supported in navigator.plugins
var support = videoElement.canPlayType('video/some-format;codecs="some-codec"');
Alternatively, (for video only, I think) you can use services like vid.ly (http://m.vid.ly/user/) that serve up the right files from the cloud.
Same is true for video! If you embed an MP4 file only, Firefox does not jump to the fallback but renders the grey "I cannot play this format" box. You have to use JavaScript to detect which codecs the browser is able to play.
http://praegnanz.de/html5video/firefoxtest
I've been playing around with the HTML5 video tag and I'm puzzled as to how best to degrade when you can't support a codec?
For older browsers (or IE) that don't support the video tag at all this quite is straight forward:
<video width="320" height="240">
<source src="vid.ogv" type='video/ogg'>
<source src="vid.mp4" type='video/mp4'>
<object>
<!-- Embed Flash video here to play mp4 -->
<object>
</video>
They will fall through and will receive the Flash version (or other alternate such as an image!)
How about when the browser does support the tag but not the codec - Like FireFox 3.5 for example - and I can't support OGG (possibly because I already have vast archives of H.264):
<video width="320" height="240">
<source src="vid.mp4" type='video/mp4'>
<object>
<!-- Embed Flash video here to play mp4 -->
<object>
</video>
All I get in FireFox 3.5 is a grey box with an x in it. This isn't exactly a great user experience for FireFox users! I can only think of using JavaScript to check for FF3.5 and change the DOM!! is this really the bad old all over again! ...or is there some part of the spec I'm missing out on like a 'novideo' tag?
An important part of graceful degradation is the querying capabilities... Dive into HTML5 is a great read... specifically, look at the video section. Relevant code here:
function supports_h264_baseline_video() {
if (!supports_video()) { return false; }
var v = document.createElement("video");
return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
}
Note: this does require DOM checking, but for capabilities and not browser signature. It's the right thing to do :-)
Once you know if the browser can support, you can show your video tag or pull up a lightbox or redirect as you see fit.
One really good way to tackle this problem is to use modernizer js library.Its really easy to use and quick.It can check HTML5 capabilities in the user's browser . Visit the site here : http://www.modernizr.com/
Video for Everybody's test page indicates that Firefox 3.5 can only play OGG. You might want to add a flash version if you really don't want to add OGG. VfE also does not use JavaScript, so it might be worth looking into.