el-dialog vue弹窗播放视频video
主要代码如下:<el-table-column align="center" label="视频url"><template slot-scope="scope"><el-button type="primary" @click="play
·
主要代码如下:
<el-table-column align="center" label="视频url">
<template slot-scope="scope">
<el-button type="primary" @click="playVideo(scope.row)" ref="btn" size="mini">
播 放
</el-button>
</template>
</el-table-column>
<el-dialog title :visible.sync="dialogPlay" width="30%" @close="closeDialog">
<video :src="videoUrl" controls autoplay class="video" :ref="dialogVideo"
width="100%"></video>
</el-dialog>
mounted() {
this.$refs.btn.onclik(function() {
if (this.$refs.dialogVideo.paused) {
this.$refs.dialogVideo.play();
} else {
this.$refs.dialogVideo.pause();
}
});
},
methods:{
// 视频播放
playVideo(row) {
this.dialogPlay = true;
this.videoUrl = row.videoUrl;
},
}
closeDialog() {
this.videoUrl = ""; //清空数据 关闭视频播放
},
更多推荐
已为社区贡献1条内容
所有评论(0)