0

I'm just wondering what the best practice is for only (auto) playing a video once it's fully visible in the browser/scrolled to? Should the video be 'paused' until it's in the centre of the screen, then played. Or should the video be hidden by default and only loaded once it's needed - then played? I'm open to suggestions for this as it's nothing something I've touched on before.

Here's my markup:

<figure class="pop">
    <video width="1280" height="720">
        <source src="video/work/gbm/xmas-landing.mp4" type="video/mp4">
        <source src="video/work/gbm/xmas-landing.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</figure>

I don't want to display the controls but I thought it might be nice if a 'play again' is visible at the end of the video, how could I go about that? Also, is a plugin needed to make the video(s) responsive?

halfer
  • 19,824
  • 17
  • 99
  • 186
user1406440
  • 1,329
  • 2
  • 24
  • 59
  • Did you have a read through this? https://stackoverflow.com/q/15395920 – Soolie Oct 25 '17 at 15:09
  • 1
    Yeah I tried that but I couldn't get it to work. Even added `id="video1" preload="auto" loop="loop"` to my `video` tag to match their example. – user1406440 Oct 25 '17 at 15:22
  • Videos that play by themselves get me everytime. – Jimenemex Oct 25 '17 at 15:26
  • Depends on what your definition of best practice is. Personally I feel like best practice from a user standpoint is to never play a video without the user's direct interaction invoking the play. – Robert Wade Oct 25 '17 at 15:27
  • Those are fair points, I hate it when videos auto play as well. I'm thinking as this is on my portfolio it'll be ok if this one plays. I now have the example from the 1st comment working. The mistake I made was using the code from the JSFiddle, now I've copied from the post it seems ok. Any ideas how I can show a 'play' button at the end of the video? – user1406440 Oct 25 '17 at 15:38

0 Answers0