VUE中，阿里云播放器报错：Aliplayer is not defined。

Question

#卡了一整天了...大佬们帮忙看看....顶不住了

<!-- 阿里云视频播放器脚本 -->
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>
<template>
  <div>

    <video-play-header :videoInfo="episodeInfo"> </video-play-header>
    <!-- 阿里云视频播放器样式 -->
     <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css" />
     
    
    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" ></div>

    </div>

</template>
 
<script>
import VideoPlayHeader from "../CourseDetail/Component/Header.vue";
import { getEpisodeById } from '@/api/getData.js'
export default {
  components: {
    VideoPlayHeader,
  },
  data() {
    return {
      episodeInfo: {},
      videoInfo:{},
      chapterList:{},
      vsid:""
    };
  },
  methods:{
        //异步函数(async)
        async getEpisode(vid){
            try{
                const result= await getEpisodeById(vid)
                if(result.data.code==0){
                    this.episodeInfo=result.data.data;
                    const rs=result.data.data.video_source_id
                    this.vsid=rs
                    console.log(this.episodeInfo)
                }
                
            }catch(error){
                console.log(error)
            }
        },
        start(){
          try{
 var player = new Aliplayer({
            id: 'J_prismPlayer',

            vid: 'c01e6e530c8641ca851573a3ae3d1d16', // 视频id
            playauth: 'eyJTZWN1cml0eVRva2VuIjoiQ0FJU2h3TjFxNkZ0NUIyeWZTaklyNWJmR2VuaHY0MTVobzZTYTJPSG9HNEZhcnRMdXJmTnBqejJJSHBOZTNocUIrMGZzUGt3bEdsVTZmZ2Nsck1xRmNRWUd4S1VQSlF2dHNnS3JWL3hKcExGc3QySjZyOEpqc1VPdklnOWpsbXBzdlhKYXNEVkVmbDJFNVhFTWlJUi8wMGU2TC8rY2lyWXBUWEhWYlNDbFo5Z2FQa09Rd0M4ZGtBb0xkeEtKd3hrMnQxNFVtWFdPYVNDUHdMU2htUEJMVXhtdldnR2wyUnp1NHV5M3ZPZDVoZlpwMXI4eE80YXhlTDBQb1AyVjgxbExacGxlc3FwM0k0U2M3YmFnaFpVNGdscjhxbHg3c3BCNVN5Vmt0eVdHVWhKL3phTElvaXQ3TnBqZmlCMGVvUUFQb3BGcC9YNmp2QWF3UExVbTliWXhncGhCOFIrWGo3RFpZYXV4N0d6ZW9XVE84MCthS3p3TmxuVXo5bUxMZU9WaVE0L1ptOEJQdzQ0RUxoSWFGMElVRTF4Rm11Q2QvWDRvQXlhTzF2NkdwTG9pdjltamNCSHFIeno1c2VQS2xTMVJMR1U3RDBWSUpkVWJUbHpiVWRKakRhL0wvWllMbE1jS2c4NFdlaVBNYXgzYlFGRHI1M3ZzVGJiWHpaYjBtcHR1UG56ZHhBS0RqK2FxMUdVR29BQkhKWFprdXBxZkgrYjQvWHJjaExlUUJKS2NjOWNNWU9zRmtVdlArWFk1N0FDYnkvbElMY1hJejlIMmJqazI2aGpjaDVCNERtMjNVRGZFTldHeWZnLy9RellOUEtKcVA4R0JJTWtVQWdFSUJTclJ6VjBHZ2Z2RVZzUUkvTzY4U3ZaazA3eVhXd096Z1JGcnhTNmc4NFNuTWUwdE5PVkJleUxwZDFIZzViRXJZND0iLCJBdXRoSW5mbyI6IntcIkNJXCI6XCJaajhld0hSU2hsNTVnREVCbkJjWmU4c2I0TlZLMmoxQkVtNXRTQTc4cm5oVENMcGlUanhJdk04Y3dsYnlhRW9lXCIsXCJDYWxsZXJcIjpcIjY0UW5TdXVuWXJiQmdPQWZ4WlJ0aWZTOWFuSHMzZk81TXFRenkzYUNNcGc9XCIsXCJFeHBpcmVUaW1lXCI6XCIyMDIyLTAyLTA4VDA4OjU2OjQ5WlwiLFwiTWVkaWFJZFwiOlwiYzAxZTZlNTMwYzg2NDFjYTg1MTU3M2EzYWUzZDFkMTZcIixcIlNpZ25hdHVyZVwiOlwiL1JqbisyUXo4VVpFY05tL2dhL3d1bS9jUmRvPVwifSIsIlZpZGVvTWV0YSI6eyJTdGF0dXMiOiJOb3JtYWwiLCJWaWRlb0lkIjoiYzAxZTZlNTMwYzg2NDFjYTg1MTU3M2EzYWUzZDFkMTYiLCJUaXRsZSI6IuaciOS6rua5vi5tcDQiLCJDb3ZlclVSTCI6Imh0dHA6Ly9vdXRpbi05NzM0MzM3MTU5NTcxMWVjYTY2NTAwMTYzZTFhNjViNi5vc3MtY24tc2hhbmdoYWkuYWxpeXVuY3MuY29tL2MwMWU2ZTUzMGM4NjQxY2E4NTE1NzNhM2FlM2QxZDE2L3NuYXBzaG90cy9jMmRiNDI0YmNkYmQ0MzYyODNiOGNjMzQ0NDgzMmNjOC0wMDAwMS5qcGc/RXhwaXJlcz0xNjQ0MzE0MTA5Jk9TU0FjY2Vzc0tleUlkPUxUQUlWVmZZeDZEMEhlTDImU2lnbmF0dXJlPVI4OUJBd0lPclpmSSUyRkYyYUxYakslMkJHSjM0QVklM0QiLCJEdXJhdGlvbiI6MTQuNTQ1fSwiQWNjZXNzS2V5SWQiOiJTVFMuTlVqUlNVUlJYMUx5aUU2RG5QZjRnVXJmRCIsIkFjY2Vzc0tleVNlY3JldCI6IjJQSkV2ZXZVcTJTMloyU3JSa0JIZ2ZCRlF0TEVqMUxTVHVON0w2RmUzcmdVIiwiUmVnaW9uIjoiY24tc2hhbmdoYWkiLCJDdXN0b21lcklkIjoxNjM1NjY4OTc3MDQ1NDQ4fQ==', // 播放凭证
            // source:this.vsid,
            // encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
            width: '100%',
            height: '500px',
            // 以下可选设置
            cover: 'http://guli.shop/photo/banner/1525939573202.jpg', // 封面
            // qualitySort: 'asc', // 清晰度排序

            mediaType: 'video', // 返回音频还是视频
            autoplay: false, // 自动播放
            isLive: false, // 直播
            rePlay: false, // 循环播放
            preload: true,
            controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
            useH5Prism: true, // 播放器类型：html5
        }, function(player) {
            console.log('播放器创建成功')
        })
          }catch(error){
console.log(error)
          }
        }
    },
    
    mounted(){
      //渲染完后拿数据
      this.getEpisode(this.$route.query.episode_id);
      this.start();
        
        
        
    }
    
};
</script>

<style lang="scss" scoped>
</style>

Answer 1

1. 先看看播放器的js有没有引入
   摁下F12，在网络中（network）查看

2. 可以尝试在public文件夹中的index.html中引入

<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>