0

When I opened this link on PC browser http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

The video displayed a preview image and I could see the loading progress bar is running, all worked fine.

But when I opened the link on mobile browser, the video totally empty without any thumbnail, and progress bar stopped. (plays OK)

Then I add the attribute "preload=auto" inside the video tag, then also no difference.

Here is my code.

 <!DOCTYPE html>
    <html>
    <body>
    
    <video preload="auto" width="400" controls>
      <source src="mov_bbb.mp4" type="video/mp4">
      <source src="mov_bbb.ogg" type="video/ogg">
      Your browser does not support HTML5 video.
    </video>
    
    <p>
    Video courtesy of
    <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
    </p>
    
    </body>
    </html>

My device: Android 5.1.1/Chrome 48.0.2564.95

Krishna Kachhela
  • 773
  • 1
  • 7
  • 24
唐雯倩
  • 71
  • 8

1 Answers1

0

Mobiles generally do not auto play video to protect users from excessive mobile data charges.

You can still display a thumbnail, however by adding a poster attribute to your HTML - from the W3C site:

<video controls poster="/images/w3html5.gif">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Mick
  • 24,231
  • 1
  • 54
  • 120
  • I'd like to use a frame from this video as thumbnail. I tried http://stackoverflow.com/questions/3749011/capture-first-frame-of-an-embedded-video. But without any buffer, my canvas was empty either. – 唐雯倩 Jul 29 '16 at 05:09
  • Is there any other way to achieve that? – 唐雯倩 Jul 29 '16 at 05:17