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

1、template：

<el-button type="text" @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 () {
            	et 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')
        video.remove()
        this.dialogVisible = false;
    },