vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法

更新時間：2022年04月29日 15:41:28 作者：xuejiachen

本文主要介紹了vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.彈窗的打開關(guān)閉

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

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

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

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

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

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

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

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

<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. 視頻播放完畢自動關(guān)閉彈窗

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

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

4. 視頻在彈窗中自適應(yīng)大小

給video標簽設(shè)置合適的寬高，在利用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(() => {
            // 播放完畢自動關(guān)閉彈窗
            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>

到此這篇關(guān)于vue中使用h5 video標簽實現(xiàn)彈窗播放本地視頻的方法的文章就介紹到這了,更多相關(guān)vue 彈窗播放本地視頻內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: