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

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条回答 默认 最新

  • iMingzhen 2022-02-08 17:41
    关注
    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

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

悬赏问题

  • ¥15 调用函数时,无关变量的改变引起函数值的改变
  • ¥15 xy坐标转化为经纬度坐标
  • ¥15 一般三角模糊数的上界值和下届值取中值的多少比较合理?
  • ¥15 关于#python#的问题,请各位专家解答!
  • ¥20 Hbase启动失败,无法启动HMaster
  • ¥15 sqpingboot在父模块已经引入了mybatisplus 在子组件不写版本号还是报错
  • ¥20 Lumerical FDTD solutions 中模型的相对阻抗,有效介电常数和有效磁导率的实部和虚部的数据如何获得?
  • ¥100 sql reporting service 远程smtp服务器配置支持
  • ¥15 ppyoloe_r带角度目标检测,loss_cls没法收敛
  • ¥15 淘宝交易指数如何解读,其关联的数据指标是什么