Dynamically modify the src of the video in vue

Vue is a popular JavaScript framework that makes it easy to build user interfaces. In Vue, we can easily bind data to the view, making the display of some dynamic data very simple. Video playback can also be controlled very conveniently in Vue. This article will introduce how to dynamically modify the src of video in Vue.

1. Initialize Video

First, initialize Video in the Vue component, we can use the HTML tag

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  }
}
</script>

In the above example, a data object is defined, where videoSrc represents the address of the video source. We created a video tag in the template tag of the Vue component and used the V-bind directive to bind videoSrc to the video's src attribute. In this way, Vue will automatically fill the videoSrc value into the video tag after initialization.

2. Dynamicly modify the src of the video

Now, we have created a video tag in the Vue component and successfully bound the video source address to its src On properties. If we want to dynamically modify the video source during app execution, we can use the $.refs.videoRef property.

<template>
  <div>
    <video ref="videoRef" width="640" height="360" :src="videoSrc" controls></video>
    <button @click="changeVideo()">修改视频</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: "/test.mp4",
    };
  },
  methods: {
    changeVideo() {
      this.videoSrc = "/newVideo.mp4";
      this.$refs.videoRef.load();
      this.$refs.videoRef.play();
    },
  }
}
</script>

In the above example, we defined a button and bound a click event to it. When the user clicks the button, the changeVideo method is called. In this method, we dynamically modify the videoSrc value in the data object. When the videoSrc value changes, the Vue framework will automatically update the src attribute of the video tag. However, the video tag does not automatically reload the new video stream, so we need to manually call the load() method to reload the new video source, and call the play() method to start playback.

3. Summary

This article introduces how to dynamically modify the src of a video in Vue. By creating a video tag in the Vue component and binding the video source address to its src attribute, we can easily render a playable video. If you need to dynamically modify the video source while the application is running, use the $refs.videoRef property to get a reference to the video tag, and use the load() and play() methods to reload and play the new video source.

The above is the detailed content of Dynamically modify the src of the video in vue. For more information, please follow other related articles on the PHP Chinese website!