Uniapp modifier la vidéo

Avec le développement de la technologie Internet mobile, la portée des applications vidéo devient de plus en plus étendue, et lors du développement d'applications vidéo, uniapp est devenu l'un des principaux cadres de développement. Dans uniapp, nous pouvons utiliser le composant vidéo pour implémenter la fonction de lecture vidéo.

Cependant, le composant vidéo ne se limite pas à la lecture de vidéos. Nous pouvons utiliser uniapp pour modifier le composant vidéo afin d'obtenir plus de fonctions. Ensuite, cet article présentera la modification du composant vidéo dans uniapp.

1. Modifier le style du composant vidéo

Dans uniapp, le style par défaut du composant vidéo peut ne pas répondre à nos besoins. Par conséquent, nous pouvons modifier le style du composant vidéo via CSS. Par exemple, nous pouvons définir la largeur du composant vidéo à 100 % :

<video style="width: 100%;"></video> 

2. Modifier les contrôles d'affichage du composant vidéo

Dans uniapp, le composant vidéo affichera certaines barres de contrôle par défaut, comme lecture/pause boutons, barres de progression, etc. Mais parfois, nous devrons supprimer une partie de la barre de contrôle ou personnaliser complètement la barre de contrôle. Dans ce cas, nous pouvons y parvenir en définissant l'attribut Controls du composant vidéo.

En définissant l'attribut Controls sur false, vous pouvez supprimer toutes les barres de contrôle par défaut du composant vidéo, par exemple :

<video :src="videoUrl" controls="false"></video> 

Si nous devons personnaliser la barre de contrôle, nous pouvons ajouter une barre de contrôle en dehors du composant vidéo, et puis contrôlez la vidéo via la lecture, la pause et d'autres fonctions du composant de code JS. Par exemple, on peut ajouter une barre de contrôle sous le composant vidéo :

<video :src="videoUrl"></video> 
<div class="custom-controls">
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
  <button @click="seek(10)">快进10秒</button>
</div>

Ensuite dans le code JS, obtenez l'objet contextuel du composant vidéo via la méthode uni.createVideoContext, puis appelez la méthode appropriée pour implémenter la fonction du barre de contrôle personnalisée.

export default {
  methods: {
    play() {
      let videoContext = uni.createVideoContext('my-video')
      videoContext.play()
    },
    pause() {
      let videoContext = uni.createVideoContext('my-video')
      videoContext.pause()
    },
    seek(second) {
      let videoContext = uni.createVideoContext('my-video')
      videoContext.seek(second)
    }
  }
}

3. Obtenez les métadonnées du composant vidéo

Dans uniapp, nous pouvons charger des fichiers vidéo via le composant vidéo. Une fois le fichier vidéo chargé, nous pouvons obtenir l'objet contextuel du composant vidéo en appelant la méthode uni.createVideoContext pour obtenir les métadonnées du fichier vidéo.

Par exemple, on peut récupérer les métadonnées dans la méthode videoInitialized :

<video :src="videoUrl" @loadedmetadata="videoInitialized"></video> 

Puis dans le code JS, récupérer la durée totale du fichier vidéo en appelant la méthode getDuration :

export default {
  methods: {
    videoInitialized() {
      let videoContext = uni.createVideoContext('my-video')
      let duration = videoContext.duration
    }
  }
}

4. Modifier le fichier source de la vidéo composant

dans uniapp, nous pouvons charger des fichiers vidéo locaux ou des fichiers vidéo en réseau via le composant vidéo. Mais parfois, nous devons modifier dynamiquement le fichier source du composant vidéo au moment de l'exécution. Dans ce cas, nous pouvons le faire via le code JS.

Liez d'abord l'attribut src du composant vidéo aux données :

<video :src="videoUrl"></video> 

Ensuite, dans le code JS, récupérez l'objet contextuel du composant vidéo en appelant la méthode uni.createVideoContext, puis modifiez le fichier source du composant vidéo en appelant la méthode setSrc.

export default {
  data() {
    return {
      videoUrl: 'http://example.com/video.mp4'  // 初始视频文件路径
    }
  },
  methods: {
    changeVideoUrl(newUrl) {
      let videoContext = uni.createVideoContext('my-video')
      this.videoUrl = newUrl  // 更新data中的视频文件路径
      videoContext.setSrc(newUrl)  // 修改video组件的源文件
    }
  }
}

Grâce à la méthode ci-dessus, nous pouvons modifier le composant vidéo dans uniapp. En modifiant le composant vidéo, nous pouvons implémenter davantage de fonctions d'application vidéo, telles que la personnalisation des barres de contrôle, la modification dynamique des fichiers sources, etc.

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!