Vue.js 引入阿里云播放器 问题

Question

阿里云官方文档：https://player.alicdn.com/aliplayer/tutorial/tutorial.htmlvue 初学者，试着导入阿里云的播放器，但是没有成功，各位有谁做过吗？看看哪里写的有问题？感谢我的vue组件 <template>
<div :id="J_prismPlayer" class="prism-player"></div>
</template><script src="http://g.alicdn.com/de/prismplayer/2.2.0/aliplayer-h5-min.js" ></script>
<script>
export default {
data(){


},
    mounted: function() {
    let player = new prismplayer({
      id: 'J_prismPlayer',
      width: '100%',
      autoplay: false,
      
      source : 'http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4',
      //播放方式一：推荐
      prismType: 2,
      vid: '',
      accId: '',
      accSecret: '',
      apiKey: '',
    
      // vid : '',
      // playauth : '',
      showBarTime: 3000000,
      cover: 'http://liveroom-img.oss-cn-qingdao.aliyuncs.com/logo.png'
    });
  }
}
</script><style scoped>
  @import 'https://g.alicdn.com/de/prismplayer/2.2.0/skins/default/aliplayer-min.css';
</style>

Answer 1

远程视频是没问题的，我用h5 video可以正常播放。

Answer 2

 let player = new Aliplayer({

Answer 3

<div :id="J_prismPlayer" class="prism-player"></div>是不是这个问题？

Answer 4

<div :id="J_prismPlayer" class="prism-player"></div>
改成：
<div id="J_prismPlayer" class="prism-player"></div>
 :id="J_prismPlayer" 表示J_prismPlayer是一个data变量.很明显你这里只是一个字符串。

Answer 5

需要在index.html 引入  
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" />
    <script src="https://g.alicdn.com/de/prismplayer/2.7.1/aliplayer-h5-min.js"></script>然后在 webpack.base.conf.js  文件   配置   externals: {
    "prismplayer": "prismplayer"
  }
在你想要播放视频的页面      mounted: function () {
      let player = new Aliplayer({
        id: 'J_prismPlayer',
        width: '100%',
        autoplay: false,
        //播放方式一：推荐
        prismType: 2,
        vid: '',
        accId: '',
        accSecret: '',
        apiKey: '',
        // vid : '',
        // playauth : '',
        showBarTime: 1000,
        source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4",  //视频地址
        skinLayout: [
          {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
          {
            name: "H5Loading", align: "cc"
          },
          {
            name: "controlBar", align: "blabs", x: 0, y: 0,
            children: [
              // {name: "progress", align: "tlabs", x: 0, y: 0},   //隐藏进度条
              {name: "playButton", align: "tl", x: 15, y: 13},
              {name: "timeDisplay", align: "tl", x: 10, y: 6},
              {name: "fullScreenButton", align: "tr", x: 20, y: 12.5},
              {name: "volume", align: "tr", x: 20, y: 12.5},
            ]
          }
        ]
      });
    },

Answer 6

首先，对象错了
是 new Aliplayer其次，你用淘宝都资源是否合法，看看network中返回都是什么码吧