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