I am displaying a video with the html5 video element. The source is a pre-signed url from Wasabi s3. It works well on Chrome but it won't play on Safari. I did some research and it seems like this is usually due to the server not being configured to return a 206 code. However, I did check the server and it seems to support byte-range requests.
Here is the network tab. Any help would be greatly appreciated.
Ok, it seems like I usually get stuck on those minuscule problems. Turns out that Safari, unlike Chrome, doesn't like to play files without file extension. Adding ".mp4" to my files solved the problem...
Related
Here is the link to the bigcommerce store I'm working on. It shows background video on all the devices except IOS devices on any browser.
https://axict.mybigcommerce.com/
Looking for help in this weird issue.
Thanks in advance.
Here is the video element code,
<video id="bannerVideo" class="bgVideovideo" autoplay loop muted playsinline>
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.webm"
type='video/webm;codecs="vp8, vorbis"' />
<source src="https://store-1anxrygvum.mybigcommerce.com/content/banner-video.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
Your browser does not support the video tag.
</video>
From a quick check this actually does not work on Safari on MacOS either and it does on Chrome on the same Mac.
Looking at the network traffic you can see the server responds with a '200' to the byte range request from the browser for the video, which Safari does not handle well, although Chrome does:
The most common root cause of this issue appears to be servers that are not configured to handle range requests in what Safari consider the correct manner. It expects to see a '206' response when it sends a request with a byte range.
There is more discussion and examples in the answer here: https://stackoverflow.com/a/32998689/334402
Looks like you've uploaded the video to WebDAV - just like Mick's answer, the file hosting server that BigCommerce WebDAV uses is not configured to send the correct request type that IOS/Safari is looking for when loading a <video> element's source.
When I ran into this, I had to upload the video to AWS S3 Storage. You should be able to get 5GB permanently on the free tier.
I am trying to figure out why an MP4 video is not working on our server only in Safari 9.
I have tried the video on my local device and it plays just fine on the website using the same version of Safari.
It appears to only not be working in Safari 9 on the server. I believe all the MIME types are setup on the server because the video works on other browsers.
The site is behind Cloudflare and I have tried using a file rule on .mp4 for Cloudflare to ignore and not serve that file.
Any ideas on what else I can try to get this fixed in Safari?
I'm trying to resolve a similar issue myself. I found the following SO piece that might help? Safari 9.0 can not play mp4 video on the storage server
In summary Safari doesn't make a full Range request in the header, unlike Chrome and other browsers. As a result it doesn't know how to interpret the response.
Further reading suggests that Apple requires HTTP servers to support byte range requests. https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
It also looks like Apache <= 2.2.20 surfed a DoS exploit back in 2011 with Range Headers and were subsequently disabled by default. http://httpd.apache.org/security/CVE-2011-3192
I also think the issue is with Cloudflare. The mp4 from my tags are working on all browsers, except Safari. Once Cloudflare has been paused, the videos work on Safari too. Resuming Cloudflare recreates the issue.
If your server is Apache try placing this in .htaccess
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary
This solved videos not loading for me in Safari on a domain with Cloudflare enabled.
I think it's related to video or music content that needs to stream and based on CloudFlare must move to a subdomain like cdn.domain.com
Sites that do streaming content, however, should move their streaming
content to a subdomain we don't proxy in their DNS settings.
link
My Cloudflare isn't returning the Accept-Ranges header and so Safari won't play back my .mp4 files, regardless of size. Tried quite a few of the suggestions above without success. What finally worked was adding the missing header in via the .htaccess file.
<IfModule mod_headers.c>Header add Accept-Ranges "bytes"</IfModule>
I am completely new to VideoJs and media streaming on web pages, so please forgive me if the answer to this is obvious. I uploaded an MP4, OGV and WEBM file to www.sell2trade.com.au. If you view this page you will see that the video on the RHS works in Firefox, has an unsupported error in IE11 and plays the audio only in Chrome!! I downloaded the VideoJS sample and followed it diligently (I think!!) What on earth am I doing wrong!
Thanks for any help as tearing what little hair I have left out :)
The MP4 you're using doesn't appear to be compatible with Chrome. You can go directly to the mp4 url in chrome and see the same audio-only issue. You should try a different encoder, like Zencoder (paid service that I helped build) or Handbrake.
Also it looks like you swapped out the url for the video.js swf for a different swf that plays your video. That's not gonna work. You need to use the swf that's included with video.js.
Ok,
Im having trouble with the fallback to flash in IE8.
Can anyone see a porblem with the following URL as im thinking this is something to do with it being an Amazon S3 signed URL.
https://download300kbps.s3.amazonaws.com/abadie_020211_webcast_300kbps.mp4?AWSAccessKeyId=AKIAJFBCGFZJE5IHBQFA&Expires=1376585074&Signature=TBTookVUnmXwgn2GaED%2Ftv0FDfY%3D
It runs fine in IE10 but as soon as I switch the browse mode to IE8 I get the following error and im all out of ideas:
Video Error,[object Object]
Flash Error,srcnotfound,example_video_1_flash_api
Any help would be appreciated.
Cheers
Neil
Something to try would be to form the URL to the object using the bucket name as part of the path, instead of a prefix to the domain. So something like this:
https://s3.amazonaws.com/download300kbps/abadie_020211_webcast_300kbps.mp4?AWSAccessKeyId=AKIAJFBCGFZJE5IHBQFA&Expires=1376585074&Signature=TBTookVUnmXwgn2GaED%2Ftv0FDfY%3D
There are some funny quirks with both ways of representing an Amazon S3 object via a URL.
You may also want to check to make sure the content type of the object is set correctly, thought it most likely is not the cause.
Good luck!
I have a video player that loads progressive flv video from a server and applies a reflection to it. I do this by creating a bitmapData object and then drawing the video to it. This worked absolutely fine until we moved our content from testing server to Amazon S3. Now there is no reflection.
Can anyone explain why this is happening and even suggest a solution?
p.s. i am using Flash 8 AS2.
thanks
This most likely has to do with Flash player's security restrictions and domains. If you aren't getting any errors, try installing the debug version of the player and see what comes up.
Also take a look to Handling Crossdomain.xml and 302 Redirects Using NetStream for background info.
HTH
Juan