Shulou(Shulou.com)05/31 Report--

This article "vue how to use h5 video tag to achieve pop-up window to play local video" article most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "vue how to use h5 video tag to achieve pop-up window to play local video" article.

1. Opening and closing of pop-up window

Using .sync to bind the visible property in the parent component, you can directly close the pop-up window in the child component to update the visible value passed by the parent component.

/ / refer to the child component in the parent component / / close the pop-up window method closeModal () {this.$emit ("updata:visible", false) in the child component;}

However, this use will cause the progress bar of the video pop-up window to be left in the last open position every time it is reopened, so it is necessary to nest a div outside the referenced sub-component and use v-if to make it re-render every time it is opened, so as to solve the problem of progress bar caching.

two。 Introduction of local video resource path

The video to be played is a static resource in the project. Because the pop-up component needs to support reusable, the video path cannot be written to death. The following example is customized for the video name.

If the video is not in the src directory, but in the public directory, it is written slightly differently.

Computed: {src () {/ / need to define return process.env.BASE_URL + "videos/" + this.videoName + ".mp4" with calculation attribute in js section;}}, 3. Automatically close the pop-up window after the video is played

Just listen to the ended event of the video tag and close the pop-up window. This.$nextTick is required as defined in the vue life cycle, otherwise the corresponding dom element cannot be obtained.

Mounted () {this.$nextTick () = > {/ / automatically close the pop-up window const eleVideo = document.querySelector (".play-video"); eleVideo.addEventListener ("ended", () = > {this.closeVideoModal ();}, false);}, 4. Video adaptive size in pop-up window

Set the appropriate width and height for the video tag by using the object-fit: contain; attribute.

Finally, the complete code is attached.

Export default {name: "VideoModal", props: {visible: {type: Boolean, default: false}, / / parent component parameter pop-up window title title: {type: String, default: ""} / / the name of the video to be played by the parent component: videoName: {type: String, default: ""}}, computed: {src () {return process.env.BASE_URL + "videos/" + this.videoName + ".mp4" }, mounted () {this.$nextTick (() = > {/ / automatically close the pop-up window const eleVideo = document.querySelector (".play-video"); eleVideo.addEventListener ("ended", () = > {this.closeVideoModal ();}, false);}) }, methods: {closeVideoModal () {this.$emit ("update:visible", false);}; .play-video {object-fit: contain; width: 100%; height: 99.5% } the above is about the content of this article on "how to use h5 video tags to play local videos in vue". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.