EveryLike/pages/component/list-view/list-view-multiplex-video.uvue

<template>
  <!-- #ifdef WEB -->
  <view>
  <!-- #endif -->
    <list-view class="list" @scrolltolower="onScrollTolower">
      <list-item class="list-item" v-for="(_,index) in item_count">
        <text>第{{index + 1}}个视频</text>
        <video class="video" :src="src" :controls="true" @pause="onPause"></video>
      </list-item>
    </list-view>
  <!-- #ifdef WEB -->
  </view>
  <!-- #endif -->
</template>

<script>
  export default {
    data() {
      return {
        item_count: 10,
        src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',
        isTesting: false
      }
    },
    methods: {
      onPause(e : UniEvent) {
        console.log(JSON.stringify(e));
      },
      onScrollTolower(_ : ScrollToLowerEvent) {
        setTimeout(() => {
          if (this.isTesting && this.item_count >= 10) {
            return
          }
          this.item_count += 10
        }, 300)
      },
    }
  }
</script>

<style>
  .list {
    flex: 1;
  }

  .list-item {
    background-color: white;
    margin-bottom: 30px;
  }

  .video {
    width: 100%;
    height: 200px;
  }
</style>