小影同学 2022-02-08 17:31 采纳率: 100%
浏览 624
已结题

VUE中,阿里云播放器报错:Aliplayer is not defined。

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

<!-- 阿里云视频播放器脚本 -->
<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>

  • 写回答

2条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 2月16日
      • 已采纳回答 2月8日
      • 创建了问题 2月8日

      悬赏问题

      • ¥20 二阶矩阵对角化和弹力平衡运动方程问题求解
      • ¥15 multisim10安装后,找不到NI License Manager的程序来安装许可证
      • ¥15 C++银行卡系统 Help!
      • ¥15 JS如何把上面这种数据类型转换成下面这种的
      • ¥15 ubuntu 16.04.2 oss上传文件并显示耗时
      • ¥15 存储过程调用没有进行逻辑计算
      • ¥20 Kali破解WIFI密码中出现这个问题是什么意思
      • ¥15 R语言数据分析的相关问题
      • ¥15 模型导入SP后贴图纹理只有一个,拆了四张UV的,怎么解决?
      • ¥15 检索带order by 非常慢