Support » Plugin: Smart Slider 3 » Browser cache control for mp4 doesn’t work

  • Resolved hiroyoshimu

    (@hiroyoshimu)


    I purchased Smart Slider3 Pro.

    Make an mp4 slide in the slide, set the URL, and the movie will flow well.

    However, a large communication band is required because the movie is downloaded every time.

    I want to use the browser cache to reduce the required communication bandwidth.

    .htaccess
    <ifmodule mod_expires.c=””>
    ExpiresByType video/mp4 “access plus 1 month”

    Set Expires in server .htaccess, and in the browser header,

    Cache-Control: max-age = 2592000, public

    I confirmed that it was displayed.
    However, when the slides are in mp4 order, mp4 data will be downloaded every time.
    By the same method, jpeg uses browser cache and communication does not occur.
    I want to use a browser cache, what should I do?

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author Nextendweb

    (@nextendweb)

    Hi @hiroyoshimu,
    Please make sure that mime and expires module is enabled in your Apache configuration. If you are not sure, contact with your hosting provider to enable them.

    <IfModule mod_mime.c>
    	AddType video/mp4 .mp4 .m4v
    </IfModule>
    <IfModule mod_expires.c>
    	ExpiresActive on
    	ExpiresByType video/mp4 "access plus 1 month"
    </IfModule>

    Or you can try and it requires headers module:

    <ifModule mod_headers.c> 
        # One month for video
        <filesMatch ".mp4$">
            Header unset Cache-Control
            Header set Cache-Control "max-age=2592000, public"
        </filesMatch>
    </ifModule>
    hiroyoshimu

    (@hiroyoshimu)

    Thank you for your prompt reply. I wrote the settings presented in .htaccess on the server. When you check the header of the browser, Cache-Control is reflected properly, but when the order of mp4 with SmartSlider3 comes, the mp4 file is repeatedly downloaded.

    If you download mp4 directly with http, it will not be downloaded after the second time. It has been confirmed that it will not be downloaded even with an update using the F5 key.

    The specification of mp4 playback on SmartSlider3 seems to be recognized as a new file.

    Below is the HTML response header when the presented config is reflected in .htaccess.

    mime and expires module

    Accept-Ranges: bytes
    Cache-Control: max-age=2592000
    Connection: keep-alive
    Content-Length: 12525249
    Content-Range: bytes 65536-12590784/12590785
    Content-Type: video/mp4
    Date: Fri, 22 May 2020 09:25:07 GMT
    Expires: Sun, 21 Jun 2020 09:25:07 GMT
    Last-Modified: Wed, 20 May 2020 08:29:52 GMT
    Server: Apache
    Vary: Range

    headers module

    Accept-Ranges: bytes
    Cache-Control: max-age=2592000, public
    Connection: keep-alive
    Content-Length: 12525249
    Content-Range: bytes 65536-12590784/12590785
    Content-Type: video/mp4
    Date: Fri, 22 May 2020 08:32:31 GMT
    Last-Modified: Wed, 20 May 2020 08:29:52 GMT
    Server: Apache
    Vary: Range

    Plugin Author Nextendweb

    (@nextendweb)

    @hiroyoshimu, Well, I’m not sure why it does not working. We have several templates with mp4 video and it works for us fine. For example: https://smartslider3.com/fullpage-video-block/

    It loads this video: https://smartslider3.com/wp-content/uploads/slider271/videobackground10.mp4

    And here is our response headers for the video:

    age: 99
    cache-control: max-age=31536000
    cf-bgj: h2pri
    cf-cache-status: HIT
    cf-ray: 59760d869972d41b-BUD
    cf-request-id: 02dda6c81c0000d41b49369200000001
    Content-Length: 4323194
    Content-Range: bytes 0-4323193/4323194
    content-type: video/mp4
    date: Fri, 22 May 2020 11:03:49 GMT
    etag: "41f77a-55661375f287e"
    expect-ct: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
    expires: Sat, 17 Oct 2020 00:41:12 GMT
    last-modified: Thu, 10 Aug 2017 07:33:44 GMT
    server: cloudflare
    status: 206
    vary: Accept-Encoding
    hiroyoshimu

    (@hiroyoshimu)

    Thank you for your reply.

    mp4 videos will play on smartslider3. The problem is that the mp4 is repeatedly downloaded. I want to use browser cache.

    The response header you presented is

    cf-cache-status: HIT
    Data that is cached on the cloudflare CDN and downloaded from the CDN. Communication is occurring.

    I want to play the local data cached by the browser and reduce the communication bandwidth.Even with SmartSlider3, jpeg files can be displayed from the browser cache.

    The response header of jpeg is as follows.
    Provisional headers are shown. Disable cache to see full headers.
    Referer: http://mahikari.chips.jp/sign-honbu/index/
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36

    Plugin Author Nextendweb

    (@nextendweb)

    @hiroyoshimu, your site is password protected.

    Those cdn headers should not matter. If you check our site, the mp4 video is stored properly in the browser cache and not downloaded again.

    Maybe it is related that our environment use etag header for the resource.

    • This reply was modified 5 months ago by Nextendweb.
    hiroyoshimu

    (@hiroyoshimu)

    Thank you for your sincere support.

    Password disabled. Please confirm it is.

    SmartSlider3 Page
    http://mahikari.chips.jp/sign-honbu/index/

    mp4 file
    [video src="http://mahikari.chips.jp/sign-videos/HonbuContents.mp4" /]

    Plugin Author Nextendweb

    (@nextendweb)

    In Chrome your cache seems fine for me. Screen recording: https://www.youtube.com/watch?v=dluhTA-Bnlw

    There is no request made when I’m playing the video.

    What I wrote you previously is all I know about hosting videos. In Smart Slider 3, we use simple HTML5 video player and there is no switch where we could cause to cache or not cache a video. It really depends on the browser implementation and the response headers. Maybe you can ask your question on a more suitable forum like https://serverfault.com/ where people has more experience with it.

    hiroyoshimu

    (@hiroyoshimu)

    Thank you so much for your support.

    It gets downloaded many times in my Chrome. Do not reload. Please play back on SmartSlider3 for a while and check.

    hiroyoshimu

    (@hiroyoshimu)

    Use cache when F5 reloading.

    Repeated playback on SmartSlider3 will download new

    From this fact, I think there is a problem with SmartSlider3’s mp4 playback.

    Plugin Author Nextendweb

    (@nextendweb)

    I made a test on our server, could you check it? (I will delete these contents as soon as you check it.)

    https://smartslider3.com/bugs/test/index2.html

    It is a slider and I added two of your videos and I uploaded your videos to our server. If you check for a while, you will see that videos will be server from your browser’s disk cache. So I think it is still related your your response headers somehow.

    hiroyoshimu

    (@hiroyoshimu)

    thank you very much.

    As you say, the mp4 downloaded from your server will be played from the browser cache and no communication will occur.

    I want to contact the rental server company. Would you please leave your test server on for a week?

    Would you please tell me the configuration of your server?

    Apache Server Version or Another server?
    PHP Version
    .htaccess setting
    etc.

    Do you have any idea about the reason why this mp4 is repeatedly downloaded in the server settings?

    Plugin Author Nextendweb

    (@nextendweb)

    @hiroyoshimu, It is an Apache 2.4 server with Cloudflare CDN front of it.

    I just checked on my local test server and I see that I needed etag header for the video to force to browser to cache. As I saw etag was disable on your server, so I suggest you to enable etag for mp4 videos and try it again.

    Maybe this will be the way to go

    <FilesMatch "\.mp4$">
    	FileETag MTime Size
    </FilesMatch>
    <IfModule mod_mime.c>
    	AddType video/mp4 .mp4 .m4v
    </IfModule>
    <IfModule mod_expires.c>
    	ExpiresActive on
    	ExpiresByType video/mp4 "access plus 1 month"
    </IfModule>
    • This reply was modified 5 months ago by Nextendweb.
    hiroyoshimu

    (@hiroyoshimu)

    Thank you for your kindness.

    I tried the etag that you instructed.

    http://mahikari.chips.jp/sign-honbu/index/

    The situation where it is repeatedly downloaded does not change.

    Plugin Author Nextendweb

    (@nextendweb)

    @hiroyoshimu, I checked that page and now it seems fine for me. If I let the video play, then the video was used from cache properly after I hit F5.

    https://www.youtube.com/watch?v=fOqH2HpYBtY

    Maybe the cache is not working if only a part of the video downloaded. I’m not sure about that… this one requires special experience.

    hiroyoshimu

    (@hiroyoshimu)

    Thanks to you, it really helped me.

    It was successfully resolved.

    thank you for your kindness.

Viewing 15 replies - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.