vue-video-player动态更新视频地址

 

<div class="video" v-if="isVideoVisible">
      <video-player
           ref="videoPlayer"
           :options="playerOption"
           :playsinline="true"
       ></video-player>
 </div>

一开始设置playerOption的时候不要给 sources[0].src 赋视频地址：

data() {
        return {
            playerOption: {
                sources: [{
                    type: "video/mp4",
                    src: ""
                }],
                height: '480',
                autoplay: true,
                muted: true,
                language: 'zh-CN',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                controls: true,
            },
        }
    },

当在某处需要启用视频时，再将视频的地址赋值给 source[0].src 即可： 

this.playerOption.sources[0].src = "xxxxxx.mp4";

接下来制作一个可用点击触发视频播放的demo:

关闭视频弹出的按钮图标：

<template>
    <div class="main-page">
        <div class="button" @click="watchVideo">点我观看视频</div>
        <div class="video" v-if="isVideoVisible">
            <img src="assets/img/close.png" @click="handleVideoVisible">
            <video-player
                    ref="videoPlayer"
                    :options="playerOption"
                    :playsinline="true"
            ></video-player>
        </div>
    </div>
</template>
<script>
    export default {
        name: "MyVideoPlayer",
        data() {
            return {
                playerOption: {
                    sources: [{
                        type: "video/mp4",
                        src: ""
                    }],
                    height: '480',
                    autoplay: true,
                    muted: true,
                    language: 'zh-CN',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    controls: true,
                },
                isVideoVisible: false,
            }
        },
        methods: {
            handleVideoVisible() { // 控制视频弹窗开关
                this.isVideoVisible = !this.isVideoVisible;
            },
            watchVideo() { //打开视频
                this.isVideoVisible = true;
                this.playerOption.sources[0].src = "https://www.runoob.com/try/demo_source/movie.mp4";
            }
        }
    }
</script>
<style lang="scss" scoped>
    .button {
        width: 5vw;
        height: 3vh;
        top: 10vh;
        left: 20vw;
        color: #ffffff;
        background-color: rgba(0, 120, 220, .8);
        border-radius: 10px;
        cursor: pointer;
        position: absolute;
        padding: 4px 4px;
    }
    .video {
        top: 0;
        width: 100vw;
        height: 100vh;
        position: absolute;
        background-color: rgba(0, 0, 0, .5);
        z-index: 111;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    img {
        position: absolute;
        top: 0;
        right: 0;
    }
    @media screen and (min-width: 750px) {
        img {width: 36px; height: 36px;}
    }
    @media screen and (max-width: 750px) {
        img {width: 24px; height: 24px;}
    }
</style>

最终效果：