uniapp은 비디오와 사진 믹싱을 구현합니다.

1. 배경

모바일 인터넷의 지속적인 발전으로 인해 동영상, 사진 등 풍부한 멀티미디어 자원은 사람들의 일상생활에 없어서는 안 될 부분이 되었습니다. 그러나 일부 애플리케이션 시나리오에서는 사진과 비디오를 동시에 표시해야 하는 필요성이 점점 더 일반화되고 있습니다. 이러한 맥락에서, 모바일 단말기에서 아름답고 부드러운 비디오 및 사진 혼합 효과를 어떻게 달성할 것인가는 피할 수 없는 문제가 되었습니다.

2. 기술 선택

이 기사에서는 구현 솔루션으로 크로스 플랫폼 개발 프레임워크 uniapp을 사용합니다. uniapp은 vuejs를 템플릿 언어로 사용하며 좋은 개발 경험과 커뮤니티 지원을 갖추고 있습니다. uniapp에서는 uni-ui나 mescroll과 같은 컴포넌트 라이브러리를 사용하여 페이지를 빠르게 구축할 수 있어 빠르고 효율적입니다.

3. 개발 계획

이 글에서는 영상과 사진의 혼합 배열을 "교대 배열"과 "나란히 배열"이라는 두 가지 레이아웃으로 나눕니다. 그 중 '교대 배열'은 동영상과 사진이 순서대로 교대로 표시되는 것을 의미하고, '나란한 배열'은 여러 개의 동영상이나 사진이 같은 행에 나란히 표시되는 것을 의미합니다.

"대체 배열"에서는 플렉스 레이아웃을 사용하여 이를 구현할 수 있습니다. 코드 예제는 다음과 같습니다.

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

이 예제에서는 비디오와 그림의 너비가 50%로 설정되어 있습니다. 이는 flex 레이아웃이 자식의 너비에 따라 자동으로 레이아웃을 조정하기 때문입니다. 하위 요소의 너비가 일관되고 깔끔하게 정렬되도록 할 수 있는 요소 및 기타 설정입니다. n번째 자식 선택기를 통해 홀수 및 짝수 요소를 설정할 수 있습니다.

"나란히 정렬"에서는 그리드 레이아웃을 사용해야 합니다. 코드 예시는 다음과 같습니다.

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

이 예시에서 Grid-template-columns는 반복(auto-fill, minmax(200px, 1fr))으로 설정되어 있습니다. 이는 레이아웃을 다음과 같이 변경하는 것입니다. 화면 너비 및 적응형. 그 중 "auto-fill"은 컨테이너의 너비에 따라 요소를 자동으로 채우는 것을 의미하고, "minmax(200px, 1fr)"은 요소의 너비가 200px 이상이고 최대값이 1fr(즉, , 헤르츠 단위로 평균 남은 공간을 차지함).

4. 요약

위의 코드 예제를 통해 uniapp을 사용하여 비디오와 사진 믹싱을 구현하는 것이 매우 쉽다는 것을 알 수 있습니다. 플렉스, 그리드 등의 레이아웃 방법을 적절히 활용하면 다양한 효과를 쉽게 얻을 수 있는 것이 핵심이다.

위 내용은 uniapp은 비디오와 사진 믹싱을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!