Comment ajouter du texte aux clips de vue

Vue est un framework JavaScript populaire qui peut être utilisé pour développer des applications Web hautement réactives. L'édition et l'ajout de texte sont des processus essentiels à la création de vidéos et d'animations. Dans Vue, ces fonctions peuvent être facilement implémentées à l'aide de plugins tiers ou de composants personnalisés. Ci-dessous, nous expliquerons comment utiliser le plug-in Vue-Video-Player et les composants Vue personnalisés dans Vue pour réaliser les fonctions d'édition et d'ajout de texte.

1. Utilisez le plug-in Vue-Video-Player pour modifier et ajouter du texte

Vue-Video-Player est une bibliothèque de lecteur vidéo HTML5 facile à utiliser qui fournit une API flexible et des composants d'interface utilisateur. Nous pouvons utiliser Vue-Video-Player pour éditer et ajouter du texte. Voici les étapes spécifiques :

1. Installez Vue-Video-Player

Dans le projet Vue, nous pouvons utiliser le gestionnaire de packages npm pour installer Vue-Video. - Joueur. Entrez la commande suivante dans le terminal pour installer :

npm install --save vue-video-player

2 Introduisez Vue-Video-Player dans le composant Vue

Dans le composant Vue, nous devons utiliser l'instruction d'importation. pour importer des fichiers Vue -Video-Player et CSS. Voici le code de référence :

<template>
<div>

<video-player ref="videoPlayer" :options="playerOptions"></video-player>

</div>
</template>

<script>
importer VideoPlayer depuis 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export par défaut {
composants : {

VideoPlayer

},
data() {

return {
  playerOptions: {
    controls: true,
    autoplay: false,
    sources: [{
      src: 'your_video_url.mp4',
      type: 'video/mp4'
    }]
  }
}

}
}
</script>

3. Utilisez Vue-Video-Player pour implémenter la fonction d'édition

Vue-Video-Player fournit une fonction de capture d'écran, que nous pouvons utiliser pour implémenter l'édition. Voici le code de référence :

this.$refs.videoPlayer.shoot()

Ce code intercepte l'image vidéo actuelle et renvoie une URL de capture d'écran. Nous pouvons définir une variable pour stocker cette URL.

4. Utilisez Vue-Video-Player pour ajouter une fonction de texte

Vue-Video-Player fournit également un composant contextuel, qui peut ajouter du texte à la vidéo. Voici le code de référence :

<template>
<div>

<video-player ref="videoPlayer" :options="playerOptions"></video-player>
<popup :show.sync="showPopup">
    <textarea v-model="text"></textarea>
    <button v-on:click="addText">Add</button>
</popup>

</div>
</template>

<script>
import { Popup } from 'vue-video-player '

export default {
composants : {

Popup

},
data () {

return {
  playerOptions: {
    controls: true,
    autoplay: false,
    sources: [{
      src: 'your_video_url.mp4',
      type: 'video/mp4'
    }]
  },
  showPopup: false,
  text: '',
  style: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    fontSize: '30px'
  }
}

},
méthodes : {

addText () {
  const video = this.$refs.videoPlayer.video
  const canvas = document.createElement('canvas')
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  const ctx = canvas.getContext('2d')
  ctx.drawImage(video, 0, 0)
  ctx.font = this.style.fontSize + ' Arial'
  ctx.fillStyle = '#fff'
  const x = canvas.width / 2 - ctx.measureText(this.text).width / 2
  const y = canvas.height / 2 + this.style.fontSize / 2
  ctx.fillText(this.text, x, y)
  const imgUrl = canvas.toDataURL('image/png')
  this.$refs.videoPlayer.addText(imgUrl, this.style)
  this.showPopup = false
}

}
}
</script>

Dans le code ci-dessus, nous utilisons le composant contextuel pour créer une boîte contextuelle pour modifier le texte et lier des variables de texte à l'aide de textarea. Dans la méthode addText, nous ajoutons du texte à l'image vidéo à l'aide de l'élément canvas et transmettons l'URL de l'image générée à la fonction addText de Vue-Video-Player.

