Home > Article > Web Front-end > VUE3 Getting Started Example: Making a Simple Video Player

VUE3 Getting Started Example: Making a Simple Video Player

PHPzOriginal: 2023-06-15 21:42:262422browse

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

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Getting Started with VUE3 Development: Using Vue.js to communicate between componentsNext article：Getting Started with VUE3 Development: Using Vue.js to communicate between components

See more

VUE3 Getting Started Example: Making a Simple Video Player

Related articles