vue中怎么使用h5?video標簽實現彈窗播放本地視頻

這篇“vue中怎么使用h5 video標簽實現彈窗播放本地視頻”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue中怎么使用h5 video標簽實現彈窗播放本地視頻”文章吧。

1.彈窗的打開關閉

父組件中使用.sync綁定visible屬性，可直接在子組件中關閉彈窗更新父組件傳入的visible值；

// 父組件中引用子組件
<video-modal :visible.sync="showVideoModal">

// 子組件中
<el-dialog :visible="visible" @close="closeModal">

// 子組件中關閉彈窗方法
closeModal() {
    this.$emit("updata:visible", false);
}

不過這樣使用會導致每次重新打開視頻彈窗進度條都會留在上一次打開的位置，所以需要在引用子組件外再嵌套一個div，利用v-if使其每次打開都重新渲染，從而解決進度條緩存的問題；

<div v-if="showVideoModal">
    <video-modal :visible.sync="showVideoModal">
</div>

2. 本地視頻資源路徑的引入

需要播放的視頻是項目中的靜態資源，由于彈窗組件需要支持可復用，所以視頻路徑不可寫死，下面示例為視頻名稱自定義；

<video
    ref="video"
    class="play-video"
    controls="controls"
    autoplay="autoplay"
>
    <source :src="require('@/assets/videos/' + videoName + '.mp4')" type="video/mp4" />
</video>

如果視頻不在src目錄下，而是public目錄下則寫法略有不同；

computed: {
    src() {
        // 需要在js部分用計算屬性定義
        return process.env.BASE_URL + "videos/" + this.videoName + ".mp4";
    }
},

3. 視頻播放完畢自動關閉彈窗

監聽video標簽的ended事件并關閉彈窗即可，vue生命周期中定義需要增加this.$nextTick，否則無法獲取對應的dom元素；

mounted() {
    this.$nextTick(() => {
        // 播放完畢自動關閉彈窗
        const eleVideo = document.querySelector(".play-video");
        eleVideo.addEventListener("ended", () => {
            this.closeVideoModal();
        }, false);
    });
},

4. 視頻在彈窗中自適應大小

給video標簽設置合適的寬高，在利用object-fit: contain;屬性即可。

最后附上完整代碼

<template>
    <el-dialog class="video-dialog" :visible="visible" :title="title" width="75%" append-to-body @close="closeVideoModal">
        <video
            ref="video"
            class="play-video"
            controls="controls"
            autoplay="autoplay"
        >
            <source :src="src" type="video/mp4" />
        </video>
    </el-dialog>
</template>

<script>
export default {
    name: "VideoModal",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        // 父組件傳參彈窗標題
        title: {
            type: String,
            default: ""
        },
        // 父組件傳參要播放的視頻名稱
        videoName: {
            type: String,
            default: ""
        }
    },
    computed: {
        src() {
            return process.env.BASE_URL + "videos/" + this.videoName + ".mp4";
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 播放完畢自動關閉彈窗
            const eleVideo = document.querySelector(".play-video");
            eleVideo.addEventListener("ended", () => {
                this.closeVideoModal();
            }, false);
        });
    },
    methods: {
        closeVideoModal() {
            this.$emit("update:visible", false);
        }
    }
};
</script>

<style lang="scss" scoped>
.play-video {
    object-fit: contain;
    width: 100%;
    height: 99.5%;
}
</style>

以上就是關于“vue中怎么使用h5 video標簽實現彈窗播放本地視頻”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。