<template>
  <div>
    <div class="fb tc f20 linheight40">1111</div>

    <!-- 视频形式的任务 -->
    <div class="taskinfo">
      <div id="player-con" style="height: 800px;"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoTitle: "",
      authId:
        "eyJTZWN1cml0eVRva2VuIjoiQ0FJUzFBTjFxNkZ0NUIyeWZTaklyNWVFRWNudzNPZEF3N0dUY1ZiVGluTWhiZGx1bzdicXB6ejJJSHBLZVhkdUFlQVhzL28wbW1oWjcvWVlsck1xRmNjWkdoQ2NOSkF2dnNVT29GditKcExGc3QySjZyOEpqc1VDbytjdWswZXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRXh6RVcrRmV2TC9wZ21RUGwvK0ZKTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVUJMZ3pLNUl2NWJMVmNTS3dJK1YreVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHdKNFRXYnJna2VVdFB0a3BtbDlEUHd1MndOQ0o5K24zRzg5S0NnL1BlcnBGUVBjTkFVNXBYc1R6UDdrcHF2YUtLWHRjWXM4MFY0NVVndUtwQUgyS2poclprQ2ZxNk5sQnhQMmxNcTVQbzNPOGMwSWVHTWFnQUZZUjM0ZGY2aWdud3p2TTNaeUdxdWtxcmdmMXM4SHRiYnBvWldJSEhKd2t1OHJlMTg5dnlKMmdSQmRyWmJkd2NFVjhiUEZNYithWTVWTm5MOUZGSk85N0FrQitCZGk0ZktrN0VpNXdMVCs2Q29XUEZZOXZaajZJR3BIdERxY21scW1FS09FVHNlZkxnWXNzbDAzb0lzMFdvRlYzc2RPeDl3MDR2Q3Y3YlZQVFNBQSIsIkF1dGhJbmZvIjoie1wiQ0lcIjpcIkpVb25xR25CR242cU5YRjgyMzE1b25YRlRyUExoL0l3THVrSERNbEhBVEk2a0EyYmgyell1VENRa0VUVWNWZjhcIixcIkNhbGxlclwiOlwiNkxxRjRSdUk3S0Z1aDhVN3lQajBUNWZQMSs5d2FUdWNCT3Urd0ZHUEc5TT1cIixcIkV4cGlyZVRpbWVcIjpcIjIwMjQtMDQtMjNUMTA6NDU6NTJaXCIsXCJNZWRpYUlkXCI6XCI2ZjhlYzhkMDhjZDM3MWVkYmZlNDA3NjRhMGZkMDEwMlwiLFwiUGxheURvbWFpblwiOlwidmlkZW8udGFpaHVtZWQuY29tXCIsXCJTaWduYXR1cmVcIjpcIndnSExCMytZNzEvSXZJQ1lOQmdPUm8xbUhVRT1cIn0iLCJWaWRlb01ldGEiOnsiU3RhdHVzIjoiTm9ybWFsIiwiVmlkZW9JZCI6IjZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyIiwiVGl0bGUiOiLnrKzkuInorrLvvJrkuInmsJTkuYvnuqoiLCJDb3ZlclVSTCI6Imh0dHBzOi8vdmlkZW8udGFpaHVtZWQuY29tLzZmOGVjOGQwOGNkMzcxZWRiZmU0MDc2NGEwZmQwMTAyL3NuYXBzaG90cy9lNTM5ZmJjNzFhNzk0ZGFkYmI3MzUyZjBhMjU5YjNmYy0wMDAwNS5qcGciLCJEdXJhdGlvbiI6Nzk4LjM3Mn0sIkFjY2Vzc0tleUlkIjoiU1RTLk5UMVpzRDE4YXRzeHNwYm5zdGFWQkxzQUUiLCJQbGF5RG9tYWluIjoidmlkZW8udGFpaHVtZWQuY29tIiwiQWNjZXNzS2V5U2VjcmV0IjoiR3NVMUhiaXZiNEpaY3ZLREppNkdQWlRjUlQyWmhqR21ONnBNUFdSQmVGOUciLCJSZWdpb24iOiJjbi1zaGFuZ2hhaSIsIkN1c3RvbWVySWQiOjE2MDQ3NDAxMzc4OTE5MDd9",
      videoId: "6f8ec8d08cd371edbfe40764a0fd0102"
    };
  },

  // //页面显示
  mounted() {
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href =
      "https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/skins/default/aliplayer-min.css";
    document.head.appendChild(link);
    const script = document.createElement("script");
    // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
    script.src =
      "https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.1/aliplayer-min.js";

    document.head.appendChild(script);
    this.getLive();
  },
  methods: {
    // 获取数据
    getLive() {
      let player = new Aliplayer(
        {
          id: "player-con",
          vid: this.videoId, // 必选参数，可以通过点播控制台（路径：媒资库>音/视频）查询。示例：1e067a2831b641db90d570b6480f****。
          playauth: this.authId, // 必选参数，参数值可通过调用GetVideoPlayAuth接口获取。
          encryptType: 1, // 必选参数，当播放私有加密流时需要设置本参数值为1。其它情况无需设置。
          playConfig: {
            EncryptType: "AliyunVoDEncryption"
          }, // 当您输出的M3U8流中，含有其他非私有加密流时，需要指定此参数。
          width: "100%"
        },
        function(player) {
          console.log("The player is created");
        }
      );
    }
  },

  created() {
   
  }
};
</script>

<script>
export default {
  //页面显示
  mounted() {
    // 动态引入较大类库避免影响页面展示
  },
  methods: {
    receiveMsg(newValue, oldValue, ownerVm, vm) {
		
    },
    checkValue() {
      console.log(this.authId, "1111");
      if (!this.authId) {
        setTimeout(() => {
          this.checkValue();
        }, 1000);
      } else {
        this.getLive();
      }
    }
    // 阿里云播放
  }
};
</script>

<style scoped>
#myVideo {
  width: 100%;
}
</style>
