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.
Related
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/.
See how it links to a .ogg and a .mp3? Why is that? All the examples and applications I've seen do the same thing. Is it necessary to have two sources?
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
No, it's not necessary. The different sources are just possibilities to be tried in order; not all browsers are guaranteed to support all formats, and so you provide fallbacks.
(If you only want to provide one, the src and type can go directly on the <audio> tag, too.)
Not all browsers support the MP3 or OGG format, so both are usually included to insure cross-browser compatibility.
The Wav format can also be included, and unlike MP3 and Ogg, it supports every browser (minus Internet Explorer).
MP3 works with Internet Explorer 9+, Chrome 6+, and Safari 5+. Ogg works with every browser, minus Internet Explorer and Safari.
So the combination of MP3 and Wav, or MP3 and Ogg, would play the HTML5 Audio on virtually every major browser. Of course, it's a bad idea to include Wav and Ogg as a combo, due to the fact that Internet Explorer requires MP3 as a format.
So the multiple tags are included as a fallback.
Hopefully in the future, all the major browsers will support all the formats. Currently only Chrome does.
(Hope my answer doesn't sound like a tongue-twister.)
To make it simpler lol.
Firefox doesnt support mp3 (idk if they still dont)
So to make your player function in firefox you need the ogg as a backup.
Firefox will skip the mp3 and try to find the ogg.
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.
I have searched around quite a bit but have not solved my problem.
I have a video tag running as follows:
<video
class="ne"
src="{{ page | video_url }}"
muted="true"
volume="0"
controls
width="720"
height="480"
poster="{{ page | video_poster_image_url }}"
type="video/mp4">
</video>
I am using Jekyll for the URLs. They work fine.
The site is live at switzerlandllc.com. Click any video in FF and it shows an image and an X. Chrome and other browsers work fine.
If you grab the source of a video and load it in a new tab it plays fine. At least it does for me.
I have added:
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
to my htaccess file. I suspect that I don't need the .ogv or .webm.
I don't understand why loading the video URL will play the videos fine but loading the video into a video tag fails.
Any ideas?
This is caused by the limited support for the MP4 format within the video tag in Firefox. Support was not added until Firefox 21, and it is still limited to Windows 7 and above. The main reason for the limited support revolves around the royalty fee attached to the mp4 format.
Check out Supported media formats and Media formats supported by the audio and video elements directly from the Mozilla crew or the following blog post for more information:
http://pauljacobson.org/2010/01/22/2010122firefox-and-its-limited-html-5-video-support-html/
I can confirm that mp4 just will not work in the video tag. No matter how much you try to mess with the type tag and the codec and the mime types from the server.
Crazy, because for the same exact video, on the same test page, the old embed tag for an mp4 works just fine in firefox. I spent all yesterday messing with this. Firefox is like IE all of a sudden, hours and hours of time, not billable. Yay.
Speaking of IE, it fails FAR MORE gracefully on this. When it can't match up the format it falls to the content between the tags, so it is possible to just put video around object around embed and everything works great. Firefox, nope, despite failing, it puts up the poster image (greyed out so that isn't even useful as a fallback) with an error message smack in the middle. So now the options are put in browser recognition code (meaning we've gained nothing on embedding videos in the last ten years) or ditch html5.
We filmed a spokesperson on a green screen and have the video files ready in multiple formats.
With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?
Thanks
Yes, this sort of thing is possible without Flash:
http://hacks.mozilla.org/2009/06/tristan-washing-machine/
http://jakearchibald.com/scratch/alphavid/
However, only very modern browsers supports HTML5 videos, and this should be your consideration when deploying in HTML 5, and you should provide a fallback (probably Flash or just omit the transparency).
Chrome 30> supports video alpha transparency.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
Update: Webm with an alpha channel is now supported in Chrome and Firefox.
For other browers, there are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack. seeThru is one example. It works pretty well on HTML5 desktop browsers (even IE9) but it doesn't seem to work very well on mobile. I couldn't get it to work at all on Chrome for Android. It did work on Firefox for Android but with a pretty lousy framerate. I think you might be out of luck for mobile, although I'd love to be proven wrong.
These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:
<video>
<source src="video.mov" type="video/quicktime">
<source src="video.webm" type="video/webm">
</video>
Note: It's important that the WebM version come second since Safari currently supports WebM, but not WebM transparency.
Here's a demo you can test with
I struggled with this, too. Here's what I found. Expanding on Adam's answer, here's a bit more detail, including how to encode VP9 with alpha in a WebM container.
First, here's a CodePen playground you can play with. Feel free to use my videos for testing.
<video width="600" height="100%" autoplay loop muted playsinline>
<source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4'; codecs="hvc1">
<source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
</video>
And here's a full demo page using z-index to layer the transparent video on top and below certain elements. (You can clone the Webflow template.)
So, we'll need a WebM movie for Chrome, and an HEVC with Alpha (supported by Safari on all platforms since 2019).
Which browsers are supported?
For Chrome, I've tested successfully on version 30 from 2013. (Caniuse WebM doesn't seem to say which WebM codec is supported, so I had to try my way.) Earlier versions of Chrome seem to render a black area.
For Safari, it's simpler: Catalina (2019) or iOS 11 (2019).
Encoding
Depending on which editing app you're using, I recommend exporting the HEVC with Alpha directly.
But many apps don't support the WebM format, especially on Mac, since it's not a part of AVFoundation.
I recommend exporting an intermediate format like ProRes4444 with an alpha channel to not lose too much quality at this step. Once you have that file, making your WebM is as simple as:
ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm
See more approaches in this blog post.
At this time, the only video codec that truly supports an alpha channel is VP8, which Flash uses. MP4 would probably support it if the video was exported as an image sequence, but I'm fairly certain Ogg video files have no support whatsoever for an alpha channel. This might be one of those rare instances where sticking with Flash would serve you better.
While this isn't possible with the video itself, you could use a canvas to draw the frames of the video except for pixels in a color range or whatever. It would take some javascript and such of course. See Video Puzzle (apparently broken at the moment), Exploding Video, and Realtime Video -> ASCII
Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video. Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000. This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time.
more details can be found in the below link
https://github.com/m90/seeThru
webm format is the best solution for Chrome > 29, but it is not supported in Firefox IE and Safari, the best solution is using Flash (wmode="transparent"). but you have to forget "ios".
Quicktime movs exported as animation work but in safari only. I wish there was a complete solution (or format) that covered all major browsers.