1、注意插件版本：
（1）2.8.2
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
使用：new实例化
var player = new Aliplayer({})
（2）1.7.4
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/1.7.4/skins/default/index.css" />
<script src="https://g.alicdn.com/de/prismplayer/1.7.4/prism-h5-min.js"></script>
使用：new实例化
var player = new prismplayer({})
首先在index.html文件中引入：
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
然后创建video.vue单文件
<template>
<div>
<div class="p-padding">
<div class="">
<el-row>
<el-col :span="6">
<div style="padding: 10px;">
<div>
<el-input
placeholder="输入关键字进行过滤"
v-model="filterText">
</el-input>
<el-tree
ref="tree"
:key="treeKey"
current-node-key
:data="data2"
default-expand-all
node-key="id"
highlight-current
:props="defaultProps"
:filter-node-method="filterNode"
@node-click="handleNodeClick">
</el-tree>
</div>
</div>
</el-col>
<el-col :span="17" style="padding-left: 5%">
<div class="prism-player" id="J_prismPlayer"></div>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
msg: 'Welcome to Your Vue.js App',
filterText:'',
treeKey:'',
defaultProps: {// 可把label，children转换成自己想要的名称，如lable：name
children: 'children',
label: 'label'
},
data2: [
{
id: 1,
label: '一级1',
children: [{
id: 2,
label: '二级 1-1',
children: [{
id: 333,
label: '三级 1-1-1',
children: [{
id: 444,
label: '四级 1-1-1'
}, {
id: 445,
label: '四级 1-1-2'
}]
}, {
id: 335,
label: '三级 1-1-2'
}]
}]
}]
}
},
mounted: function () {
// 初始化播放器
var player = new Aliplayer({
id: "J_prismPlayer", // 容器id
source: "http://cloud.video.taobao.com/play/u/2554695624/p/1/e/6/t/1/fv/102/28552077.mp4", //视频地址
cover: "http://cdn.img.mtedu.com/images/assignment/day_3.jpg", //播放器封面图
autoplay: false, // 是否自动播放
width: "100%", // 播放器宽度
height: "450px", // 播放器高度
playsinline: true,
seekable: true,
skinLayout: [{
"name": "bigPlayButton",
"align": "cc"
//"x": 30,
//"y": 80
}, {
"align": "blabs",
"x": 0,
"y": 0,
"name": "controlBar",
"children": [
{
"align": "tl",
"x": 15,
"y": 26,
"name": "playButton"
}, {
"align": "tl",
"x": 10,
"y": 24,
"name": "timeDisplay"
}, {
"align": "tr",
"x": 20,
"y": 25,
"name": "fullScreenButton"
}, {
"align": "tr",
"x": 20,
"y": 25,
"name": "volume"
},
{
"name": "progress",
"align": "tlabs",
"x": 0,
"y": 0
}
]
}]
})
},
methods: {
filterNode (value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
handleNodeClick (data, node, obj) {
if (data.id) {
this.treeId = data.id;
this.treeDataObj = data;
this.nodeDataTree = node;
console.log(data);
}
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
其他链接：
https://www.jianshu.com/p/a2410fe3dc1d
https://help.aliyun.com/document_detail/125570.html?spm=a2c4g.11186623.2.24.44b41fc1JkDD0A#h2-sdk-5
