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 () {
                ...
            },