Rise Company
02-12-2021, 16:14
كلاود فلير CloudFlare حل مشكلة الفيدويهات MP4 لا تعمل على IOS
MP4 won’t load on iOS devices - MP4 Won’t Load in Safari Using CloudFlare
Mp4 videos do not play - Problem in loading website in IOS device
Video plays in other browsers, but not Safari
https://www.rise.company/upload/uploads/16384552014261.png
المشكلة :
بعد تفعيل الكلاود فلير توقف عمل الفيديوهات على الاى فون فقط IOS
ولكن يعمل على الاندرويد و جميع الاجهزة بشكل سليم.
حل المشكلة :
لمعرفة سبب المشكلة من الكلاود فلير ام لا
ISOLATING THE PROBLEM IN CLOUDFLARE:
In Clouflare:
Activate DEVELOPMENT MODE (in Overview page)
Disable Proxy (in DNS section)
Videos then played in iOS Safari and error message disapeared.
FINAL FIX:
(NOTE: Development Mode OFF, Proxy re-enabled)
Doing the following two steps fixed the mp4 playback issue on IOS:
A) In Cloudflare, add PAGE exception:
*mydomainname.com*/*/*.mp4*
Cache Level: Bypass Cache
B) In .htaccess of website,
add the following line to disable mod_deflate for mp4 video:
SetEnvIfNoCase Request_URI .(mp4|ogv|webm)$ no-gzip dont-vary
ثم تاكد من حذف الكاش على الاى فون من خلال حذف التطبيف واعادة تثبيته مره اخري
شاهد :
اي فون IPHONE كيفية حذف الكاش Cache من التطبيقات Reinstall / Clear Apps (https://www.rise.company/forum/threads/80420-%D8%A7%D9%8A-%D9%81%D9%88%D9%86-IPHONE-%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AD%D8%B0%D9%81-%D8%A7%D9%84%D9%83%D8%A7%D8%B4-Cache-%D9%85%D9%86-%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D 8%AA-Reinstall-Clear-Apps)
-------------------------------------------------
Just a heads up to anyone still having problems with this
I have played around with this a fair bit and this seems to be a mix between CF returning a 200 Status for video files and Safari only accepting a 206 Status for video
Chrome and Firefox are fine with a 200 Status. However; Safari on both iOS and OS seems to throw in the towel.
I think the issue is caused by having a ‘Cache Everything’ rule on a domain/media directory. This is recommended fairly widely as a way max out the edge-cache lifespan for static assets.
The solution is to exclude mp4/whatever your video file of choice is from the cache. You can prioritise a second rule after the cache everything rule
https://www.domain.tld/mediapath*/*.mp4*
Cache Level: Bypass Cache
This results in mp4s being served up from origin with a correct 206 header.
Long term either CF needs to modify the header on video assets to return a 206 status code; or we need to wait for Safari to sort out how it handles media with a 200 status.
----------------------------------------------------
I manage to workaround this by creating an subdomain e leave it outside CF and upload the video and link this URL for the background video, now it is working again.
---------------------------------------------------
حل اخر
داخل ملف .htaccess ضع
Add exactly the following at the end should work (if don’t, depending on your file complexity, copy it more on top):
# To make MP3 streaming on Safari with Cloudflare CF
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary
---------------------------------------------------
حل اخر
.mp4 playback has been a problem for many folks migrating to Cloudflare. After reviewing fixes on previous posts and finding they did nothing for me, I wanted to share what worked in my situation.
e.g. these steps didn’t work (bypass page rule, .htaccess)
My setup: Self-hosted Rails server, Nginx -> .mp4 videos didn’t play back in Safari on Mac or iOS. Playback in chrome works great.
I resolved my Safari .mp4 playback by changing my gzip compression settings in my nginx.conf, to remove gzip compression of .mp4 files.
Here’s the block in nginx for reference. (Note: depending on how your app is configured, you may need to change the location line to location ~ \.mp4$ {
location ~ ^/(assets|system|videos)/ { expires max; add_header Cache-Control public; add_header ETag ""; gzip on; gzip_http_version 1.1; gzip_vary on; gzip_comp_level 6; gzip_proxied any; # Reference configuration #gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript video/mp4 application/mp4 image/jpeg image/png image/svg+xml application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/vnd.ms-fontobject; # Fix cloudflare by removing the mp4 settings gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript image/jpeg image/png image/svg+xml application/application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/vnd.ms-fontobject; }
---------------------------------------------------
حل اخر
A few things to fiddle with on the server: • Remove Etag • Make sure files are being served in full rather
المرجع:
https://community.cloudflare.com/t/mp4-wont-load-in-safari-using-cloudflare/10587/33
https://stackoverflow.com/questions/27712778/video-plays-in-other-browsers-but-not-safari
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
MP4 won’t load on iOS devices - MP4 Won’t Load in Safari Using CloudFlare
Mp4 videos do not play - Problem in loading website in IOS device
Video plays in other browsers, but not Safari
https://www.rise.company/upload/uploads/16384552014261.png
المشكلة :
بعد تفعيل الكلاود فلير توقف عمل الفيديوهات على الاى فون فقط IOS
ولكن يعمل على الاندرويد و جميع الاجهزة بشكل سليم.
حل المشكلة :
لمعرفة سبب المشكلة من الكلاود فلير ام لا
ISOLATING THE PROBLEM IN CLOUDFLARE:
In Clouflare:
Activate DEVELOPMENT MODE (in Overview page)
Disable Proxy (in DNS section)
Videos then played in iOS Safari and error message disapeared.
FINAL FIX:
(NOTE: Development Mode OFF, Proxy re-enabled)
Doing the following two steps fixed the mp4 playback issue on IOS:
A) In Cloudflare, add PAGE exception:
*mydomainname.com*/*/*.mp4*
Cache Level: Bypass Cache
B) In .htaccess of website,
add the following line to disable mod_deflate for mp4 video:
SetEnvIfNoCase Request_URI .(mp4|ogv|webm)$ no-gzip dont-vary
ثم تاكد من حذف الكاش على الاى فون من خلال حذف التطبيف واعادة تثبيته مره اخري
شاهد :
اي فون IPHONE كيفية حذف الكاش Cache من التطبيقات Reinstall / Clear Apps (https://www.rise.company/forum/threads/80420-%D8%A7%D9%8A-%D9%81%D9%88%D9%86-IPHONE-%D9%83%D9%8A%D9%81%D9%8A%D8%A9-%D8%AD%D8%B0%D9%81-%D8%A7%D9%84%D9%83%D8%A7%D8%B4-Cache-%D9%85%D9%86-%D8%A7%D9%84%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D 8%AA-Reinstall-Clear-Apps)
-------------------------------------------------
Just a heads up to anyone still having problems with this
I have played around with this a fair bit and this seems to be a mix between CF returning a 200 Status for video files and Safari only accepting a 206 Status for video
Chrome and Firefox are fine with a 200 Status. However; Safari on both iOS and OS seems to throw in the towel.
I think the issue is caused by having a ‘Cache Everything’ rule on a domain/media directory. This is recommended fairly widely as a way max out the edge-cache lifespan for static assets.
The solution is to exclude mp4/whatever your video file of choice is from the cache. You can prioritise a second rule after the cache everything rule
https://www.domain.tld/mediapath*/*.mp4*
Cache Level: Bypass Cache
This results in mp4s being served up from origin with a correct 206 header.
Long term either CF needs to modify the header on video assets to return a 206 status code; or we need to wait for Safari to sort out how it handles media with a 200 status.
----------------------------------------------------
I manage to workaround this by creating an subdomain e leave it outside CF and upload the video and link this URL for the background video, now it is working again.
---------------------------------------------------
حل اخر
داخل ملف .htaccess ضع
Add exactly the following at the end should work (if don’t, depending on your file complexity, copy it more on top):
# To make MP3 streaming on Safari with Cloudflare CF
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|mp4|ogv|webm)$ no-gzip dont-vary
---------------------------------------------------
حل اخر
.mp4 playback has been a problem for many folks migrating to Cloudflare. After reviewing fixes on previous posts and finding they did nothing for me, I wanted to share what worked in my situation.
e.g. these steps didn’t work (bypass page rule, .htaccess)
My setup: Self-hosted Rails server, Nginx -> .mp4 videos didn’t play back in Safari on Mac or iOS. Playback in chrome works great.
I resolved my Safari .mp4 playback by changing my gzip compression settings in my nginx.conf, to remove gzip compression of .mp4 files.
Here’s the block in nginx for reference. (Note: depending on how your app is configured, you may need to change the location line to location ~ \.mp4$ {
location ~ ^/(assets|system|videos)/ { expires max; add_header Cache-Control public; add_header ETag ""; gzip on; gzip_http_version 1.1; gzip_vary on; gzip_comp_level 6; gzip_proxied any; # Reference configuration #gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript video/mp4 application/mp4 image/jpeg image/png image/svg+xml application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/vnd.ms-fontobject; # Fix cloudflare by removing the mp4 settings gzip_types text/plain text/html text/css application/json application/javascript application/x-javascript text/javascript image/jpeg image/png image/svg+xml application/application/x-font-ttf application/x-font-truetype application/font-woff application/font-woff2 application/vnd.ms-fontobject; }
---------------------------------------------------
حل اخر
A few things to fiddle with on the server: • Remove Etag • Make sure files are being served in full rather
المرجع:
https://community.cloudflare.com/t/mp4-wont-load-in-safari-using-cloudflare/10587/33
https://stackoverflow.com/questions/27712778/video-plays-in-other-browsers-but-not-safari
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6