VUE3 Getting Started Example: Making a Simple Video Player-Vue.js-php.cn

VUE3 Getting Started Example: Making a Simple Video Player

PHPz

Release： 2023-06-15 21:42:26

Original

2441 people have browsed it

With the continuous emergence of new generation front-end frameworks, VUE3 is highly loved as a fast, flexible, and easy-to-use front-end framework. Next, let's learn the basics of VUE3 and make a simple video player.

1. Install VUE3

First, we need to install VUE3 locally. Open the command line tool and execute the following command:

npm install vue@next

Copy after login

Then, create a new HTML file and introduce VUE3:

<!doctype html>
<html>
<head>
    <title>VUE3视频播放器</title>
</head>
<body>
    <div id="app">
        <video src="" controls></video>
    </div>
    <script type="module">
        import {createApp} from 'vue';

        const app = createApp({
            data() {
                return {
                    videoSrc: ''
                };
            },

            methods: {
                playVideo() {
                    this.$refs.video.play();
                },

                pauseVideo() {
                    this.$refs.video.pause();
                }
            }
        });

        app.mount('#app');
    </script>
</body>
</html>

Copy after login

This code first introduces VUE3 and creates an app named "app" root node. Among them,

videoSrc is used to store the path of the video
The playVideo method is used to play the video
ThepauseVideo method is used to pause the video

2. Binding data

In this example, we will use v-model to bind the value of the `` tag to videoSrc so that we can change the video path by setting the value of the input box. We can also use v-bind to bind the src attribute of the video tag to videoSrc:

<div>
    <input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
    <br />
    <br />
    <video ref="video" v-bind:src="videoSrc" controls></video>
</div>

Copy after login

Here, we bind the data to an input box and bind the video path to the video tag.

3. Add Control Buttons

Next, we add two event listeners that allow us to add control buttons on the page - one for playing the video and one for pausing the video. .

<div>
    <input v-model="videoSrc" type="text" placeholder="在这里输入视频地址" />
    <br />
    <br />
    <video ref="video" v-bind:src="videoSrc" controls></video>
    <br />
    <br />
    <button v-on:click="playVideo()">播放</button>
    <button v-on:click="pauseVideo()">暂停</button>
</div>

Copy after login

4. Summary

Now, we have built a simple VUE3 video player. Through this simple example, you have learned about the basic data binding of VUE3 and how to bind and control the video tag. From this foundation, you can delve deeper into VUE3 and apply it to richer applications.

The emergence of VUE3 allows front-end engineers to get rid of some tedious operations and processes, greatly improving development efficiency. Hope this article is helpful to you.

The above is the detailed content of VUE3 Getting Started Example: Making a Simple Video Player. For more information, please follow other related articles on the PHP Chinese website!