uniapp implements video and picture mixing

1. Background

With the continuous development of the mobile Internet, rich multimedia resources such as videos and pictures have become an indispensable part of people's daily lives. However, in some application scenarios, the need to display pictures and videos at the same time is becoming more and more common. In this context, how to achieve a beautiful and smooth video and picture mixing effect on the mobile terminal has become an unavoidable problem.

2. Technology selection

This article uses the cross-platform development framework uniapp as the implementation solution. uniapp uses vuejs as its template language and has a good development experience and community support. In uniapp, you can use component libraries such as uni-ui or mescroll to quickly build pages, which is fast and efficient.

3. Development Plan

This article divides the mixed arrangement of videos and pictures into two layouts: "alternating arrangement" and "side-by-side arrangement". Among them, "alternating arrangement" means that videos and pictures are displayed alternately in sequence, while "side-by-side arrangement" means that multiple videos or pictures are displayed side by side in the same row.

In "alternating arrangement", you can use flex layout to achieve this. The code example is as follows:

<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>

It should be noted that in this example, the width of the video and picture is set to 50%. This is because the flex layout will automatically adjust the layout based on the width of the child elements and other settings. This ensures that the width of the child elements is consistent and arranged neatly. The setting of odd and even elements can be achieved through the nth-child selector.

In "side-by-side arrangement", you need to use grid layout. The code example is as follows:

<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>

It should be noted that in this example, grid-template-columns is set to repeat(auto-fill, minmax(200px, 1fr)), which is to make the layout follow Adapts to changes in screen width. Among them, "auto-fill" means automatically filling the element according to the width of the container, and "minmax(200px, 1fr)" means that the width of the element is at least 200px and the maximum value is 1fr (that is, occupying the average remaining space in Hertz).

4. Summary

Through the above code examples, we can see that it is very easy to use uniapp to implement video and picture mixing. The key is to master the layout skills. With the proper use of layout methods such as flex and grid, you can easily achieve diverse effects.

The above is the detailed content of uniapp implements video and picture mixing. For more information, please follow other related articles on the PHP Chinese website!