0

I need to see a thumbnail of my video on mobile. So far everything I found didn't work. This is the code i have now:

<video class="some_class" controls>
    <source src="some/url/path.mp4" alt="some alt text" >
</video>

The things I tried is to add the preload="metadata" and my frame to my video source #t=0.5 but those things didn't work.

It is not possible to use poster because I can't know witch picture the customer wants to use on a specific video.

The problem is very mobile specific due to the fact that the thumbnails works on all the other browsers, except the mobile ones.

Pieter Samoy
  • 80
  • 1
  • 8
  • Possible duplicate of [How to set the thumbnail image on HTML5 video?](https://stackoverflow.com/questions/20075875/how-to-set-the-thumbnail-image-on-html5-video) – Vincent Decaux Oct 08 '19 at 09:19
  • My issue is mobile specific. It works on all the browsers except the mobile ones. Also all the solutions there don't work in my situation – Pieter Samoy Oct 08 '19 at 09:23
  • Why is your customer setting those thumbnail images on your videos? – Gosi Oct 08 '19 at 09:28
  • Well the customer can choose the video due to the fact that we are working with AEM (kind of CMS). That is the reason we can't use a fixed image – Pieter Samoy Oct 08 '19 at 09:29

1 Answers1

2

Try to add videos in following format as well.

  • webm(vp8/vorbis)
  • mp4(h264/aac)

It seems Chrome mobile prefers webm if it can get it.

Safari (and probably iOS) will not play a video unless served by a server supporting byte-ranges. Apache, nginx and Amazon S3 for example do support them, but many smaller web servers (like WSGI servers) do not.

If browser able to detect the video then, thumbnail should show.

You can try this plugin Fancy app too.

This plugin will overcome the browser/device compatibility issues.

Thanooshan
  • 598
  • 12
  • 23