完成基本的构建

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+[*.{js,jsx,ts,tsx,vue}]
+charset = utf-8
+indent_style = space    //使用制表符
+indent_size = 4 //4个空格为一个缩进
+trim_trailing_whitespace = true
+insert_final_newline = true

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    root: true,
+    env: {
+        node: true,
+        browser: true,
+        es6: true
+    },
+        'extends': [
+        'plugin:vue/essential',
+        'eslint:recommended'
+    ],
+    rules: {
+        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    },
+    parserOptions: {
+        parser: 'babel-eslint'
+    },
+
+    globals: {
+        'Aliplayer': false
+    },
+}

.gitignore

@@ -0,0 +1,20 @@
+.DS_Store
+node_modules/
+*.map
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -1,2 +1,217 @@
-# vue-aliplayer-v2
+# sign-canvas 一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端;
-青出于蓝而胜于蓝,感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.
+
+#### ┭┮﹏┭┮ 因为 vue-aliplayer-v2 的包名被占用了,只好去掉一个前缀了.... 假如此轮子对你有帮助,请顺手star一下吧.o(*￣︶￣*)o
+
+## 开始使用! 下载安装npm包
+```bash
+npm i sign-canvas --save
+```
+```javascript
+//全局注册 main.js
+import SignCanvas from 'sign-canvas';
+
+Vue.use(SignCanvas);
+
+```
+
+你可以这样使用: 
+
+### 组件模板使用
+
+```html
+<template>
+    <div id="app">
+        <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="value"/>
+        <img class="view-image" :src="value" width="150" height="150">
+        <div class="sign-btns">
+            <span id="clear" @click="canvasClear()">清空</span>
+            <span id="save" @click="saveAsImg()">保存</span>
+            <span id="save" @click="downloadSignImg()">下载</span>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            value: null,
+            options:{
+                isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+                isShowBorder: false, //是否显示边框 [可选]
+            }
+        }
+    },
+    methods:{
+
+        /**
+         * 清除画板
+         */
+        canvasClear(){
+            this.$refs.SignCanvas.canvasClear();
+        },
+
+        /**
+         * 保存图片
+         */
+        saveAsImg(){
+            const img = this.$refs.SignCanvas.saveAsImg();
+            alert(`image 的base64：${img}`);
+        },
+
+        /**
+         * 下载图片
+         */
+        downloadSignImg(){
+            this.$refs.SignCanvas.downloadSignImg();
+        },
+
+    }
+}
+</script>
+<style lang="less" scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+.sign-canvas{
+    display: block;
+    margin: 0 auto;
+    border: 1px dashed #f00;
+}
+.view-image{
+    display: block;
+    margin: 20px auto;
+}
+.sign-btns{
+    width: 800px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    #clear,
+    #clear1,
+    #save {
+        margin: 0 auto;
+        display: inline-block;
+        padding: 5px 10px;
+        width: 150px;
+        height: 40px;
+        line-height: 40px;
+        border: 1px solid #eee;
+        background: #e1e1e1;
+        border-radius: 10px;
+        text-align: center;
+        margin: 20px auto;
+        cursor: pointer;
+    }
+}
+</style>
+
+```
+### 功能与配置
+
+```javascript
+props:{
+    options: {  //配置项
+        required: false,
+        type: [Object],
+        default: () => null
+    }
+}
+
+// 1. options [Object] 可选,非必传
+
+// 2. v-model [String] 可选,非必传
+
+```
+1. 配置项 options 属性
+```javascript
+{
+    lastWriteSpeed: 1,  //书写速度 [Number] 可选
+    lastWriteWidth: 2,  //下笔的宽度 [Number] 可选
+    lineCap: 'round',   //线条的边缘类型 [butt]平直的边缘 [round]圆形线帽 [square]	正方形线帽
+    lineJoin: 'round',  //线条交汇时边角的类型  [bevel]创建斜角 [round]创建圆角 [miter]创建尖角。
+    canvasWidth: 600, //canvas宽高 [Number] 可选
+    canvasHeight: 600,  //高度  [Number] 可选
+    isShowBorder: true, //是否显示边框 [可选]   当签名模式处于false的时候此选项才生效
+    bgColor: '#fcc', //背景色 [String] 可选
+    borderWidth: 1, // 网格线宽度  [Number] 可选
+    borderColor: "#ff787f", //网格颜色  [String] 可选
+    writeWidth: 5, //基础轨迹宽度  [Number] 可选
+    maxWriteWidth: 30, // 写字模式最大线宽  [Number] 可选
+    minWriteWidth: 5, // 写字模式最小线宽  [Number] 可选
+    writeColor: '#101010', // 轨迹颜色  [String] 可选
+    isSign: false, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+    imgType:'png'   //下载的图片格式  [String] 可选为 jpeg  canvas本是透明背景的
+}
+```
+
+2. 内置方法
+```javascript
+//清除画布 无返回值 [Void]
+this.$refs.SignCanvas.canvasClear(); 
+
+//清除画布 返回图片的base64编码 [String]
+this.$refs.SignCanvas.saveAsImg();
+
+//调用内置的下载图片方法,默认将图片保存为png格式
+this.$refs.SignCanvas.downloadSignImg();
+
+```
+## [在线演示](https://langyuxiansheng.github.io/vue-aliplayer-v2/)
+### 图片展示 
+---
+
+初始化展示
+![初始化展示](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/s1.png)
+
+非签名模式书写展示
+![非签名模式书写展示](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/s2.png)
+
+保存展示
+![保存展示](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/s3.png)
+
+下载的图片展示
+![下载的图片展示](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/s4.png)
+
+签名模式的图片展示
+![签名模式的图片展示](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/s5.png)
+
+---
+## 更多功能正在完善中......
+## 如果您有什么好的建议请留言
+
+## 二次开发 下载项目
+
+```bash
+git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git
+```
+
+## Project setup
+```bash
+cd vue-aliplayer-v2
+
+npm install
+```
+
+### Compiles and hot-reloads for development
+```bash
+npm run dev
+```
+
+### Compiles and minifies for production
+```bash
+npm run build
+```
+
+### Lints and fixes files
+```bash
+npm run lint
+```
+
+## 缺陷 & 后期计划
+
+> 目前还没有撤销回到上一步的操作,一旦输入错了就只有清除重写了(这个是之前去银行的时候,那个签名板是这样设计的);
+> 如果有需要还是可以考虑加上回到上一步的方法.
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}

