So fügen Sie Text zu Vue-Clips hinzu

Vue ist ein beliebtes JavaScript-Framework, mit dem sich reaktionsschnelle Webanwendungen entwickeln lassen. Das Bearbeiten und Hinzufügen von Text sind Kernprozesse bei der Erstellung von Videos und Animationen. In Vue können diese Funktionen einfach mithilfe von Plugins von Drittanbietern oder benutzerdefinierten Komponenten implementiert werden. Im Folgenden stellen wir vor, wie Sie das Vue-Video-Player-Plug-In und benutzerdefinierte Vue-Komponenten in Vue verwenden, um die Funktionen zum Bearbeiten und Hinzufügen von Text zu realisieren.

1. Verwenden Sie das Vue-Video-Player-Plug-in zum Bearbeiten und Hinzufügen von Text.

Vue-Video-Player ist eine benutzerfreundliche HTML5-Videoplayer-Bibliothek, die flexible API- und Benutzeroberflächenkomponenten bereitstellt. Wir können den Vue-Video-Player zum Bearbeiten und Hinzufügen von Text verwenden. Die folgenden Schritte sind erforderlich:

1. Vue-Video-Player installieren

Im Vue-Projekt können wir den npm-Paketmanager verwenden, um Vue-Video zu installieren - Spieler. Geben Sie zum Installieren den folgenden Befehl im Terminal ein:

npm install --save vue-video-player

2. Führen Sie den Vue-Video-Player in die Vue-Komponente ein. In der Vue-Komponente müssen wir die Importanweisung verwenden zum Importieren von Vue-Video-Player- und CSS-Dateien. Das Folgende ist der Referenzcode:

<script></p>import VideoPlayer from 'vue-video-player'<p> import ' video.js/dist/video-js.css'<br>import 'vue-video-player/src/custom-theme.css'<br><br>export default {</p> Components: {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">VideoPlayer</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, data () { <p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return { playerOptions: { controls: true, autoplay: false, sources: [{ src: 'your_video_url.mp4', type: 'video/mp4' }] } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}}<p></script>

3. Verwenden Sie den Vue-Video-Player, um die Bearbeitungsfunktion umzusetzen.

Vue-Video-Player bietet eine Screenshot-Funktion, mit der wir die Bearbeitung umsetzen können. Das Folgende ist der Referenzcode:

this.$refs.videoPlayer.shoot()

Dieser Code fängt den aktuellen Videorahmen ab und gibt eine Screenshot-URL zurück. Wir können eine Variable zum Speichern dieser URL festlegen.

4. Verwenden Sie den Vue-Video-Player, um eine Textfunktion hinzuzufügen.

Vue-Video-Player bietet auch eine Popup-Komponente, mit der Sie dem Video Text hinzufügen können. Das Folgende ist der Referenzcode:

<script></p>import { Popup } from 'vue-video-player '<p> <br>Standardexport {</p> Komponenten: {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Popup</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, Daten () {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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' } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, Methoden: {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}}<p></script>

Im obigen Code verwenden wir die Popup-Komponente zum Erstellen eines Popup-Felds zum Bearbeiten von Text und zum Binden von Textvariablen mithilfe von Textbereich. In der addText-Methode fügen wir mithilfe des Canvas-Elements Text zum Videorahmen hinzu und übergeben die generierte Bild-URL an die addText-Funktion des Vue-Video-Players.

2. Verwenden Sie benutzerdefinierte Vue-Komponenten, um das Bearbeiten und Hinzufügen von Text zu implementieren.

Durch das Anpassen von Vue-Komponenten können wir das Bearbeiten und Hinzufügen von Text flexibler gestalten. Im Folgenden sind die spezifischen Schritte aufgeführt:

1. Erstellen Sie eine Vue-Komponente.

In der Vue-Komponente können wir das Videoelement zum Abspielen des Videos und das Canvas-Element zum Bearbeiten des Videorahmens verwenden. Das Folgende ist der Referenzcode:

<script></p>import { Popup } from './Popup.vue '<p> <br>Standardexport {</p> Komponenten: {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Popup</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, Requisiten: {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">videoUrl: { type: String, required: true }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, Daten () {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return { showPopup: false, text: '', startX: 0, startY: 0, endX: 0, endY: 0, videoWidth: 0, videoHeight: 0 }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, gemountete () {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const video = this.$refs.video video.addEventListener('loadedmetadata', () =&gt; { this.videoWidth = video.videoWidth this.videoHeight = video.videoHeight })</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>}, Methoden: {<p></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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 }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <br>} }<p></script>

2. Popup-Komponente erstellen

Die Popup-Komponente kann schnell ein Popup-Feld erstellen, das aus einem div-Element besteht, das einen Slot und eine Schaltfläche zum Schließen enthält. Das Folgende ist der Referenzcode:

Standard exportieren {

props: {

show: {
  type: Boolean,
  required: true
}

}}

Die oben genannten sind zwei Möglichkeiten, das Vue-Video-Player-Plug-in und benutzerdefinierte Vue-Komponenten zu verwenden, um das Ausschneiden und Hinzufügen von Text zu erreichen. Wir können verschiedene Methoden wählen, um Videobearbeitungsfunktionen entsprechend den tatsächlichen Anforderungen zu implementieren. Mithilfe dieser Technologien können wir atemberaubende Webvideos und Animationen erstellen und so ein flexibleres und personalisierteres Videobearbeitungserlebnis erzielen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Text zu Vue-Clips hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!