How to Cache Audio/Video (*.mp4) (Static Resources) using CloudFlare CDN?

By Default, the Cloudflare CDN does not cache the audio files such as *.mp3 or video files such as *.mp4. The CloudFlare CND will cache the following static resources:

css	bmp	tif	ttf	docx	woff2
js	pict	tiff	eot	xlsx	 
jpg	csv	eps	woff	xls	 
jpeg	doc	ejs	otf	pptx	 
gif	pdf	swf	svg	ps	 
ico	pls	midi	svgz	class	 
png	ppt	mid	webp	jar

However, the media files such as *.mp3, *.mp4, *.avi etc can also be considered static resources, which can be embedded in HTML5 using audio or video tags. Caching these will enhance user’s experiences in listening to audio or watching a video on your site. In order to let cloudflare cache these static resources, you will need to create a page rule that caches everything, for example:

*justyy.com/*.mp4*
Browser Cache TTL: a year
Cache Level: Cache Everything
Edge Cache TTL: an hour

In this case, the mp4 files will be cached at the edge servers. And considering the update frequency, the browser will cache the mp4 files for a year.

MP4 static resources can be cached by CDN as well

Verification of Caching

To check if the CloudFlare CDN really caches the resources, you can run the following command:

1

curl -svo /dev/null https://justyy.com/wp-content/uploads/2016/07/%E6%9C%89%E8%B6%A3%E6%98%AF%E6%9C%80%E5%A5%BD%E7%9A%84%E6%98%A5%E8%8D%AF.mp4

curl -svo /dev/null https://justyy.com/wp-content/uploads/2016/07/%E6%9C%89%E8%B6%A3%E6%98%AF%E6%9C%80%E5%A5%BD%E7%9A%84%E6%98%A5%E8%8D%AF.mp4

And the text you should look for in the output is:

1

CF-Cache-Status: HIT

CF-Cache-Status: HIT

QueryString

The wordpress will add the query string ?_=1 to the video and audio files, so that the URLs are different, you can add * to the page rule (as above) or you can change the wp-include/media.php locate the following:

1

$url = add_query_arg( '_', $instance, $atts[ $fallback ] );

$url = add_query_arg( '_', $instance, $atts[ $fallback ] );

and changed to (appearance twice, one for audio, and one for video):

1

$url = $atts[ $fallback ];

$url = $atts[ $fallback ];

The maximum size of the static resources you can cache on CloudFlare CDN is per 512MB.

–EOF (The Ultimate Computing & Technology Blog) —