An audio for the web which is fully cross-browser needs some different formats to work on all browsers. Commonly I see that people use mp4 and ogg. But I want to be completely sure. Therefore I added webm and wav. Is this completely needed? Especially wav files as they are so heavy. This question should be thought thinking about performance for a responsive site.
This is my html example:
<audio controls="controls" data-music="1">
<source src="http://example.webm" type="audio/webm" />
<source src="http://example.mp4" type="audio/mpeg" />
<source src="http://example.ogg" type="audio/ogg" />
<source src="http://example.wav" type="audio/wav" />
</audio>
Will this all be downloaded and affect the global performance?
Additionally, does the order matter of the type of formats?
Related
I'm testing an EPUB with audio file, fixed layout format, in an 2012 iPad 2. I want to the audio file "autoplays" in one specific page with some text on it. After some tests, I've get some answers:
1.- Autoplay DOES work, when in the package.opf I set the values "landscape", "portrait", "both" and "auto" in the "rendition:spread" property; which create a synthetic spread for rendering the content (which, is when the system creates two adjacent pages simultaneously on the device screen).
2.- Autoplay DOESN'T work when I set the value "none", which is what I want to use in the mentioned property in the previous point (I don't want to use a "synthetic spread" in my design).
This is the code i'm trying in the xhtml file, the sound part:
<audio autoplay="autoplay" loop="loop">
<source src="../audio/latidos.ogg" type="audio/ogg" />
<source src="../audio/latidos.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
and this is the "meta" part about spread and layout of the book design in the package.opf file:
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:spread">none</meta>
Any comments about this issue? Perhaps the model of my iPad?
I have an html <video> tag with .ogg, .mp4 and .webm type of videos. I've also edited the .htaccess with the appropriate AddFile types. My video is supposed to play in the background. In Chrome, IE and Opera works correctly but in Firefox not. Here is my code:
<div class = "bgvid">
<video autoplay loop preload = "metadata" poster="images/pathos-lounge-restaurant.jpg" id="bgvid">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.mp4" type="video/mp4">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.webm" type="video/webm">
<source src="media/Luxurios-Pathos-Sunset-Bar-Restaurant.ogv" type="video/ogg">
</video>
</div>
And here is my page: http://freebeachbar.gr/pathos/
Two things
You have class hidden for container and lounge
and you have overflow:hidden for media all
You might wan't to remove that
I'm creating a website for a musician who's website will be checked around the globe, so the compatibility of the reproduction of the audio element is essential.
Therefore I thought about the following to cover all possible browsers:
<audio controls="controls" data-music data-bind-target="{{ fileName }}">
<source src="assets/audio/mp3/fileName.mp3" type="audio/mpeg" />
<source src="assets/audio/ogg/fileName.ogg" type="audio/ogg" />
<source src="assets/audio/webm/fileName.webm" type="audio/webm" />
<source src="assets/audio/wav/fileName.wav" type="audio/wave" />
</audio>
I've seen websites which only insert mp3 and ogg, so I would like to know if I'm taking it too far. I've checked the MDN site regarding the formats but not sure what to follow, therefore I would like the opinion of other developers.
Creating these formats takes no effort so thats not the issue. I would like to know:
If this helps to make the audio file better cross-browser?
Does it affect the global performance or not?
Do all the files download or only the first one which works in the order displayed?
Which order would you recommend? if it matters...
This is driving me crazy. When I try to view the video embedded into the page, I get the following error in firefox "Video format or MIME type is not supported".
I am on IIS, and I do have the correct MIME type for MP4. Is there anything else I could check?
The issue ended up coming from our CMS.
The MP4 file was being loaded though a script, and that script's name contained "-", which the CMS decided to replace with ".". Simply opening up Firebug's Net tab allowed me to fix the error in a matter of minutes.
Firefox does not support H264 anyway, so that MP4 file had to be loaded through Flash.
I had problems with Firefox because I only had an mp4 file, but this javascript seems to work ok.
The new video tag is used and the object code is provided as a fallback. When Firefox can't find the non existent ogv file it throws an error, which runs the javascript to remove the video tag and just leave the fall back object code, which runs fine in Firefox. (I'm using JQuery, but the same could presumably be achieved with plain javascript.)
<script type="text/javascript">
function kill_video_tag() {
// Remove source tags
$('#vidid').children('source').remove();
// Grab everything else inside
var ob = $('#vidid').html();
// Add the fallback code before the video tag
// and then remove the video tag
$('#vidid').before(ob).remove();
}
</script>
<video id="vidid" width="320" height="256" controls>
<source src="http://www.mysite.com/nice_video.mp4" type="video/mp4" />
<source src="http://www.mysite.com/this_does_not_exist.ogv" type="video/ogg" onerror="kill_video_tag();" />
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="320" HEIGHT="256" >
<PARAM NAME="src" VALUE="http://www.mysite.com/nice_video.mp4" >
<PARAM NAME="autoplay" VALUE="false" >
<EMBED SRC="http://www.mysite.com/nice_video.mp4" TYPE="image/x-macpaint" PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="320" HEIGHT="256" AUTOPLAY="false"></EMBED>
</OBJECT>
</video>
I have an audio object with two sources, in M4A and OGG formats.
The code is as follows:
<audio id="audio1" controls="controls" preload="none">
<source src="music.m4a" />
<source src="music.ogg" />
</audio>
I can then call document.getElementById('audio1').play() and it starts playing.
It works well in all browsers. But in Safari, it only works if the M4A file is the first source.
I.e. if I have this code with OGG file first:
<audio id="audio1" controls="controls" preload="none">
<source src="music.ogg" />
<source src="music.m4a" />
</audio>
Safari won't react to the play() JavaScript call, only to the mouse click on the play button.
Is there any solution to this apart from always putting the M4A file first?
Thanks!
Have you tried telling the browser what MIME type you're using.
Use "audio/mp4" as the MIME type (don't forget to add it to your .htaccess)
<audio id="audio1" controls="controls" preload="none">
<source src="music.oga" type="audio/ogg" />
<source src="music.m4a" type="audio/mp4" />
</audio>
Maybe try adding an EMPTY.m4a file first? .5 sec of no noise?
I have been having trouble with .ogg on safari myself.
I never thought to try another type of file 1st.
This will probably fix my problem. Thanks.
My problem was gaps in .mps files. So I switched to .ogg.
Adding a default blank .m4a might help your problem.
I'm curios to know if this works, post either way.