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

蓝Angel 工程师  2017-11-16 02:13:27
阿里云官方文档: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>
...全文
1374 8 点赞 打赏 收藏 举报
写回复
8 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
qingkooo 2018-07-05
首先,对象错了
是 new Aliplayer

其次,你用淘宝都资源是否合法,看看network中返回都是什么码吧
  • 打赏
  • 举报
回复
eternal_shallow 2018-07-02
需要在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},
]
}
]
});
},



  • 打赏
  • 举报
回复
scscms太阳光 2017-11-17
<div :id="J_prismPlayer" class="prism-player"></div>
改成:
<div id="J_prismPlayer" class="prism-player"></div>
:id="J_prismPlayer" 表示J_prismPlayer是一个data变量.很明显你这里只是一个字符串。
  • 打赏
  • 举报
回复
apple8160 2017-11-16
<div :id="J_prismPlayer" class="prism-player"></div> 是不是这个问题?
  • 打赏
  • 举报
回复
蓝Angel 2017-11-16
引用 3 楼 apple8160 的回复:
let player = new Aliplayer({
不行 应该是实例初始化的问题。
  • 打赏
  • 举报
回复
apple8160 2017-11-16
let player = new Aliplayer({
  • 打赏
  • 举报
回复
蓝Angel 2017-11-16
引用 1 楼 apple8160 的回复:
你把mp4 文件放到本地试试
远程视频是没问题的,我用h5 video可以正常播放。
  • 打赏
  • 举报
回复
apple8160 2017-11-16
你把mp4 文件放到本地试试
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2017-11-16 02:13
社区公告
暂无公告