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

雨点打透心脏的1/2处 2023-02-19 09:27 18阅读 0赞

一开始设置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:

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

![20200619224538854.png][]

<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>

最终效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70][]

[20200619224538854.png]: https://img-blog.csdnimg.cn/20200619224538854.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200619224625608.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz,size_16,color_FFFFFF,t_70