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.
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 
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.
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; ?>What environment are you using locally?
What exactly happens in the network tab? Are the headers alright?
I’m using Brocessing’s Kirby-Webpack. I have attached a screenshot of the live server’s Chrome Network tab and of Safari local.
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?
I’m unsure as to what you mean, do you want to create .html and put it at the root of the staging server?
That’s what I meant, to rule out this is Kirby related. Are those generated URLs correct, btw, with those cryptical numbers?
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
And if you include a simple videotag in a fresh starterkit, without the plyr player?
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.
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.
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>
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.
having the same problem with Safari only, and it’s kirby specific.
weird cause it’s not the first time i embed videos through the <video> tag, and never had this problem. i tested the same video on a simple html page and it works fine.
what i see happening is that Safari reads twice the video
I tested this also on an online server where the other websites with video do work, and i get the same error.
not sure if it’s the newest Safari and / or kirby? i mean, the same last Safari version works with other kirby websites i built.
just to reconfirm this awful bug. Django 2 Python 3.6. I tried literally everything and the problem is indeed that Django doesn’t support byte-range requests so it would work on Chrome, Firefox but not Safari or iOS.
from this stack overflow
i cannot test for byte-range request support as the video simple does not load up in the page (see this suggestion).
i think kirby does support for byte-range request, right?
Just a hunch but what happens if you take the .gif out of the filename so the name is goats.mp4? Looks like it is getting sent with right header from your screen shots, perhaps its getting confused between gif and mp4. Just a stab in the dark. Does the problem only occur with that particular file?
How are you populating the video tag? Depending on how you fill the path, Kirby can cause a redirect to the real file. I ran into this the other day had double hits on the videos.
So if you fill in the path on the video tag like:
http://domain.test/home/home.mp4
Kirby will actually redirect that to:
http://domain.test/content/home/home.mp4
hey thank you!
it’s not file specific. i changed the filename but with no good result.
i am loading a bunch of videos (and on click loading a slideshow with them).
here the snippet
<div>
<?php foreach($data->gallery()->toStructure() as $vid): ?>
<video width="auto" class="slide" preload="metadata" type="video/mp4">
<source src="<?= $vid->toFile()->url() ?>">
</video>
<?php endforeach ?>
</div>
i converted kirby-images to kirby-videos. wondering if in the plugin code there is something that makes the video load twice? would be strange (but i’m gonna check).
how did you solve your problem the other day?
My tag looks like this, and it powers the full screen background vid on my home page…
<video loop muted poster="<?= $page->articleimage()->toFile()->url() ?>" autoplay class="fullscreen-bg-video">
<source src="<?= $page->file('train-ride.mp4')->url() ?>" type="video/mp4">
</video>
Safari is not loading the video on the online server, but it does not display a (automatic) stillframe. And on click it plays the video at least.
I tried to move the type attribute from <video> to <source> like in your example, but not difference in Safari.
Guess I’m almost there… 
EDIT actually nothing changed.