UniApp réalise les compétences d'intégration et d'utilisation de la lecture et de l'enregistrement vidéo

UniApp réalise les compétences d'intégration et d'utilisation de la lecture et de l'enregistrement vidéo

UniApp est un cadre de développement d'applications multiplateforme qui peut être utilisé pour développer des applets WeChat, des sites H5, des applications et d'autres plates-formes. La mise en œuvre de la lecture et de l'enregistrement vidéo dans UniApp est l'une des fonctions très pratiques. Cet article présentera comment intégrer et utiliser les techniques de lecture et d'enregistrement vidéo dans UniApp, et fournira des exemples de code correspondants.

1. Intégration et utilisation de la lecture vidéo

Pour implémenter la lecture vidéo dans UniApp, vous pouvez utiliser le composant uni-mp-video. Ce composant est encapsulé sur la base du composant vidéo de l'applet WeChat et peut être utilisé sur plusieurs plates-formes. Voici un exemple de code utilisant le composant uni-mp-video :

1. Introduisez le composant uni-mp-video dans le fichier json de la page

{
  "usingComponents": {
    "uni-mp-video": "@dcloudio/uni-mp-video/uni-mp-video"
  }
}

2. Utilisez le composant uni-mp-video dans le fichier wxml de la page

<uni-mp-video src="/path/to/video.mp4"></uni-mp-video>

Parmi eux, src est l'adresse de la vidéo. La lecture de différentes vidéos peut être réalisée en définissant l'attribut src.

3. Contrôle interactif de la lecture vidéo

<uni-mp-video src="/path/to/video.mp4"
              controls
              autoplay></uni-mp-video>

En définissant l'attribut de contrôle, vous pouvez afficher les contrôles interactifs de la vidéo, tels que les boutons de lecture, les barres de progression, etc. La lecture automatique des vidéos peut être obtenue en définissant l'attribut de lecture automatique.

2. Intégration et utilisation de l'enregistrement vidéo

L'enregistrement vidéo dans UniApp peut être appelé à l'aide d'API telles que uni.chooseVideo et uni.saveVideoToPhotosAlbum. Voici un exemple de code utilisant uni.chooseVideo et uni.saveVideoToPhotosAlbum :

1. Contrôle interactif de l'enregistrement vidéo

<button bindtap="chooseVideo">选择视频</button>
<button bindtap="startRecord">开始录制</button>
<button bindtap="stopRecord">停止录制</button>

Le contrôle interactif de l'enregistrement vidéo peut être obtenu via la liaison d'événement par clic de bouton.

2. Implémentation de la fonction Choisir une vidéo

chooseVideo: function() {
  uni.chooseVideo({
    sourceType: ['album'],
    success: function(res) {
      console.log(res.tempFilePath); // 视频的临时文件路径
    }
  });
}

Vous pouvez sélectionner des fichiers vidéo locaux via l'API uni.chooseVideo et obtenir le chemin de fichier temporaire de la vidéo.

3. Implémentation de la fonction de démarrage de l'enregistrement vidéo

var recorder = null;

startRecord: function() {
  recorder = uni.createVideoRecorder({
    duration: 10,
    success: function(res) {
      console.log(res.tempVideoPath); // 录制视频的临时文件路径
    }
  });
  
  recorder.start();
}

Un enregistreur vidéo peut être créé via l'API uni.createVideoRecorder, et la durée de l'enregistrement peut être définie en définissant l'attribut de durée. Vous pouvez commencer à enregistrer une vidéo en appelant la méthode recorder.start(). Une fois l'enregistrement terminé, vous pouvez obtenir le chemin du fichier temporaire de la vidéo enregistrée via la fonction de rappel de réussite.

4. Implémentation de la fonction d'arrêt de l'enregistrement vidéo

stopRecord: function() {
  recorder.stop();
}

Vous pouvez arrêter l'enregistrement vidéo en appelant la méthode recorder.stop().

3. Résumé

Grâce aux exemples de code ci-dessus, nous pouvons intégrer et utiliser les fonctions de lecture et d'enregistrement vidéo dans UniApp. En cours de développement, nous pouvons personnaliser le style et l'interaction de la lecture et de l'enregistrement vidéo en fonction de besoins spécifiques. Dans le même temps, nous pouvons également étendre davantage de fonctions de lecture et d'enregistrement vidéo en utilisant d'autres plug-ins ou composants de package.

J'espère que cet article pourra vous aider à intégrer et à utiliser la lecture et l'enregistrement vidéo dans UniApp. Je vous souhaite de meilleurs résultats dans votre développement !

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!