How can I use dynamically the first frame as poster in mobile HTML5 video?

Question

I have tried for popcorn.capture.jsand set preload="auto",the first just suits firefox and the next suits pc browser. I want some way to achieve in mobile (Wechat). Could you help me?

Answer 1

On mobile devices the device will not start to download the video automatically, as you may be aware. This is to avoid the user running up large data bills.

Because the bowser has not downloaded the video it can't extract the first frame to display it, so you need to use the poster mechanism in HTML5 to display an image as the thumbnail.

One common approach is to generate the thumbnail on the server side when you 'ingest' or add the video to the server and save it where it can be served as the video poster.

Answer 2

I solved this problem by adding autoplay to my video tag and pausing the video on load.

window.onload = function(){
 var myVideo = document.getElementById('myVideo');
 myVideo.pause(); 
}

<video id="myVideo" autoplay controls> 
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>