Categories
JavaScript Answers

How to dynamically using the first frame as poster in HTML5 video?

Spread the love

Sometimes, we want to dynamically using the first frame as poster in HTML5 video.

In this article, we’ll look at how to dynamically using the first frame as poster in HTML5 video.

How to dynamically using the first frame as poster in HTML5 video?

To dynamically using the first frame as poster in HTML5 video, we add #t= at the end of the video URL.

For instance, we write

<video width="400" controls="controls" preload="metadata">
  <source
    src="https://www.example.com/html/mov_bbb.mp4#t=0.5"
    type="video/mp4"
  />
</video>

to add #t=0.5 to the end of the video URL to move to the first frame of the video.

Conclusion

To dynamically using the first frame as poster in HTML5 video, we add #t= at the end of the video URL.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *