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.
Related
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.
So I'm putting together a very video-heavy project with self-hosted videos in HTML5. I've got my videos encoded in both H.264/AAC MP4 and WebM formats, and they work beautifully in Chrome, Firefox, Safari, Mobile Safari etc. All good.
This is the most basic version of my code (in the production site I'm running it with VideoJS on top, however whether it's there or not, this problem occurs so I've removed the code for it from this example):
<video preload="true" width="720" height="406" controls="true">
<source src="/55.mp4" type="video/mp4">
<source src="/55.webm" type="video/webm">
</video>
But Internet Explorer refuses to play ball. When I load up the page in IE 11, I just get a video decoding error:
In Internet Explorer's developer tools, I can see that it's getting a content type of video/mp4, and just to completely eliminate server issues I've tried it on both my local Apache install and my web hosting. If I use the console to get the playback error, I get MEDIA_ERR_DECODE : 3, which, according to the site I just linked to, means
An error has occurred in the decoding of the media resource, after the resource was established to be usable.
This tells me that there's a problem with the video encoding... but I can't see it.
The video files were originally exported as QuickTime videos from Adobe Premier or Final Cut Pro (I'm not sure which the video guy uses), and then run through Miro Video Converter to output MP4 and WebM formats. When I open the MP4 files up in VLC, it shows me the following information about the codecs in use:
I can't see anything wrong there; it looks exactly like every reference I've found online says MP4 video should be for maximum compatibility - H.264/AVC video and AAC audio.
Can anyone see anything wrong with what I'm doing? I'd love to be able to post an example video, however I can't due to privacy reasons. All the same any help would be greatly appreciated.
So this is somewhat embarrassing, but I did eventually figure it out.
The problem wasn't so much with Internet Explorer as it was the VM I was using to run Windows to test in Internet Explorer.
Essentially, I was running Windows 7 inside of a VirtualBox VM. When I (in desperation) sought out an actual physical machine running Windows... lo and behold it played!
I can only assume that the video drivers provided by VirtualBox didn't like decoding MP4 or something. The videos played fine in other browsers, but I'm guessing they decode/render video differently to how IE does.
I had the same issue recently with VirtualBox running Windows7 on MacOS. Solved by enabling 3D acceleration in the "Display" settings for the problematic VM.
The OP is a genius. I was struggling with this same issue for days and could only test on a windows machine today. This led me to change the configuration of my Parallels Desktop v15.
Im running IE 11 on Windows 8.1 and changed in the Graphics > Resolution > Advanced settings > Vertical synchronization should be ticked off.
Maybe this will help other people.
Maybe worth a shot: Rebooting Windows 7 within VMWare Fusion solved it for me.
I ran into this peculiar problem that I couldn't get HTML5 video to loop on my local development environment (ASP.NET + IIS7). The video autoplays just fine. My code looks like this:
<video id="frontpage-video" autoplay loop>
<source src="http://test-site:8084/video_mp4.mp4" type="video/mp4">
<source src="http://test-site:8084/video_webm.webm" type="video/webm">
</video>
If I change video source URLs to some publicly available URLs (for example to dropbox), loop works just fine. This is not a major problem since I think (hope) it will work once my site goes live and the video is publicly available.
My question is: Can I make the video loop if my video is not publicly available?
I couldn't find similar problems by googling. Could it be some kind of IIS setting that prevents videos to loop?
Update 1: The problem seems to occur only in Chrome. Firefox and IE works fine.
Update 2: It seems that the video will stop at the end but never returns true for element.ended
> document.getElementById('frontpage-video').duration;
< 16.12
> document.getElementById('frontpage-video').currentTime;
< 16.12
> document.getElementById('frontpage-video').ended;
< false
Update 3: Problem is either in IIS or in Telerik's Sitefinity CMS. Server should send a "206 Partial Content" status but instead it sends 200 OK. Has any Sitefinity users had this problem and know how to solve it?
It looks like your problem is that you're not using HTTP Byte Serving. Your server is sending a "200 OK" response, but it should be sending "206 Partial Content" along with these headers:
Accept-Ranges:bytes
Content-Range:bytes 0-1492370/1492371
The byte range request allows the browser to request only the portions of the file that it needs. So if you seek around, it can skip right to that point.
With the regular 200 response, you will usually at least find that you can't seek in the video. But, depending on how your video file is encoded and where in the file the metadata is placed, you may see more problems. Sometimes the file might not even play at all. WebM is usually more robust than MP4, which can be all over the place.
I don't know IIS well enough to tell you how to configure it, but try starting here:
http://blogs.visigo.com/chriscoulson/easy-handling-of-http-range-requests-in-asp-net/
Chrome/Opera can't loop the video if the video itself is not served with HTTP 206 Partial Content response but 200 OK instead.
The problem is that Sitefinity's storage providers do not support partial content (version 7.0). They are planning to implement this for the future.
At the moment the possible workaround is to use an external blob storage provider such as Azure, Amazon or ExternalFileSystem (ExternalFileSystemStorageProvider).
I got this information from Sitefinity's support team.
May be MIME type in IIS is not set up for MP4.
Open IIS, and locate you default page. You'll see MIME type in right pane.
Click Add and put field1=.mp4 and field2=video/mp4.
Restart IIS.
Hope this might work.
In your question, your video-element doesn't have the id frontpage-video (but i guess it's copy paste?)
check if the video end event is called in your webkit browsers, and if so, restart your video.
.
<script type='text/javascript'>
document.getElementById('frontpage-video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
//restart your video
}
Here is the configuration of system I am using
Ubuntu : 12.04
Mozilla Firefox : 26.0
I have a mp4 file, when I open it directly in browser like
http://localhost/MyProject/web/video/samples/A001C026_140418WK.mp4
It runs in browser properly, but when I try the same file to render through html5 video, it is not getting played and shows below error.
No video with supported format and MIME type found.
I know this question is appeared many times but I did not get the clear way to kick this problem, second thing this file is getting played properly using <embed> tag.
Video tag syntax
<video width="854" height="480" controls>
<source src="{{asset('video/samples/A001C026_140418WK.mp4')}}" type="video/mp4">
Your browser does not support the video tag.
</video>
path specified is correct, I have checked properly.
Please guide, where the things are going wrong or missing.
Thanks in advance.
Your problem seems to rely in the fact your mime types are not properly configured server side. Have a look here for set up steps. Make sure you restart/reload your web server for changes to be taken into account
After you have checked that it should work in a HTML5 video tag.
For MP4 H264/AAC to work with Firefox on Linux you need to have GStreamer codecs being installed. But I guess you have that covered. You can find more information in this article section notes.
You can check this question for further troubleshooting steps.
My code is basically this
<audio controls preload="metadata">
<source src="linktofile.wav" type="audio/ogg">
</audio>
In Firefox 18.0.1 - it results in 8.4 KB data download (checked on Firebug).
But in Chrome 24.0.1312.52 m - it starts downloading the entire file (In developer tools - it shows download size in MBs).
What gives?
As I understand preload values are hints for the browser, not absolute commands. In other words, they are a suggestion for how the browser should behave. The browser may or may not follow the hint so don't be surprised if it doesn't always work.
http://www.mediacollege.com/internet/html/audio/preload.html
Version v42 and above now seem to respect this. Yay!
(current beta version as of yesterday)
You can see now a 206 partial content request, and 66kb downloaded (my video is 600kb+)
However: VERY IMPORTANT
In case you didn't know, Chrome can only have 6 simultaneous connections at the same time to the same server.
Currently in v42 + v43 they have a terrible bug which means that once the metadata is loaded that file is not released back into the 'pool' for available connections. So if you load 6 or more videos the 7th blocks and won't download.
I've reported this as a bug https://code.google.com/p/chromium/issues/detail?id=468930
This may not be the case for all videos, but I have 10 short MP4 videos encoded with Adobe Media Encoder and they get stuck.
If in doubt, or experiencing this problem you've got no choice but to set preload='auto' for now. Hopefully this bug will never make it into the wild.
preloading is fixed, and has been for a while
the behavior with preloading with it holding the connection is not a bug.
It keeps the connection open to allow for stream protection by use of one time tokens.
If it didn't do this, the audio or video wouldn't even play if it is protected by a token.
Therefore, chrome MUST keep the connection open until the page is left or closed.