dist/css/index.878e05a5.css

@@ -0,0 +1 @@
+[data-v-f6d32ee6]{margin:0;padding:0}.sign-canvas[data-v-f6d32ee6]{display:block;margin:0 auto;border:1px dashed red}.view-image[data-v-f6d32ee6]{display:block;margin:20px auto}.sign-btns[data-v-f6d32ee6]{width:800px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.sign-btns #clear1[data-v-f6d32ee6],.sign-btns #clear[data-v-f6d32ee6],.sign-btns #save[data-v-f6d32ee6]{margin:0 auto;display:inline-block;padding:5px 10px;width:150px;height:40px;line-height:40px;border:1px solid #eee;background:#e1e1e1;border-radius:10px;text-align:center;margin:20px auto;cursor:pointer}

dist/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-sign-canvas/favicon.ico><title>vue-aliplayer-v2</title><link href=/vue-sign-canvas/css/index.878e05a5.css rel=preload as=style><link href=/vue-sign-canvas/js/chunk-vendors.404d749c.js rel=preload as=script><link href=/vue-sign-canvas/js/index.61751f56.js rel=preload as=script><link href=/vue-sign-canvas/css/index.878e05a5.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-aliplayer-v2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-sign-canvas/js/chunk-vendors.404d749c.js></script><script src=/vue-sign-canvas/js/index.61751f56.js></script></body></html>

examples/App.vue

@@ -0,0 +1,81 @@
+<template>
+    <div id="app">
+        <VueAliplayerV2
+            ref="VueAliplayerV2"
+        />
+        <button @click="play()">播放</button>
+        <button @click="pause()">暂停</button>
+        <button @click="replay()">重播</button>
+        <button @click="getCurrentTime()">播放时刻</button>
+    </div>
+</template>
+<script>
+export default {
+    data(){
+        return {
+            value: null,
+            options:{
+                isSign: true, //签名模式 [Boolean] 默认为非签名模式,有线框, 当设置为true的时候没有任何线框
+                isShowBorder: false, //是否显示边框 [可选]
+            },
+            player: null
+        }
+    },
+
+    methods:{
+
+        play(){
+            this.$refs.VueAliplayerV2.play()
+        },
+
+        pause(){
+            this.$refs.VueAliplayerV2.pause();
+        },
+
+        replay(){
+            this.$refs.VueAliplayerV2.replay();
+        },
+
+        getCurrentTime(){
+            this.$refs.VueAliplayerV2.getCurrentTime();
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+.sign-canvas{
+    display: block;
+    margin: 0 auto;
+    border: 1px dashed #f00;
+}
+.view-image{
+    display: block;
+    margin: 20px auto;
+}
+.sign-btns{
+    width: 800px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    #clear,
+    #clear1,
+    #save {
+        margin: 0 auto;
+        display: inline-block;
+        padding: 5px 10px;
+        width: 150px;
+        height: 40px;
+        line-height: 40px;
+        border: 1px solid #eee;
+        background: #e1e1e1;
+        border-radius: 10px;
+        text-align: center;
+        margin: 20px auto;
+        cursor: pointer;
+    }
+}
+</style>

examples/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue';
+import App from './App.vue';
+import VueAliplayerV2 from '../packages';
+Vue.use(VueAliplayerV2);
+Vue.config.productionTip = false;
+new Vue({
+    render: h => h(App),
+}).$mount('#app');

lib/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>vue-aliplayer-v2 demo</title>
+<script src="./vue-aliplayer-v2.umd.js"></script>
+
+<link rel="stylesheet" href="./vue-aliplayer-v2.css">
+
+
+<script>
+console.log(vue-aliplayer-v2)
+</script>

package.json

@@ -0,0 +1,34 @@
+{
+    "name": "vue-aliplayer-v2",
+    "version": "1.0.0",
+    "author": "yxs",
+    "description": "青出于蓝而胜于蓝,感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.",
+    "main":"lib/vue-aliplayer-v2.umd.min.js",
+    "private": false,
+    "license": "MIT",
+    "scripts": {
+        "dev": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "lib": "vue-cli-service build --target lib --name vue-aliplayer-v2 --dest lib packages/index.js"
+    },
+    "dependencies": {
+        "core-js": "^2.6.5",
+        "vue": "^2.6.10"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^3.8.0",
+        "@vue/cli-plugin-eslint": "^3.8.0",
+        "@vue/cli-service": "^3.8.0",
+        "babel-eslint": "^10.0.1",
+        "eslint": "^5.16.0",
+        "eslint-plugin-vue": "^5.0.0",
+        "less": "^3.9.0",
+        "less-loader": "^5.0.0",
+        "vue-template-compiler": "^2.6.10"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git@github.com:langyuxiansheng/vue-aliplayer-v2.git"
+    }
+}

packages/AliplayerV2/index.js

@@ -0,0 +1,7 @@
+// 导入组件，组件必须声明 name
+import AliplayerV2 from './src/main.vue';
+// 为组件添加 install 方法，用于按需引入
+AliplayerV2.install = function (Vue) {
+    Vue.component(AliplayerV2.name, AliplayerV2);
+}
+export default AliplayerV2;

packages/AliplayerV2/src/main.vue

@@ -0,0 +1,445 @@
+<template>
+    <div :id="config.id"></div>
+</template>
+<script>
+export default {
+    name: 'VueAliplayerV2',
+    props: {
+        options: {  //配置项
+            required: false,
+            type: [Object],
+            default: () => null
+        },
+
+    },
+    data () {
+        return {
+            player: null,   //播放器实例
+            config:{
+                id: `player-${Date.parse(new Date())}`,  //播放器的ID
+                width: '100%',
+                autoplay: true,
+                isLive: true,
+                //支持播放地址播放,此播放优先级最高
+                source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
+                cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
+                scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js',
+            },
+            events:[
+                /**
+                 * 播放器视频初始化按钮渲染完毕。
+                 * 播放器UI初始设置需要此事件后触发，避免UI被初始化所覆盖。
+                 * 播放器提供的方法需要在此事件发生后才可以调用。
+                 */
+                'ready',
+                /**
+                 * 视频由暂停恢复为播放时触发。
+                 */
+                'play',
+                /**
+                 * 视频暂停时触发。
+                 */
+                'pause',
+                /**
+                 * 能够开始播放音频/视频时发生，会多次触发，仅H5播放器。
+                 */
+                'canplay',
+                /**
+                 * 播放中，会触发多次。
+                 */
+                'playing',
+                /**
+                 * 当前视频播放完毕时触发。
+                 */
+                'ended',
+                /**
+                 * 直播流中断时触发。
+                 * m3u8/flv/rtmp在重试5次未成功后触发。
+                 * 提示上层流中断或需要重新加载视频。
+                 * PS：m3u8一直自动重试，不需要上层添加重试。
+                 */
+                'liveStreamStop',
+                /**
+                 * m3u8直播流中断后重试事件，每次断流只触发一次。
+                 */
+                'onM3u8Retry',
+                /**
+                 * 控制栏自动隐藏事件。
+                 */
+                'hideBar',
+                /**
+                 * 控制栏自动显示事件。
+                 */
+                'showBar',
+                /**
+                 * 数据缓冲事件。
+                 */
+                'waiting',
+                /**
+                 * 播放位置发生改变时触发，仅H5播放器。
+                 * 可通过getCurrentTime方法，得到当前播放时间。
+                 */
+                'timeupdate',
+                /**
+                 * 截图完成。
+                 */
+                'snapshoted',
+                /**
+                 * 全屏事件，仅H5支持。
+                 */
+                'requestFullScreen',
+                /**
+                 * 取消全屏事件，iOS下不会触发，仅H5支持。
+                 */
+                'cancelFullScreen',
+                /**
+                 * 错误事件。
+                 */
+                'error',
+                /**
+                 * 开始拖拽，参数返回拖拽点的时间。
+                 */
+                'startSeek',
+                /**
+                 * 完成拖拽，参数返回拖拽点的时间。
+                 */
+                'completeSeek'
+            ],
+        };
+    },
+    mounted () {
+        this.init();
+    },
+    methods: {
+
+        /**
+         * 创建script和css
+         * 加载Alipayer的SDK
+         */
+        init(){
+            let load = true;
+            let scriptTag = document.getElementById(scriptID);
+            const linkID = 'aliplayer-min-css';
+            const scriptID = 'aliplayer-min-js';
+            const head = document.getElementsByTagName('head');
+            const html = document.getElementsByTagName('html');
+            if(!document.getElementById(linkID)) {
+                const link = document.createElement('link');
+                link.href = this.config.cssLink;
+                link.setAttribute('id',linkID);
+                head[0].appendChild(link);
+            }
+
+            if(!scriptTag) {
+                scriptTag = document.createElement('script');
+                scriptTag.id = scriptID;
+                scriptTag.type = "text/javascript";
+                scriptTag.src = this.config.scriptSrc;
+                html[0].appendChild(scriptTag);
+            }
+
+            scriptTag.addEventListener("load", () => {
+                this.initPlayer();
+                load = false;
+            });
+
+            if(!load){
+                this.initPlayer();
+            }
+        },
+
+        /**
+         * 创建播放器
+         * @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
+         */
+        initPlayer(){
+            if(typeof window.Aliplayer != 'undefined') {
+                const options = this.options;
+                if(options){
+                    for (const key in options) {
+                       this.config[key] = options[key];
+                    }
+                }
+                this.player = new Aliplayer(this.config, function(player) {
+                    console.log('播放器创建好了。',player);
+                });
+                for(const ev in this.events){
+                    this.player.on(this.events[ev],(e)=>{
+                        console.log(`object ${this.events[ev]}`,e);
+                        this.$emit(this.events[ev],e);
+                    });
+                }
+                //通过播放器实例的off方法取消订阅
+                //player.off('ready',handleReady);
+            }
+        },
+
+        /**
+         * @return player 实例
+         */
+        getPlayer(){
+            return this.player;
+        },
+
+        /**
+         * 播放视频。
+         */
+        play(){
+            console.log(`播放视频。`);
+            this.player.play();
+        },
+
+        /**
+         * 暂停视频
+         */
+        pause(){
+            console.log(`暂停视频`);
+            this.player.pause();
+        },
+
+        /**
+         * 重播视频
+         */
+        replay(){
+            console.log(`重播视频`);
+            this.player.replay();
+        },
+
+        /**
+         * 跳转到某个时刻进行播放，time的单位为秒。
+         * @param time
+         * @return player
+         */
+        seek(time){
+            console.log(`跳转到某个时刻进行播放，time为${time}秒。`);
+            this.player.seek(time);
+        },
+
+        /**
+         * 获取当前的播放时刻，返回的单位为秒。
+         * @return player
+         */
+        getCurrentTime(){
+            console.log(`获取当前的播放时刻，返回的单位为${this.player.getCurrentTime()}秒。`);
+            return this.player.getCurrentTime();
+        },
+
+        /**
+         * 获取视频总时长，返回的单位为秒，这个需要在视频加载完成以后才可以获取到，可以在play事件后获取。
+         * @return player
+         */
+        getDuration(){
+            console.log(`获取视频总时长，返回的单位为${this.player.getDuration()}秒。`);
+            return this.player.getDuration();
+        },
+
+        /**
+         * 获取当前的音量，返回值为0-1的实数。ios和部分android会失效。
+         * @return player
+         */
+        getVolume(){
+            console.log(`获取当前的音量${this.player.getVolume()}。`);
+            return this.player.getVolume();
+        },
+
+        /**
+         * 设置音量，vol为0-1的实数，ios和部分android会失效。
+         * @return player
+         */
+        setVolume(v){
+            console.log(`设置音量，vol为${v}。`);
+            this.player.setVolume(v);
+        },
+
+        /**
+         * 直接播放视频url，time为可选值（单位秒）。目前只支持同种格式（mp4/flv/m3u8）之间切换。
+         * 暂不支持直播rtmp流切换。
+         * @return player
+         */
+        loadByUrl(url, time){
+            console.log(`直接播放视频url${url}，time为${time}。`);
+            this.player.loadByUrl(url, time);
+        },
+
+        /**
+         * 目前只支持H5播放器。暂不支持不同格式视频间的之间切换。暂不支持直播rtmp流切换。
+         * @param vid 视频id
+         * @param 播放凭证
+         */
+        replayByVidAndPlayAuth(vid, playauth){
+            console.log(`replayByVidAndPlayAuth vid${vid}，playauth为${playauth}。`);
+            this.player.replayByVidAndPlayAuth(vid, playauth);
+        },
+
+        /**
+         * 目前只支持H5播放器。暂不支持不同格式视频间的之间切换。暂不支持直播rtmp流切换。
+         * @param vid 视频id
+         * @param 播放凭证
+         * @description 仅MPS用户时使用 仅MPS用户时使用 参数顺序为：vid、accId、accSecret、stsToken、authInfo、domainRegion
+         */
+        replayByVidAndAuthInfo(vid, accId, accSecret, stsToken, authInfo, domainRegion){
+            console.log(`replayByVidAndAuthInfo 参数顺序为：vid、accId、accSecret、stsToken、authInfo、domainRegion`,vid, accId, accSecret, stsToken, authInfo, domainRegion);
+            this.player.replayByVidAndAuthInfo(vid, accId, accSecret, stsToken, authInfo, domainRegion);
+        },
+
+        /**
+         * 设置播放器大小w，h可分别为400px像素或60%百分比。
+         * @param w 宽度
+         * @param h 宽度
+         * @description chrome浏览器下flash播放器分别不能小于397x297。
+         */
+        setPlayerSize(w, h){
+            console.log(`设置播放器大小 宽度:${w},高度:${h}`);
+            this.player.setPlayerSize(w, h);
+        },
+
+        /**
+         * 手动设置播放的倍速，倍速播放仅H5支持。移动端可能会失效，比如android微信。
+         * 倍速播放UI默认是开启的。
+         * 如果自定义过skinLaout属性，需要添加speedButton项到数组里：
+         * @param h 宽度
+         * @description {name：“speedButton”，align：“tr”，x：10，y：23}
+         */
+        setSpeed(speed){
+            console.log(`手动设置播放的倍速:${speed}`);
+            this.player.setSpeed(speed);
+        },
+
+        /**
+         * 设置截图参数
+         * @param width 宽度
+         * @param height 高度
+         * @param rate 截图质量
+         */
+        setSanpshotProperties(width, height, rate){
+            console.log(`设置截图参数:`,width, height, rate);
+            this.player.setSanpshotProperties(width, height, rate);
+        },
+
+        /**
+         * 播放器全屏，仅H5支持。
+         */
+        requestFullScreen(){
+            console.log(`播放器全屏，仅H5支持`);
+            this.player.fullscreenService && this.player.fullscreenService.requestFullScreen();
+        },
+
+        /**
+         * 播放器退出全屏，iOS调用无效，仅H5支持。
+         */
+        cancelFullScreen(){
+            console.log(`播放器全屏，仅H5支持`);
+            this.player.fullscreenService && this.player.fullscreenService.cancelFullScreen();
+        },
+
+        /**
+         * 获取播放器全屏状态，仅H5支持。
+         */
+        getIsFullScreen(){
+            console.log(`获取播放器全屏状态，仅H5支持。`,this.player.fullscreenService && this.player.fullscreenService.getIsFullScreen());
+            return this.player.fullscreenService && this.player.fullscreenService.getIsFullScreen();
+        },
+
+        /**
+         * 获取播放器状态，包含的值,
+         * @returns init ready loading play pause playing waiting error ended
+         */
+        getStatus(){
+            console.log(`获取播放器状态，包含的值`,this.player.fullscreenService && this.player.fullscreenService.getStatus());
+            return this.player.fullscreenService && this.player.fullscreenService.getStatus();
+        },
+
+        /**
+         * 设置直播的开始结束时间，开启直播时移功能时使用。
+         * @param beginTime 开始时间
+         * @param endTime 结束时间
+         * @description 例子：player.liveShiftSerivce.setLiveTimeRange(“”，‘2018/01/04 20:00:00’)
+         */
+        setLiveTimeRange(beginTime, endTime){
+            console.log(`设置直播的开始时间:${beginTime},结束时间:${endTime}，开启直播时移功能时使用。`);
+            this.player.liveShiftSerivce && this.player.liveShiftSerivce.setLiveTimeRange(beginTime, endTime);
+        },
+
+        /**
+         * 参数为旋转角度， 正数为正时针旋转， 负数为逆时针旋转。
+         * @param rotate 旋转角度
+         * @description 例如: setRotate(90)。详情参见旋转和镜像。
+         */
+        setRotate(rotate){
+            console.log(`参数为旋转角度:${rotate}。`);
+            this.player.setRotate(rotate);
+        },
+
+        /**
+         * 获取旋转角度。详情参见旋转和镜像。
+         * @return rotate 旋转角度
+         */
+        getRotate(){
+            console.log(`获取旋转角度:${this.player.getRotate()}`);
+            return this.player.getRotate();
+        },
+
+        /**
+         * 设置镜像
+         * @param image 镜像类型 可选值为：horizon,vertical
+         * @description 例如: setImage(‘horizon’)。详情参见旋转和镜像。
+         */
+        setImage(image){
+            console.log(`设置镜像:${image}。`);
+            this.player.setImage(image);
+        },
+
+        /**
+         * 播放器销毁
+         */
+        dispose(){
+            console.log(`播放器销毁。`);
+            this.player.dispose();
+        },
+
+        /**
+         * 设置封面
+         * @param cover 封面地址
+         */
+        setCover(cover){
+            console.log(`设置封面:${cover}`);
+            this.player.setCover(cover);
+        },
+
+        /**
+         * 设置封面
+         * @param markers 设置打点数据
+         */
+        setProgressMarkers(markers){
+            console.log(`markers打点数据集合:${markers}`);
+            this.player.setProgressMarkers(markers);
+        },
+
+        /**
+         * 设置试看时间，单位为秒，详情参见
+         * @param time 试看时间
+         */
+        setPreviewTime(time){
+            console.log(`设置试看时间，单位为:${time}秒`);
+            this.player.setPreviewTime(time);
+        },
+
+        /**
+         * 获取试看时间
+         * @return rotate 旋转角度
+         */
+        getPreviewTime(){
+            console.log(`获取试看时间:${this.player.getPreviewTime()}`);
+            return this.player.getPreviewTime();
+        },
+
+        /**
+         * 是否试看
+         */
+        isPreview(){
+            console.log(`是否试看`);
+            this.player.isPreview();
+        }
+    }
+};
+</script>

packages/index.js

@@ -0,0 +1,30 @@
+// packages / index.js
+// 导入单个组件
+import AliplayerV2 from './AliplayerV2';
+
+// 以数组的结构保存组件，便于遍历
+const components = [
+    AliplayerV2
+];
+
+// 定义 install 方法
+const install = (Vue) =>{
+    if (install.installed) return false;
+    install.installed = true;
+    // 遍历并注册全局组件
+    components.map(component => {
+        Vue.component(component.name, component)
+    });
+};
+
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+}
+
+export default {
+    // 导出的对象必须具备一个 install 方法
+    install,
+    AliplayerV2,
+    // 组件列表
+    ...components
+};

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vue-aliplayer-v2</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue-aliplayer-v2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

vue.config.js

@@ -0,0 +1,15 @@
+// vue.config.js
+module.exports = {
+    // 将 examples 目录添加为新的页面
+    pages: {
+        index: {
+          // page 的入口
+          entry: 'examples/main.js',
+          // 模板来源
+          template: 'public/index.html',
+          // 输出文件名
+          filename: 'index.html'
+        }
+	},
+	publicPath: process.env.NODE_ENV === "production" ? "/vue-sign-canvas" : "/"
+}