Uniapp (Universal App) ist ein auf Vue.js basierendes Entwicklungsframework, das sowohl Vue-Syntax als auch plattformübergreifende Entwicklungsfunktionen nutzen kann. Das Framework kann Code in verschiedene Seiten auf mehreren Plattformen kompilieren. In diesem Artikel wird die Implementierung von Videoaufzeichnungs- und Bearbeitungsfunktionen in Uniapp vorgestellt und spezifische Codebeispiele bereitgestellt.
1. Implementierung der Videoaufzeichnungsfunktion
Um die Videoaufzeichnungsfunktion zu implementieren, müssen Sie zunächst das Uni-MP-Video-Plug-In einführen. Dieses Plug-in ist eine Videowiedergabe- und -aufzeichnungskomponente auf der Uniapp-Entwicklungsplattform und bietet umfangreiche Funktionen.
"dependencies": {
... "uni-mp-video": "^1.0.0"
}
<mp-video :src="videoSrc" :autoplay="true" controls></mp-video> <button @tap="startRecord">开始录制</button> <button @tap="endRecord">结束录制</button>
<script> <br> mpVideo aus „uni-mp-video“ importieren<br> Standard exportieren {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { videoSrc: '' } }, components: { mpVideo }, methods: { async startRecord() { try { const { tempVideoPath } = await uni.getRecorderManager().start({ duration: 60, // 录制时长，单位为秒 format: 'mp4' // 录制格式 }) this.videoSrc = tempVideoPath } catch (err) { console.log(err) } }, endRecord() { uni.getRecorderManager().stop() } }</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>}<br></script>
Im obigen Codeausschnitt haben wir das Plug-in eingeführt und auf die Komponente verwiesen Seite. In Methoden definieren wir die Methode startRecord(), um die Aufnahmefunktion zu starten, den Pfad des aufgezeichneten Videos nach Abschluss der Aufnahme abzurufen und ihn an das Attribut videoSrc zu binden, damit er auf der Seite angezeigt werden kann. Mit der Methode endRecord() wird die Aufnahmefunktion beendet.
2. Implementierung der Videobearbeitungsfunktion
Zur Implementierung der Videobearbeitungsfunktion können Sie das Uni-Image-Editor-Plug-In verwenden. Dieses Plug-in bietet umfangreiche Bild- und Videobearbeitungsfunktionen auf Basis von Uniapp, darunter Zuschneiden, Zoomen, Drehen, Filter und andere Funktionen.
„Abhängigkeiten“: {
... "uni-image-editor": "^1.0.0"
}
<mp-video :src="videoSrc" :autoplay="true" controls></mp-video> <button @tap="editVideo">剪辑视频</button>
Der Unterschied zwischen Flattern und Uniapp
So fahren Sie Ihren Computer schnell herunter
So öffnen Sie eine GFF-Datei
Werden Sols-Inschriftenmünzen auf Null zurückkehren?
Der Unterschied zwischen Konsolenkabel und Netzwerkkabel
Einführung in die Nutzung von FTP-Servern
Vorteile des SPS-Steuerungssystems
Yiou Exchange-App herunterladen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
