Video files returning 404 on live site and Safari


#1

I want to play videos that are self-hosted through Kirby. The files play fine locally on Chrome and Firefox but on the staging server and local Safari they return a 404. How can I troubleshoot this? I’m not even sure what information is required to provide a better understanding of the problem.


#2

how are your paths being generated and what video formats are you using (different browsers support different formats, but for the most part, MP4 is pretty universal. If you can only do one file, chose that one.)?

Also, how are you doing it… a custom tag… a snippet… show us your code :slight_smile:

For the record, it is much less hassle to use Vimeo or Youtube to store your videos, because they handle file conversion and the players are clever enough to deliver the right files to the right browsers. However, theres a good starting for hosting by Bastian in the cookbook. I also know there is a good multi-format custom tag somewhere on the forum but i cant seem to find it.


#3

Thanks for replying @jimbobrjames. What do you mean how are my paths being generated? I have tried both .mp4 and .mov files both files work on locally Chrome and Firefox neither work on the live server or Safari locally. I am playing the videos using plyr but even using the default html5 player I have the same problem. Any help would be greatly appreciated.

projects.php controller

<?php

return function($site, $pages, $page) {
    $projects = page('projects')->children()->visible();

    return compact('projects');
};

projects.php template

<?php foreach($projects as $project): ?>    
    <?php if($project->featurevideo()->isNotEmpty()): ?>
        <div class="plyr-container">
            <?php if($file = $project->featurevideo()->toFile()):  ?>
            <video poster="" class="js-player" playsinline controls>
                <source src="<?= $file->url(); ?>" type="video/mp4">
            </video>
            <?php endif; ?>
        </div>
    <?php endif; ?>
<?php endforeach; ?>

#4

What environment are you using locally?

What exactly happens in the network tab? Are the headers alright?


#5

I’m using Brocessing’s Kirby-Webpack. I have attached a screenshot of the live server’s Chrome Network tab and of Safari local.


#6

I’d assume that somehow the servers do not send the correct headers.

Could you test if you get the same result if you set up a simple HTML template with the video tag?


#7

I’m unsure as to what you mean, do you want to create .html and put it at the root of the staging server?


#8

That’s what I meant, to rule out this is Kirby related. Are those generated URLs correct, btw, with those cryptical numbers?


#9

A normal index.html with the same video file works. So it seems it’s a most likely something I have done with the Kirby project


#10

And if you include a simple videotag in a fresh starterkit, without the plyr player?


#11

We had an issue before with Safari, Videos and the built-in server on Mac.

I just did a quick test again both with Kirby and with a simple html file:

  • Safari + video + html file + built-in php server: doesn’t work
  • Safari + video + Starterkit + built-in php server: doesn’t work
  • Safari + video + html file + Mamp Apache : does work
  • Safari + video + Starterkit + Mamp Apache: does work

Therefore I’m a bit surprised your html file worked (unless you opened it as a file, not using the server).

Don’t know what the built-in web server in Kirby Webpack uses… but it might be a related issue.

All of the above doesn’t explain your issues on the staging server, though (in fact, it doesn’t explain anything anyway, just observing things).

But I’m at my wits end here and all I can suggest to test if you have the same problem with a standard php file on the staging server or not. Also, both issues - Safari on localhost and the other browsers on staging - may not be related.


#12

I really appreciate the help. I ran all the tests again.

Testing with php -S localhost:8000 and video on Safari

  • index.html - doesn’t work
  • index.php - doesn’t work
  • StarterKit - doesn’t work

Testing with MAMP and video on Safari

  • index.html - worked
  • index.php - worked
  • StarterKit - worked

Fresh Kirby Webpack video on Safari local - doesn’t work (works on Chrome, Firefox and on a VirtualBox Microsoft Edge - hardcoded path and returning the video through the panel)

Staging (Digital Ocean - Ubuntu 16.04 LAMP) video on Safari

  • index.html - worked (I was reffering to this when it worked)
  • index.php - worked
  • StarterKit - worked
  • fresh Kirby-Webpack - worked

I guess I can proxy through MAMP with Webpack locally and I will rebuild my project in the fresh Kirby-Webpack and see where the problem is on the staging server.


#13

Maybe you could try running the request in your terminal with curl, adding the Safari request headers that ended with an error and removing/changing them one by one to try and find a culprit :

curl 'http://url' -H 'Accept: */*' -H 'Accept-Encoding: identity;q=1, *;q=0' -H '...'

(in Chrome : in the network tab, right-click on the request name -> Copy -> Copy as cURL)

You could also try to add the mime types explicitely in your .htaccess if you haven’t already :

<IfModule mod_mime.c>
    AddType video/quicktime    mov
    AddType video/mp4          f4v f4p m4v mp4
    AddType video/ogg          ogv
    AddType video/webm         webm
    # etc
</IfModule>

#14

Thanks for replying. I don’t quite understand headers or curl requests but I will read up on them now and test.

After testing the staging with the starterkit, etc I pushed the original site back on to the staging server to try again, I deleted the content and re-added them again. Now the videos return 404 on the staging server on both Chrome and Safari, however if I hard code the video from my assets folder the video works fine on both of the browsers. The videos work correctly on locally on Chrome.