vue 中 自定义按钮实现video暂停和播放

video视频中加暂停按钮

dom元素如下代码块:

<div class="videoShow"><video src="../assets/1.mp4" style="width:100%;height:100%" id="videoBox" controls="controls" ref="videoPlay"> 您的浏览器不支持视频播放</video><div class="video-img" v-show='plays' @click="videoImg"><img src="../assets/img/newImg/play.png"></div></div>

JS元素如下代码块:

videoImg: function (){this.plays=false;this.$refs["videoPlay"].play();//或者//var video=document.getElementById("videoBox");//video.play();//暂停//video.pause();},

css代码块

//视频.videoShow{width: 100%;height:600px;padding: 10px 0 50px;position: relative;}#videoBox{object-fit:fill;border-radius: 8px;display: inline-block;vertical-align: baseline;}.video-img{position: absolute;top: 0;bottom: 0;width: 100%;z-index: 999;background-size:100%;cursor:pointer;img{display:block;width: 60px;height: 60px;position: relative;top:260px;left: 48%;}}//解决视频有黑色的线框video:focus {outline: -webkit-focus-ring-color auto 0px;}