uniapp implementiert die Video- und Bildmischung

1. Hintergrund

Mit der kontinuierlichen Entwicklung des mobilen Internets sind umfangreiche Multimedia-Ressourcen wie Videos und Bilder zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. In einigen Anwendungsszenarien besteht jedoch immer häufiger die Notwendigkeit, Bilder und Videos gleichzeitig anzuzeigen. In diesem Zusammenhang ist es zu einem unvermeidlichen Problem geworden, einen schönen und reibungslosen Video- und Bildmischeffekt auf dem mobilen Endgerät zu erzielen.

2. Technologieauswahl

Dieser Artikel verwendet das plattformübergreifende Entwicklungsframework uniapp als Implementierungslösung. Uniapp verwendet Vuejs als Vorlagensprache und verfügt über eine gute Entwicklungserfahrung und Community-Unterstützung. In uniapp können Sie Komponentenbibliotheken wie uni-ui oder mescroll verwenden, um schnell und effizient Seiten zu erstellen.

3. Entwicklungsplan

Dieser Artikel unterteilt die gemischte Anordnung von Videos und Bildern in zwei Layouts: „Abwechselnde Anordnung“ und „Nebeneinander-Anordnung“. Dabei bedeutet „alternierende Anordnung“, dass Videos und Bilder abwechselnd nacheinander angezeigt werden, während „Nebeneinander-Anordnung“ bedeutet, dass mehrere Videos oder Bilder nebeneinander in derselben Reihe angezeigt werden.

In der „alternierenden Anordnung“ können Sie dazu das Flex-Layout verwenden. Das Codebeispiel lautet wie folgt:

<template>
  <view class="alt">
    <view v-for="(item, index) in list" :key="index" class="item">
      <video v-if="item.type==='video'" :src="item.src"></video>
      <image v-else :src="item.src"></image>
    </view>
  </view>
</template>

<style lang="scss">
  .alt {
    display: flex;
    flex-wrap: wrap;
    .item {
      box-sizing: border-box;
      width: 50%;
      padding: 10px;
      video {
        display: block;
        width: 100%;
      }
      image {
        display: block;
        width: 100%;
      }
    }
    .item:nth-child(odd) {
      margin-right: 10px;
    }
    .item:nth-child(even) {
      margin-left: 10px;
    }
  }
</style>

Es ist zu beachten, dass in diesem Beispiel die Breite des Videos und des Bildes auf 50 % eingestellt ist. Dies liegt daran, dass das Flex-Layout das Layout automatisch an die Breite des untergeordneten Elements anpasst Elemente und andere Einstellungen, die sicherstellen können, dass die untergeordneten Elemente eine einheitliche Breite und eine ordentliche Anordnung haben. Die Einstellung ungerader und gerader Elemente kann über den n-ten-Kind-Selektor erreicht werden.

Bei der „Nebeneinander-Anordnung“ müssen Sie ein Rasterlayout verwenden. Das Codebeispiel lautet wie folgt:

<template>
  <view class="line">
    <view v-for="(item, index) in list" :key="index" class="item">
      <video v-if="item.type==='video'" :src="item.src"></video>
      <image v-else :src="item.src"></image>
    </view>
  </view>
</template>

<style lang="scss">
  .line {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
    .item {
      box-sizing: border-box;
      overflow: hidden;
      video {
        display: block;
        width: 100%;
      }
      image {
        display: block;
        width: 100%;
      }
    }
  }
</style>

Es ist zu beachten, dass in diesem Beispiel „grid-template-columns“ auf „repeat(autofill, minmax(200px, 1fr))“ eingestellt ist, was bedeutet, dass sich das Layout mit dem ändert Bildschirmbreite und adaptiv. Unter diesen bedeutet „automatisch ausfüllen“, dass das Element automatisch entsprechend der Breite des Containers gefüllt wird, und „minmax(200px, 1fr)“ bedeutet, dass die Breite des Elements mindestens 200px und der Maximalwert 1fr beträgt (d. h , was den durchschnittlichen verbleibenden Platz in Hertz einnimmt).

4. Zusammenfassung

Anhand der obigen Codebeispiele können wir sehen, dass es sehr einfach ist, uniapp zum Mischen von Videos und Bildern zu verwenden. Der Schlüssel liegt darin, die Layout-Fähigkeiten zu beherrschen. Mit der richtigen Verwendung von Layout-Methoden wie Flex und Raster können Sie problemlos vielfältige Effekte erzielen.

Das obige ist der detaillierte Inhalt vonuniapp implementiert die Video- und Bildmischung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!