Modifier dynamiquement le src de la vidéo dans vue

Vue est un framework JavaScript populaire qui facilite la création d'interfaces utilisateur. Dans Vue, nous pouvons facilement lier des données à la vue, ce qui rend l'affichage de certaines données dynamiques très simple. La lecture vidéo peut également être contrôlée très facilement dans Vue. Cet article expliquera comment modifier dynamiquement le src de la vidéo dans Vue.

1. Initialiser la vidéo

Tout d'abord, initialisez la vidéo dans le composant Vue, nous pouvons utiliser la balise HTML 39000f942b2545a5315c57fa3276f220. Dans cette balise vidéo, nous devons fournir quelques informations de base, telles que la taille de la vidéo, l'adresse du fichier source, etc. De cette façon, nous pouvons restituer une vidéo jouable sur la page. Vous trouverez ci-dessous un simple composant Vue contenant une balise vidéo.

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

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

Dans l'exemple ci-dessus, un objet de données est défini, où videoSrc représente l'adresse de la source vidéo. Nous avons créé une balise vidéo dans la balise modèle du composant Vue et utilisé la directive V-bind pour lier videoSrc à l'attribut src de la vidéo. De cette façon, Vue remplira automatiquement la valeur videoSrc dans la balise vidéo après l'initialisation.

2. Modifier dynamiquement le src de la vidéo

Maintenant, nous avons créé une balise vidéo dans le composant Vue et lié avec succès l'adresse source de la vidéo à son attribut src. Si nous souhaitons modifier dynamiquement la source vidéo lors de l'exécution de l'application, nous pouvons utiliser la propriété $.refs.videoRef.

<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>

Dans l'exemple ci-dessus, nous avons défini un bouton et y avons lié un événement de clic. Lorsque l'utilisateur clique sur le bouton, la méthode changeVideo est appelée. Dans cette méthode, nous modifions dynamiquement la valeur videoSrc dans l'objet de données. Lorsque la valeur videoSrc change, le framework Vue mettra automatiquement à jour l'attribut src de la balise vidéo. Cependant, la balise vidéo ne recharge pas automatiquement le nouveau flux vidéo, nous devons donc appeler manuellement la méthode load() pour recharger la nouvelle source vidéo et appeler la méthode play() pour démarrer la lecture.

3. Résumé

Cet article présente comment modifier dynamiquement le src d'une vidéo dans Vue. En créant une balise vidéo dans le composant Vue et en liant l'adresse source vidéo à son attribut src, nous pouvons facilement restituer une vidéo lisible. Si vous devez modifier dynamiquement la source vidéo pendant l'exécution de l'application, utilisez la propriété $refs.videoRef pour obtenir une référence à la balise vidéo et utilisez les méthodes load() et play() pour recharger et lire la nouvelle source vidéo. .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!