<template>
<!--pages/video/video.wxml-->
<video id="myVideo" :src="path" autoplay="true" @fullscreenchange="fullScreen" @ended="videoEnd" controls></video>
</template>

<script>
// pages/video/video.js
const app = getApp();
const req = require("../../utils/request.js");

export default {
  data() {
    return {
      videoList: [],
      index: 0,
      path: ''
    };
  },

  components: {},
  props: {},

  onLoad(options) {
    this.videoList = JSON.parse(options.videoList);
    this.setData({
      path: this.videoList[0].media_url
    });
  },

  onShow: function () {
    this.videoContext = uni.createVideoContext('myVideo', this);
    this.videoContext.requestFullScreen({
      direction: 0
    });
  },
  methods: {
    videoEnd() {
      // 视频播放结束后执行的方法
      var that = this;

      if (that.index == that.videoList.length - 1) {
        uni.showToast({
          title: '已播放完成',
          icon: 'loading',
          duration: 2500,
          mask: true
        });
        that.setData({
          index: 1
        });
        this.videoContext.pause(); //暂停
      } else {
        req.msg('播放下一个视频', that.videoPlay());
      }
    },

    videoPlay() {
      that = this;
      var videoList = that.videoList.length;
      that.setData({
        index: that.index + 1,
        path: that.videoList[that.index + 1].media_url
      });
      // console.log(this.path);
      this.videoContext.autoplay == 'true'; //设置自动播放

      this.videoContext.play(); //播放视频
    }

  }
};
</script>
<style>
@import "./video.css";
</style>