I can't seem to get the audio element to work properly in Safari (v 5.1.2). I've tried moving the file to the same folder as the page, using both mp3 and mpeg MIME types, and changing filenames. It seems to work fine in all other browsers, but in Safari the audio element is created, but only shows that it is loading and will not play. Any ideas?
<audio controls preload="metadata">
<source src="audio/song.mp3" type="audio/mpeg" />
<source src="audio/song.ogg" type="audio/ogg" />
</audio>
Thanks
Does your website use an invalid HTTPS certificate or a HTTP Auth? I had this issue but found that Safari was having issues with either my invalid HTTPS cert or the Basic Auth (on the staging server).
Safari does not seem to load sounds reliably with preload="metadata".
You can try this in the console, of any webpage really:
var snd = document.createElement('audio'), src = document.createElement('source');
src.src = "http://www.largesound.com/ashborytour/sound/brobob.mp3";
src.type = "audio/mpeg";
snd.appendChild(src);
snd.preload = 'metadata';
snd.play();
It doesn't work. Then:
snd.preload = null; // equivalent to 'auto'
And voilà! It starts playing.
(I've filed this as rdar://problem/11481585, not that that helps any of us.)
Try installing apple quick time. I don't know about desktop versions but the IOS versions use quicktime to play sound from safari.
yes, an invalid HTTPS certificate or a HTTP Auth does not works on safari ( tested on customized safari browser on low end linux device ).
In order to make it work, please use valid https certificate.
Related
My mp4 videos are not loading in safari for some reason, in every other browser the html5 player works absolutely fine, but in safari it doesn't. This is for a clients website i'm helping with.
I must stress, i cant host these videos on a different server or video hosting platform. does anyone know how i can this to work.
http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4
my code for the player :
<video class="eltdf-self-hosted-video" controls="true" preload="auto">
<source type="video/mp4" src="http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4">
</video>
You server appears to be not set up to handle range requests properly.
Some browsers will ignore this and simply handle the full video being downloaded, but Safari seems to not play the video in this case - unfortunately the error message in the console is not that helpful.
You can check this by doing a range request test - Apple explain the approach here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request. If it downloads the entire file, you may need to update the media server.
Doing this for your video confirms that the server is downloading the full video rather than just the range requested:
It may be worth contacting your hosting provider to ask them to correct the server configuration.
I'm have the problem that video doesn't work in Safari, but works perfectly fine with Chrome and Firefox.
<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>
Get fom VLC codec informations:
video h.264/mpeg-4 avc
audio mpeg aac audio mp4a
This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.
You could workaround that issue by either
Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...
*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.
Another possible solution for you future searchers: (If your problem is not a mimetype issue.)
For some reason videos would not play on iPad unless i set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
If you haven’t solved the problem yet then go to your phone setting then choose safari and tap Clear History and Website Data, that worked for me the problem wasn’t the code but safari itself.
Just as the title says. I've been working on a site and had added a big html video for the main page.
I looked over online...myme types checked, h264 encoding checked. I looked over old versions of the file i've been working on and noticed an old pure HTML file which loaded the video in all browsers with no problem (which I guess discards any encoding or video quality issues)
It all was working neat. Even displaying in firefox, chrome an IE. BUT for some reason the video does not load in IE whenever the file extension for the page it's on is .PHP. To be precise, whenever i try it from my LOCALHOST (XAMP with Apache server)
I also checked the dev tools and under network it does show it as the right content type and no error whatsoever (getting normal 200 result)
Here's the snippet of the video tag used:
<div id="video_container">
<video autoplay loop poster="video.jpg" id="header_vid">
<source src="imagenes/video.mp4" type="video/mp4">
</video>
LOL, and just noticed...not even the poster image is showing in IE...wtf.
I'm so confused, could anyone enlighten me a bit please? Could it be something related to the path used? been digging around the net for days _
Check if your url is formed properly when you are using .php extension on IE. Same issue addressed quite a few time here.
mp4 from PHP - Not playing in HTML5 Video tag ||
Play mp4 file through php in HTML5 Video Tag in Chrome?
I notice IE doesn't like the properties without value, so try
<video autoplay="" loop="" poster="video.jpg" id="header_vid">
I need to play .m4a files (recorded on iPhone) in IE(9+) and Safari (iPad, iPhone). I am facing problem with setting correct MIME Type. For playing in IE10 I need to set audio/mp4 but for Safari audio/aac.
With audio/mp4 I am getting Cannot play audio file on iPad.
With audio/aac I am getting Error: Unsupported audio type or invalid file path in IE
Is there a type I can set for both?
<audio controls="controls" autoplay="autoplay">
<source src="play.aspx?filename=sound.m4a" type="audio/mp4" />
</audio>
Notes
Using an alternative player is not a solution for me.
I serve the files thorough .aspx page so I can control HTTP headers.
From observing the page HTML 5 Audio Across All Browsers using m4a, oga, mp3 and Flash it seems that possible solution is to give type="audio/mp4" and NO conten-type header. However removing HTTP header in aspx is rather too complex for problem I am trying to solve(see Removing/Hiding/Disabling excessive HTTP response headers in Azure/IIS7 without UrlScan).
Audio is still in working draft, so browser experience will vary.
Having said that, the mime type that's most prevalent is audio/x-m4a. Some sites show audio/m4a-latm as a valid mime type for m4a audio but as of this writing, even Chrome doesn't recognize that mime type.
You can try this snippet in different browsers to see if it works - I verified it in IE11, Chrome (v37) and IE9 (emulated via Dev Tools).
Audio Tag sample
I've also found (personal observation) that audio recorded on iPhone doesn't play most of the time on web. Almost all browsers say the file is invalid and if you download the recorded file, it doesn't even play in media players (e.g Windows Media Player). I suspect iOS core audio is to blame here but haven't found anything conclusive yet. Audio recorded from Android works fine though.
At this point, having a flash fallback seems like the best option (won't help on iHateFlash devices though).
<source src="../../_media/videos/Video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
I am wondering why this video is not loading in Safari 5 - Chrome / Firefox are working perfectly.
WebSniffer is telling me the correct type but in the safari dev tools i receive Type=undefined.
Does anyone have a clue? I also added a .htaccess but am not sure where exactly to place it - root, media folder or html folder?
Great if anyone could help me
Found the issue last night. Since I was on a testing environment using https and authorization Safari could not load the videos.
All other browsers did have no problem with it - Safari however does have issues with this:)