2. Utilisez des composants Vue personnalisés pour implémenter l'édition et l'ajout de texte

En personnalisant les composants Vue, nous pouvons réaliser l'édition et l'ajout de texte de manière plus flexible. Voici les étapes spécifiques :

1. Créer un composant Vue

Dans le composant Vue, nous pouvons utiliser l'élément vidéo pour lire la vidéo et l'élément canevas pour éditer l'image vidéo. Voici le code de référence :

<template>
<div>

<video ref="video" :src="videoUrl" controls></video>
<canvas ref="canvas" :width="videoWidth" :height="videoHeight" v-on:mousedown="onMouseDown" v-on:mousemove="onMouseMove" v-on:mouseup="onMouseUp"></canvas>
<button v-on:click="shoot">Clip</button>
<button v-on:click="showPopup = true">Add Text</button>
<popup :show.sync="showPopup">
  <textarea v-model="text"></textarea>
  <button v-on:click="addText">Add</button>
</popup>

</div>
</template>

<script>
import { Popup } from './Popup.vue '

export par défaut {
composants : {

Popup

},
accessoires : {

videoUrl: {
  type: String,
  required: true
}

},
data () {

return {
  showPopup: false,
  text: '',
  startX: 0,
  startY: 0,
  endX: 0,
  endY: 0,
  videoWidth: 0,
  videoHeight: 0
}

},
Mounted () {

const video = this.$refs.video
video.addEventListener('loadedmetadata', () => {
  this.videoWidth = video.videoWidth
  this.videoHeight = video.videoHeight
})

},
méthodes : {

onMouseDown (event) {
  const canvas = this.$refs.canvas
  const rect = canvas.getBoundingClientRect()
  this.startX = event.clientX - rect.left
  this.startY = event.clientY - rect.top
},
onMouseMove (event) {
  const canvas = this.$refs.canvas
  const rect = canvas.getBoundingClientRect()
  this.endX = event.clientX - rect.left
  this.endY = event.clientY - rect.top
},
onMouseUp () {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  const video = this.$refs.video
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  ctx.beginPath()
  ctx.rect(this.startX, this.startY, this.endX - this.startX, this.endY - this.startY)
  ctx.stroke()
},
shoot () {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  const video = this.$refs.video
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  const imgUrl = canvas.toDataURL('image/png')
  window.open(imgUrl)
},
addText () {
  const canvas = this.$refs.canvas
  const ctx = canvas.getContext('2d')
  ctx.font = '30px Arial'
  ctx.fillStyle = '#fff'
  const x = canvas.width / 2 - ctx.measureText(this.text).width / 2
  const y = canvas.height / 2 + 30 / 2
  ctx.fillText(this.text, x, y)
  const imgUrl = canvas.toDataURL('image/png')
  window.open(imgUrl)
  this.showPopup = false
}

}
}
</script>

2. Créer un composant Popup

Le composant Popup peut créer rapidement une boîte contextuelle composée d'un élément div contenant un emplacement et un bouton de fermeture. Voici le code de référence :

<template>
<div class="popup" v-show="show">

<div class="popup-content">
  <slot></slot>
  <button v-on:click="$emit('update:show', false)">Close</button>
</div>

</div>
</template>

<script&gt ;
export default {
props : {

show: {
  type: Boolean,
  required: true
}

}
}
</script>

Ci-dessus sont deux façons d'utiliser le plug-in Vue-Video-Player et les composants Vue personnalisés pour réaliser le découpage et l'ajout de texte. Nous pouvons choisir différentes méthodes pour mettre en œuvre les fonctions de montage vidéo en fonction des besoins réels. Grâce à ces technologies, nous pouvons créer de superbes vidéos et animations Web, offrant ainsi une expérience de montage vidéo plus flexible et personnalisée.

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!