How to customize the poster and playback button function of video tags through html5

Editor to share with you how to customize the poster and play button function of the video tag through html5. I hope you will get something after reading this article. Let's discuss it together.

First, problems

1. The default playback button does not look good.

two。 Set up custom cover map

I want to customize both of the above points.

Second, train of thought

1. Use div to cover the video tag

Display custom poster pictures and buttons in 2.div

Third, step decomposition

1. The poster picture serves as the background for div

Note: both horizontal and vertical views want to be displayed in the div at the original scale.

Css:

.yourDiv {background-color: black; height:20em; background-image: url ('. / images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center;}

Html

Effect.

Vertical view:

Horizontal chart:

two。 Insert a custom playback icon

Css:

.yourDiv {background-color: black; height:20em; background-image: url ('. / images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; display:flex; align-items: center;}. YourDiv img {width:20%; margin-left: 40%;}

Html:

Effect.

3. Overlay div on the video tag

Css:

.yourDiv {background-color: black; height:20em; background-image: url ('. / images/timg.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center; display:flex; align-items: center; position: absolute; top: 0px; left: 0px; width:100%;} .yourDiv img {width:20%; margin-left: 40%;} .father {background-color: black; width:100%; height:16em; position: relative;}

Htm5:

4. Trigger playback method

Html: