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

[蓝Angel]

阿里云官方文档：https://player.alicdn.com/aliplayer/tutorial/tutorial.html

vue 初学者，试着导入阿里云的播放器，但是没有成功，各位有谁做过吗？看看哪里写的有问题？感谢

我的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>

[apple8160]

你把mp4 文件放到本地试试

[蓝Angel]

引用 1 楼 apple8160 的回复:

你把mp4 文件放到本地试试

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

[apple8160]

let player = new Aliplayer({

[蓝Angel]

引用 3 楼 apple8160 的回复:

let player = new Aliplayer({

不行 应该是实例初始化的问题。

[apple8160]

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

[scscms太阳光]

<div :id="J_prismPlayer" class="prism-player"></div>
改成：
<div id="J_prismPlayer" class="prism-player"></div>

:id="J_prismPlayer" 表示J_prismPlayer是一个data变量.很明显你这里只是一个字符串。

[eternal_shallow]

需要在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},
            ]
          }
        ]
      });
    },

[qingkooo]

首先，对象错了
是 new Aliplayer

其次，你用淘宝都资源是否合法，看看network中返回都是什么码吧