We’re currently building a small mobile web application for a client and they want to run videos for desktop and pad versions of the site, however they have chosen to leave this off the mobile versions.
The site is being built responsively, which means that the same code/content will be used for every device and everything will be served on the same URL.
Hiding content from a mobile device is something which I recommend against because you are making an assumption that the mobile user is not able or does not want to watch/view the content because they’re on a mobile device. With mobile devices being used on the bus, on the couch and out and about it is difficult to say when it is suitable to show/hide certain content. If you are considering doing something like this I would urge you to question whether or not the content is suitable at all (i.e. there is no mobile context).
What I believe vs what the client wants
Obviously two different things and for better or worse the video is going to be hidden.
Unfortunately a lot of the current browsers do a lot of prefetching of resources. This means that images and video that are set to display: none; will still be downloaded and therefore a burden to the “mobile user”.
So how do we provide a suitable experience for both types of users without discriminating against either one.
preload
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. It gets even better than that, you can chose how much preloading is done with the options auto, metadata, and none.
- ‘auto’: Start loading the video immediately (if the browser agrees). Some mobile devices like iPhones and iPads will not preload the video in order to protect their users’ bandwidth. This is why the value is called ‘auto’ and not something more final like ‘true’.
- ‘metadata’: Load only the meta data of the video, which includes information like the duration and dimensions of the video.
- ‘none’: Don’t preload any of the video data. This will wait until the user clicks play to begin downloading.
In this case I’ve gone with loading the metadata of the video, small enough not to worry the mobile devices but enough to provide the larger devices more information about the content.
<video preload="metadata" ....>
Thanks!
helpfull
Very helpful. BTW, I think you can’t have “none” set if you want to set a poster frame automatically, but when I set it to “metadata” it does make a poster frame, and only puts a small hit on bandwidth.