program/src/pages/none/index.vue

<template>
  <div id="index_login_container" class="animation-slide-right">
    <img src="https://img.shuimuai.com/web/none_page.png" alt="" class="cover">

    <div class="video_container">
      <div class="video_item" v-for="(video,index) in videos" :key="index">
        <!--    说明-->
        <view class="padding-tb">
          <text>{{video.title}}</text>
        </view>
        <video :src="video.src" :id="'video_'+index" :data-index="index"
               @play="vPlay"></video>
      </div>

    </div>

  </div>
</template>
<script>
var $this;
export default {
  name: 'scan_container',
  data() {
    return {
      videos: [
        {
          id:1,
          title:"水母星球宣传片",
          src:"https://img.shuimuai.com/mg.mp4"
        },
        {
          id: 2,
          title: "水母星球产品使用说明",
          src: "https://img.shuimuai.com/desc_1.mp4"
        },
        {
          id: 3,
          title: "水母星球IP故事",
          src: "https://img.shuimuai.com/story_1.mp4"
        }
      ]
    }
  },
  methods: {
    vPlay(e) {
      let $current_index = e.currentTarget.dataset.index
      $this.videos.forEach(($val, $index) => {
        if ($index != $current_index) {
          let $play_box = wx.createVideoContext('video_' + $index)
          $play_box.pause()
          $play_box.seek(0)
        }
      })

    }
  },
  created() {
    $this = this;
  }
}
</script>
<style scoped>
#index_login_container {
  background-color: #31295B;
}

.cover {
  width: 100%;
  height: 667px;
}

.video_container {
  color: #ffffff;
  padding: 10px 0px;
}

.video_item {
  text-align: center;
  margin: 10px 0px;
}

video {
  width: 100%;
}
</style>