项目开发过程中遇到需要在表单中上传视频并回显的情况,表单使用element-form,上传视频使用阿里云接口,在video标签里加了autoplay属性让视频自动播放。某天上班戴耳机听歌时才发现,表单关闭后视频竟然还在播放,并没有停止。
本来想设置autoplay值为false,结果无效,网上一搜发现autoplay只有加和不加的区别,并不能控制true和false,于是写了个监听事件在表单关闭,即visible为false时让视频停止播放。
<video v-if="dataForm.url.indexOf('.mp4')>0" width="320" height="240" controls autoplay id="video">
<source :src="dataForm.url" type="video/mp4">
<source :src="dataForm.url" type="video/ogg">
<source :src="dataForm.url" type="video/webm">
<object :data="dataForm.url" width="320" height="240">
<embed width="320" height="240" :src="dataForm.url">
</object>
</video>
watch: {
// 监听事件,表单页面关闭时结束视频播放
'visible': function (val) {
if (this.visible === false) { //visible为表单显示状态
let myVideo = document.getElementById('video') //对应video标签的ID
myVideo.pause()
}
}
}