HTML5 <audio> element not showing up in Firefox on Mac - html

http://fowlertown.com/projects/terry/widgets/audio.html
Or if you don't want to click the link, here is the code that matters:
<audio type="audio/mpeg; codecs='mp3'" controls src="sample.mp3">Your browser does not support the HTML5 <audio> element.</audio>
This isn't showing up in Firefox 15.0.1 and 16.0.1 on Mac OS X 10.7.4 which depresses me because this is crazy simple HTML5 code. It pops up for a fleeting moment on load but then disappears. It doesn't even show the fallback text.
Thoughts? Is it working for Windows users?
edit: http://html5doctor.com/html5-audio-the-state-of-play/ is where I got my browser support list, which indicates FF has supported the audio element (MP3 codec) since version 3.6.

You have to use this tag differently as in firefox you can't play MP3 files with such a code.
Here is the link for your help. http://support.mozilla.org/en-US/questions/758978
Firefox doesn't support mp3. See this http://www.codingforums.com/showthread.php?t=231069

Related

Audio in HTML5 Video tag

I noticed that using an audio file in <video> works fine.
Does this feature have good browser compatibility and is it an HTML5 standard?
I found this but it's from 7 years ago and has no answers.
Yes a <video> element is supposed to be able to play media resources that only contain audio data, just like an <audio> element is supposed to be able to play video media (without displaying the video stream).
A browser that wouldn't do that would be a buggy browser.
<video> tag supports most browsers like chrome, edge, firefox, safari, and opera.
It is a global attribute in HTML5.
For Audio you can also use <audio>.
If you want to know more there is something you can check out
https://www.w3schools.com/tags/tag_video.asp

html - video box doesn't appear in safari

I have pretty simple code that contain two boxes one beside the other here: http://fiddle.jshell.net/tjV3U/.
The first box contain some text, and the other one contain a video (code: <video width="..." src="..." controls=""></video>)
in google chrome the code works well, also in firefox and internet explorer, but unfortunately it doesn't work in safari and I can't figure out the solution for this problem.
Just try to open the fiddle link in google chrome and in safari.
Safari supports only the MP4 format for video players. not WebM and Ogg.

play mp4 video in ie7,8,9 firefox, chrome and safari using the HTML5 player - possible?

Is it possible to use only a mp4 video and the HTML5 player in ie7,8,9 firefox, chrome and safari
I've seen these links
http://blog.beverlyguillermo.com/post/14813549122/ie7-and-html5-video
and
http://w3schools.com/tags/tryit.asp?filename=tryhtml5_video
and
http://designwebkit.com/web-and-trends/10-good-html5-video-players-website/
Have you ever done this
Thanks
Try this http://code.google.com/p/video4all/ . Its a nice way you can integrate with all the browsers you have listed
If you are not satisfied try the answer here :- How to play the html5 video in IE8 Browsers

Displaying vertical videos with html5 on chrome

I'm building a simple page to display videos uploaded from my iphone using the html5 video tag.
if you're watching it with chrome you probably see this video is presented horizontal, although it's not- try to download it or watching it from safari (haven't tried another browsers).
I havne't found anything on the net mention this problem, is it a known chrome bug? does this tag any attribute that I can change to display it properly?
Thanks.
Edit:
looks like this also happen in IE
you could use style="-webkit-transform: rotate(90deg);" on the video tag along with a html5 compatible video player solution (otherwise you get rotated controls as well)
It's an encoding issue from iPhones. I downloaded the video and it was still displayed horizontally using mplayer. There is more information here:
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
and as suggested you'll need to re-encode the videos using a library that uses a more supported standard encoding. (Or try to transform the video, on the page but that would be ugly)

Chrome's HTML5 audio controls have a transparent background. How to fix this?

I have an <audio> element in a webpage. I'm happy to use the native browser controls, which are fine in Firefox, Safari, and Chrome for the Mac.
However, Chrome (12.0.742.122 on Windows 7) is displaying the native audio player without any background:
For comparison's sake, here's how it looks on Chrome (14.0.835.0) on OSX:
I realise my Mac's a couple of versions forward (it's on the dev channel) but this seems like a surprising issue. Any idea how to fix it?
Alternatively, can anyone recommend a completely painless player (with flash fallback) that I can drop it to style them all the same?
If you wrapped it in a div with a medium-gray background, wouldn't it work around the problem in Chrome 12 and still look the same in Chrome 14?
This is a known bug: http://code.google.com/p/chromium/issues/detail?id=82170