list-view-multiplex-video.uvue 706 字节
Newer Older
DCloud-yinjiacheng's avatar
DCloud-yinjiacheng 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<template>
  <list-view class="list">
    <list-item class="list-item" v-for="(_,index) in 20">
      <text>第{{index + 1}}个视频</text>
      <video class="video" :src="src" :controls="true" @pause="onPause"></video>
    </list-item>
  </list-view>
</template>

<script>
  export default {
    data() {
      return {
        src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4'
      }
    },
    methods: {
      onPause(e : UniEvent) {
        console.log(JSON.stringify(e));
      }
    }
  }
</script>

<style>
  .list {
    flex: 1;
  }

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

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