Open a video, click the play before will see a cover image, cover disappear after clicking, then play the video.
If a demand for existing, you want to customize the video settings for a cover, how should you do it?
Then you can use the H5 video provided by the poster attribute can be easily achieved,
poster displayed when downloading images or video attribute specifies the image display before the user clicks the play button. If not set property, is used in place of the first frame of the video
Demo
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>视频封面</title> </head> <body> <video width="400" height="400" poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574066857005&di=
27dc7334bc80c4336d3443e8ecde3160&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F17%2F02%2F06%2Fed0c0ddc6271b0717ca64ffdf847eab6.jpg" controls> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/mp4"> <source src="https://www.w3school.com.cn/i/movie.mp4" type="video/ogg"> </video> </body> </html>
Added: Sometimes the situation can not be covered with the cover of the video will need to use object-fit properties covered the entire screen