vue中使用阿里云播放器播放视频

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

https://www.cnblogs.com/libo0125ok/p/7027868.html