实现方法如下
<template>
<div>
<!-- 弹窗 -->
<el-dialog
v-if="questionVisible"
:visible.sync="questionVisible"
:close-on-click-modal="false"
:close-on-press-escape="false"
custom-class="m-question"
width="100%"
append-to-body
>
<ModalQuesion
@close="QueSuccess"
@success="QueSuccess"
:id="taskId"
:datas="qussssdata"
></ModalQuesion>
</el-dialog>
<!--视频-->
<video
class="videoId"
src="@/assets/images/video.mp4"
controls="true"
controlslist="nodownload"
poster="@/assets/images/material/video-bg.png"
@ended="playover"
></video>
<el-button @click="GetQues()">弹窗按钮</el-button>
</div>
</template>
<script>
import ModalQuesion from '@/components/Question'
export default {
components: { ModalQuesion },
data () {
return {
// 弹窗
questionVisible: false
}
},
created () {
this.loaddata()
},
methods: {
GetQues () {
this.questionVisible = true
let videoId = document.getElementsByClassName('videoId')[0] // 找到视频元素
videoId.pause() // 执行暂停当前播放的视频
}
}
}
</script>
希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~