vue+vue-video-player实现弹窗播放视频

将视频播放器标签放在对话框标签中，实现弹窗

template 中

<el-dialog
                :visible.sync="dialogVisible"
                width='680px'
                heigth="400px"
                top="15vh"
                :before-close="handleClose">

            <video-player  class="vjs-default-skin vjs-big-play-centered"
                          :options="playerOptions"
                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
            >
            </video-player>

        </el-dialog>

script 中的 data 中

playerOptions:{
                    height: '360',
                    sources: [{
                        type: "rtmp/mp4",
                        src:'',

                    }],
                    techOrder: ['flash'],
                    autoplay: false,
                    controls: true,
                    poster: "../../../src/static/img/poster.png"
                },

若是想切换视频源，可用函数

this.playerOptions.sources[0].src = this.videoAddress;//videoAddress为传过来的变量

播放器播放/暂停触发的函数

onPlayerPlay:function () {
                ...
            },
            onPlayerPause:function () {
                ...
            },