html 点击暂停图标的停止,[H5]<video>自定义实现点击的时候暂停与播放效果

如图所示：需要实现的自定义效果是点击视频上的图标或者视频的时候实现暂停与播放

思路整理：

1.需要将图片定位到视频上

2.点击视频的时候，暂停图片显示，播放的时候图标隐藏

3.点击图片的时候，和第二步操作一致

字数省略1.png

HTML 注：由于我是写在react项目中，所以src的链接都是用require模块获取的，如果不是写在react项目中的话直接写路径就可以

//视频中心的暂停按钮图片

id="videoPalse"

src={[require("./../../assets/laterImg/index_icon_bofang@2x.png")]}

alt=""

/>

id="videoplay"

poster={[require("./../../assets/laterImg