Vue实现对话框播放视频功能：

1、template：

<el-button type="text" size="small" class="showImgClass" 
	@click="openVideo(scope.row)">视频
</el-button>

<el-dialog id="dialog" width="850px" hight="400" :visible.sync="dialogVisible" :before-close="handleClose">
    <div id="isDiv"></div>
</el-dialog>

2、script：

data(){
	return{
		dialogVisible:false,
	}
},
methods:{
	//点击按钮出现弹窗播放视频
	openVideo(row) {
    	this.sphttpurl = row.spurl
    	if (!row.spurl) {
      		this.$message.error('暂无视频')
      		return
    	}
    	this.dialogVisible = true;
    	// console.log(this.sphttpurl) 后台返回的视频路径
    	this.$nextTick(() => {
      		let str = document.createElement('video')
      		window.setTimeout(function () {
        		let tag = document.querySelector('#isDiv').appendChild(str)
      		}, 1000)
      		str.id = 'playVideos'
      		str.src = this.sphttpurl
      		str.setAttribute('type', 'video/mp4')
      		str.setAttribute('controls', 'controls')
      		str.style.width = '800px'
      		str.style.height = '400px'
      		str.play()
    	})
	},
	//关闭弹出框时，视频关闭播放
	handleClose() {
    	const video = document.getElementById('playVideos')
    	// console.log(video)
    	video.remove()
    	this.dialogVisible = false;
  		}
	},
 	//beforeDestroy() {
  		//this.removeEvent()
	//}
}