要求:video在没有播放视频的时候,视频中间要显示播放按钮,播放时,隐藏播放按钮。
<div class="videoBox" v-if="data.contentType==2">
<video style="object-fit: fill; width: 100%; height: 100%" :poster="data.videoImg"
id="video" @play="videoIsPlay = true;"
@pause="videoIsPlay = false;"
@ended="videoIsPlay = false;"
class="shipin" controls="controls">
<source :src="data.videoUrl" type="video/mp4"/>
</video>
<img class="icon_play" v-if="!videoIsPlay" src="../assets/img/icon_play.png" alt="">
</div>
videoIsPlay: false,
.videoBox {
width: 100%;
height: calc(100% - 70px);
position: relative;
}
.icon_play {
position: absolute;
top: 50%;
left: 50%;
z-index: 10000;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
pointer-events: none;
}