Responsive Video Player

Hey… we want to include different videos (self hosted) depending on device.

Mostly to save bandwidth on mobile view.

any idea on that?

You could do device detection, but it’s not really 100% reliable: https://getkirby.com/plugins/bnomei/mobile-detect

In what way are these videos supposed to be different? Quality or completely different videos?

it’s only about quality/bandwidth. do you have a better idea on that?

Use Vimeo, they deliver the best video the device / bandwidth can handle automatically. You just upload the highest resolution version, and they generate all other sizes from it.

ehh… nope =)
We don’t want to use any external service. We only host for ourself.

They allow domain locking, and it wont on appear on Vimeo publicly. It will only work on your domain and you get the benefit of their CDN.

That’s nice… but not what we want.

Well then the only way is the solution shared ealier, to detect mobiles your self and deliver the correct video. As for bandwidth, thats not so easy (atleast there isnt a ready to go solution that i know.)

thats the theory that is known… the question is about solutions =)

the mobile detection could be a solution… maybe someone knows a html5 player that has detection included

Or maybe Google…


1 Like

You could provide your videos according to the browser engine which queries the video. In a project, we converted our videos in using h265, vp9 and h264 and added the videos in this particular order. The browser chooses automatically the version that suits them best.

hey… thx a lot…
but the browser suits the first compatible file… despite of quality… so, this is not a solution.

as a workaround i currently use plyr video-player… with different files for each quality and the viewer must choose manualy…
but for this, i put html-code via kirby-text area in the panel for the subpage, where it is used…
thats not a good solution.

This is tricky, you can have a good device (hdpi screen, retina) and a poor Internet (2G).
I think Youtube and more check the bandwidth, the screen size, and the user can change the quality.
If you like a custom player, maybe a CDN like https://cloudinary.com/ can be another alternative.

thx… but as mentioned above, external services are absolutly no option.
our current stage are competition-videos inside a closed members-area. We can’t upload those videos to external services until the competition is over and a winner will be announced…

for the moment i will use plyr with manual quality selection. currently i try to write a player-snippet for this plugin to solve the autogeneration of the multisource player-code: https://github.com/HashandSalt/kirby3-video

maybe later we’ll find a solution for an automagic way =)