Using H5 video tag in Vue to play local video in pop-up window

Reference resources h5 < video > Use of labels

In the development process, the following points need to be paid attention to

1. Pop up window opening and closing

Use... In the parent component .sync binding visible attribute , You can directly close the pop-up window in the child component to update the information passed in by the parent component visible value ;

//  The parent component references the child component 
<video-modal :visible.sync="showVideoModal">

//  Sub components 
<el-dialog :visible="visible" @close="closeModal">
 Copy code 

//  Pop-up window closing method 
closeModal() {
    this.$emit("updata:visible", false);
}
 Copy code 

However, such use will cause the progress bar to remain in the last open position every time the video pop-up window is reopened , Therefore, you need to nest another... Outside the referenced sub component div, utilize v-if Make it re render every time you open it , So as to solve the problem of progress bar caching ;

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

2. Introduction of local video resource path

The video to be played is a static resource in the project , Because pop-up window components need to support reusability , So the video path cannot be written dead , The following example customizes the video name ;

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

If the video is not there src Under the table of contents , It is public The writing method under the directory is slightly different ;

computed: {
    src() {
        //  Need to be in js Part is defined by calculation properties 
        return process.env.BASE_URL + "videos/" + this.videoName + ".mp4";
    }
},
 Copy code 

3. Automatically close the pop-up window after the video is played

monitor video Labeled ended Event and close the pop-up window ,vue The definition in the life cycle needs to add this.$nextTick, Otherwise, the corresponding dom Elements ;

mounted() {
    this.$nextTick(() => {
        //  Automatically close the pop-up window after playing 
        const eleVideo = document.querySelector(".play-video");
        eleVideo.addEventListener("ended", () => {
            this.closeVideoModal();
        }, false);
    });
},
 Copy code 

4. Adaptive size of video in pop-up window

to video Set the appropriate width and height of the label , Using object-fit: contain; Attribute is enough .

Finally, attach the complete code

<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 }, //  Parent component parameter transfer pop-up window title  title: { type: String, default: "" }, //  The parent component passes the name of the video to be played  videoName: { type: String, default: "" } }, computed: { src() { return process.env.BASE_URL + "videos/" + this.videoName + ".mp4"; } }, mounted() { this.$nextTick(() => { //  Automatically close the pop-up window after playing  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>
 Copy code