Photo Gallery Forums

Hy,

I've created a page on my website where I'm showing slideshows in video (mp4) format. On my desktop PC, it's working flawlessly. Yet on my smartphone using 4G, it does not seem to load the videos ? Is it normal, are they too big, or is there something I should do, or is it a bug ?

The page is configured with the following HTML content:
You can try it here :

https://www.insightspirit.com/galerie/diaporamas/


Thanks in advance for your help.

It does load the video, but only after the visitor initiates the playback. However, as you have observed, it does not preload the meta data (first few frames or all of the video), like desktop browsers. Unfortunately, this is how it works in most mobile browsers. The related attribute preload="metadata" is just a "hint" to browsers, and mobile browsers seem to ignore it, likely because they want to avoid downloads not triggered by users. This is confirmed in this link:
https://www.stevesouders.com/blog/2013/ ... o-preload/

stevesouders wrote:Observation #1: Mobile devices don’t preload anything. The VIDEO spec calls the preload values “hints”, so it makes sense that mobile browsers would choose not to preload anything in order to save on data costs. Instead, the video doesn’t start downloading until the user initiates playback. When I saw this I decided to add a test for the AUTOPLAY attribute. As shown, that also does not cause any video download on mobile devices

This is basically related to the same issue as to why mobile browsers cannot "autoplay" video either.
https://www.aerserv.com/why-does-video- ... -not-work/

Solution
A good solution would perhaps to set the video POSTER attribute? The poster attribute allows loading an image as placeholder for a video (before the video loads), and should work fine on mobile. This would make it look nice on mobile at least, before the visitor triggers play.

Thanks for the answer, but that was not my question (It was still usefull to know :) )

My problem is that it's not showing me the video when I click play on my smartphone ! (The video is maybe too big ~100 mo).
So is it possible to load one file (a smaller one with a resolution that fits smartphones) if the website is loaded on a mobile, and another one (HD one) if it is loaded on a desktop computer ?

Thanks for your help.

Eightkiller wrote:My problem is that it's not showing me the video when I click play on my smartphone ! (The video is maybe too big ~100 mo).

I can't confirm this ... The video works fine on my iPhone.

Do you mean that the video file size is too large, so the video will not buffer and play properly from your 4G mobile connection? I will have to give you a heads-up here: This is perhaps the single-most important reason to consider hosting videos on services like Youtube or Vimeo. These services will detect the device/connection type and automatically serve videos in multiple resolutions and multiple "bitrates" depending on the device/connection. Only video services support multiple bitrates for adaptive streaming delivery.

You could perhaps use javascript to "hack" different SRC versions based on the screen size and/or device type, but you can't really detect "connection" speed, so it would not be pretty. It would be cool if <video> tag supported srcset attribute (like images), so you could define different sources per different screens, but unfortunately it doesn't.

True :p

I'll stick with hosting videos on Vimeo or YouTube ^^

Thanks for your help.