I have an HTML5 audio source defined as follows:
<audio>
<source src="../audio/segment.mp3" type="audio/mpeg" />
<source src="../audio/segment.wav" type="audio/wav" />
</audio>
The .mp3 is there for other browsers, and is expected to fail. The .wav file used to work without issue, but now does not. I have tried going over FF change logs and havent found anything in the latest releases. I am using FF 20 on Windows, and the error i receive now is:
"Media resource http://website.com/segment.wav could not be decoded"
If i throw the .wav URL in to the address bar FF will play the file without issue.
Note that at time of writing FireFox won't play 24bit .wav files. Convert them to 16 bit and they'll be happy.
I just faced this exact situation: the WAV file plays when loaded directly in Firefox, but not in an <audio> element. The problem for me was that the 44-byte header of my WAV files was invalid. After ensuring that the file length, byte rate, and block align were correct, I was able to play them just fine.
Here's the description of the WAV header specification that I used: https://ccrma.stanford.edu/courses/422/projects/WaveFormat/.
Related
I'm having a hard time trying to play some local mp3 files using Google Chrome (>57):
Playing directly in Chrome it doesn't work - the controls are grayed out;
Including an HTML5 audio element in page - same result. The code is below:
<audio controls>
<source src="[filename].mp3" type="audio/mpeg">
</audio>
My web server: Centos 6.5 running Apache 2.2
The audio files (mp3s) are just simple recordings no bigger than 5MB, 128 kbps.
The permissions of the files shouldn't be the issue (777).
Also, I added a .htaccess file that has these directives:
AddType audio/mpeg .mp3
Header set Accept-Ranges none
The same thing happens with .ogg files.
No error is thrown.
Everything works fine in Firefox, Edge, IE11.
The only way I can make it work is to serve the mp3 files (the same ones) from another location (external, another box) - so definitely is something wrong with my box. But what?
I am trying to test if some audio files we currently have, can be played via HTML5.
The html code is as follows:
<audio width="720" height="405" controls src="https://machinename/media/play?ID=2" type="audio/wav"></audio>
When the page loads, it seems to be doing something, and later fails with a message that says Invalid source.
If i then look at F12 for more debugging info, it says:
AUDIO/VIDEO: Unknown MIME type
The content being rendered by the tag src="abc" is a wav file.
What am i missing? I am testing in IE11 and Chrome 43.
Any help much appreciated.
Since this seems to be a popular question, I will explain what the error was and how i fixed it.
At first glance it might seem that setting the src property to a url link is not quite right, but it infact this url link renders me a wav file. However the wav could not by played by the HTML5 autio tag, because of its encoding type; That is, the encoding of the content of the wav file. This can be mulaw, alaw, linear etc. Alaw is not a supported format for HTML5, so I changed mine to Ulaw, and now it is working perfectly.
W3C suggests that WAV files are not supported by Internet Explorer and the only file type that works across most browsers is mp3.
I also faced this issue while using a .wav file. I converted it to .mp3 and it worked fine.
<audio controls>
<source src="https://machinename/media/play?ID=2" type="audio/wav">
</audio>
You should be using the HTML5 <audio> ...</audio> tags for your purposes.
A sample code for wav would be as follows:
<audio controls>
<source src="abc.wav" type="audio/wav">
</audio>
Currently, there are 3 supported file formats for the element: MP3, Wav, and Ogg:
Chrome supports MP3, Wav, and Ogg formats, and Internet Explorer currently supports MP3 only, hence the possible invalid source error message you are seeing.
Simply convert all your wav files into mp3 and you should be safe for all browsers!
You can read more here http://www.w3schools.com/html/html5_audio.asp
Hope this helps!
I'm developing a Joomla-site (2.5) and embedded an audio file (mp3) in a K2-article using the html5-tags (see code below). The mp3 is playing perfectly in Firefox (vs 16.02) , IE (vs 8.0.6) but not in Google Chrome (vs. 23.0) . Strangely enough, the problem seems to be related to this particular mp3 file only, other mp3's are doing fine, both in Chrome, Firefox and IE.
<audio autoplay="autoplay" width="200" src="images/tonesound/mp3/01funkybeats.mp3" type="audio/mp3" controls="controls" preload="none"></audio>
The file is rather large (11.4 MB), after 15 seconds or so the music starts playing (in Firefox and IE, not in Chrome).
You shouldn't use MP3 on the web. The best solution is to encode all your audio to AAC and Ogg, since those two formats cover all browsers, whereas MP3 definitely won't work everywhere.
Your MP3 file's first few frames are corrupt. Try re-encoding the media.
You can see this with the debugging output in VLC.
I'm having an issue with getting local videos working for the HTML5 Video element.
If I try and view a local OGG or WebM file directly, in Firefox 16.0.2 it works, but in chrome 22 it does not work!
However, if I view an OGG file on another webserver, it works correctly.
For example this file
http://www.quackit.com/video/pass-countdown.ogg
Works correctly for me, but if I save it onto my own server as
http://test.jammaloo.com/pass.ogg
Then it works in Firefox, but Chrome will not play it.
I believe the mimetype is being set correctly, can anyone help me track down the issue?
First of all try with adding support for more video types
Link - http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html
video id="sampleMovie" width="640" height="360" preload controls
<source src="HTML5Sample_H264.mov" type='video/mp4;' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg;' />
<source src="HTML5Sample_WebM.webm" type='video/webm;' />
video
Second check your .htaccess file for content type - add mime type for webm, ogg, mp4
Link - http://docs.sublimevideo.net/troubleshooting
Link - http://www.htaccess-guide.com/adding-mime-types/
These solved my problem of playing video in HTML5 video tag. Hope it helps you too.
As i checked in the CHROME your content is not getting loaded with correct "TYPE"
If applicable (and nothing works) you can use- http://www.longtailvideo.com/players
I'm pulling my hair here trying to figure out why Safari (v6) won't play .mov files.
This is my setup, simplified -
<video width="800" height="450" controls="controls" preload="none">
<source src="example.mov" type="video/mp4" />
Your browser can't play this video.
</video>
What I'm trying to achieve is uploading movie clips to a WordPress blog from an iPhone. iPhone saves video in .mov with h264 encoding (correct?). It would be too much of a hassle for the client to render other formats as well when uploading, and we decided to settle with this format.
In Chrome, I can see this video but in Safari it won't play, even when accessing the file directly. The player simply displays its UI bar with a loading statement. I get no errors.I've also made sure to set the .htaccess file to include AddType for .mov / quicktime.What could I possibly be missing?
Could you please put this example online? Be good to examine this example.mov with ffprobe.
IOS Safari seems very sensitive how MP4s are encoded. Only thing I've found that works for me is the libx264-ipod640.ffpreset with ffmpeg. See https://github.com/kaihendry/recordmydesktop2.0 for more.