效果图如下
html结构部分
<div class="player">
<video id="video" muted poster="images/video_poster.png">
<source src="https://video.pearvideo.com/mp4/adshort/20190702/cont-1572578-14079299_adpkg-ad_sd.mp4">
</video>
<!--播放控件-->
<div class="controls">
<div class="playBtn"></div>
<div class="progress">
<div class="duration"></div>
<i></i>
</div>
<div class="time">
<span class="current">00:00</span>/