阿里云Web播放器使用

1. 在页面中引入css，js文件，当时最新版本是2.8.2

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>

2. 定义一个播放器容器

<div class="prism-player" id="myPlayer"></div>

3. 初始化Web播放器
其中source，cover是事先定义好的变量，及播放url和封面图

var player = new Aliplayer({
                    "id": "myPlayer",      //播放器外层容器的dom元素id
                    "source":source,     //视频播放地址url
                    "width": "100%",
                    "height": "300px",
                    "autoplay": false,
                    "isLive": false,
                    "cover": cover,     //播放器默认封面图片,需要autoplay为’false’时，才生效
                    "rePlay": false,
                    "playsinline": true,
                    "preload": true,
                    "language": "zh-cn",
                    "controlBarVisibility": "hover",
                    "useH5Prism": true,    //指定使用H5播放器
                    "skinLayout": [
                        {
                            "name": "bigPlayButton",
                            "align": "cc",
                            "x": 30,
                            "y": 80
                        },
                        {
                            "name": "errorDisplay",
                            "align": "tlabs",
                            "x": 0,
                            "y": 0
                        },
                        {
                            "name": "infoDisplay"
                        },
                        {
                            "name": "controlBar",
                            "align": "blabs",
                            "x": 0,
                            "y": 0,
                            "children": [
                                {name: "progress", align: "blabs", x: 0, y: 44},    //播放进度条
                                {name: "playButton", align: "tl", x: 15, y: 12},      //播放开始暂停按钮
                                {name: "timeDisplay", align: "tl", x: 10, y: 7},      //播放视频时间
                                {
                                    "name": "fullScreenButton",							//全屏按钮
                                    "align": "tr",
                                    "x": 10,
                                    "y": 10
                                },
                                {
                                    "name": "volume",                                       //音量
                                    "align": "tr",
                                    "x": 5,
                                    "y": 10
                                }
                            ]
                        }
                    ],
                }, function (player) {
                    console.log("The player is created");
                }
            );