2025-04-06 03:57:55 +08:00
13 changed files with 1824 additions and 867 deletions
--- a/README.md
+++ b/README.md
@ -1,17 +1,12 @@
 # vue-alipayer-v2
-
-## 感谢每一位支持开源的朋友. 这是一个基于 Alipayer 开发并封装成 vue 组件的播放器.
-
+## 感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.
 ### vue中使用Alipayer,播放rtmp,m3u8,mp4视频
-
 #### [本项目在线演示](https://langyuxiansheng.github.io/vue-aliplayer-v2/)
-
 #### [阿里云播放器在线演示](https://player.alicdn.com/aliplayer/index.html)

-> 假如此轮子对你有帮助,请顺手 star 一下吧.o(_￣︶￣_)o
+> 假如此轮子对你有帮助,请顺手star一下吧.o(*￣︶￣*)o

 ## 1.安装使用! 下载安装npm包
-
 ```bash
 npm i vue-aliplayer-v2 --save
 or
@ -21,115 +16,70 @@ yarn add vue-aliplayer-v2
 #### 全局注册 main.js

 ```javascript
-import VueAliplayerV2 from "vue-aliplayer-v2";
+import VueAliplayerV2 from 'vue-aliplayer-v2';

 Vue.use(VueAliplayerV2);
-
-//可选全局配置
-//Vue.use(VueAliplayerV2,{
-// 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'
-//});
 ```

 #### 局部注册 App.vue

 ```javascript
-//推荐第一种(仅v1.2.3)及以上的版本可用
-import VueAliplayerV2 from "vue-aliplayer-v2";
-components: {
-  VueAliplayerV2;
-}
-
-//或者
-components: {
-  VueAliplayerV2: VueAliplayerV2.Player;
-}
+import VueAliplayerV2 from 'vue-aliplayer-v2';
+components:{ VueAliplayerV2: VueAliplayerV2.Player }
 ```

 ## 2.组件中使用

-### 组件模板使用,下面的视频连接仅供演示测试.
-
+### 组件模板使用,但需要注意的是,假如你的页面中有多个播放器,那么这个id需要唯一!!,ID必传,只有一个的时候,可以忽略,命名只能是有效字符开头. 下面的视频连接仅供演示测试.
 ```html
 <template>
    <div id="app">
-    <template v-if="!isShowMultiple && show">
-      <vue-aliplayer-v2
-        :source="source"
-        ref="VueAliplayerV2"
-        :options="options"
-      />
+        <template v-if="show">
+            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
        </template>
-    <div v-if="isShowMultiple && show" class="show-multiple">
-      <template v-for="x in 5">
-        <vue-aliplayer-v2
-          class="multiple-player"
-          :key="x"
-          :source="source"
-          ref="VueAliplayerV2"
-          :options="options"
-        />
-      </template>
-    </div>
-    <p class="remove-text" v-if="!show">播放器已销毁!</p>
+        <p class="remove-text" v-else>播放器已销毁!</p>
        <div class="player-btns">
-      <template v-if="!isShowMultiple && show">
            <span @click="play()">播放</span>
            <span @click="pause()">暂停</span>
            <span @click="replay()">重播</span>
            <span @click="getCurrentTime()">播放时刻</span>
-        <span @click="getStatus()">获取播放器状态</span>
-      </template>
            <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
-      <span @click="options.isLive = !options.isLive"
-        >{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span
-      >
-      <span @click="showMultiple()"
-        >{{isShowMultiple ? '显示1个播放器' : '显示多个播放器'}}</span
-      >
+            <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
+            <span @click="getStatus()">获取播放器状态</span>
        </div>
        <div class="source-box">
            <span class="source-label">选择播放源(支持动态切换):</span>
            <select v-model="source" name="source" id="source">
-        <option value="//player.alicdn.com/video/aliyunmedia.mp4"
-          >播放源1</option
-        >
-        <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4"
-          >播放源2</option
-        >
-        <option
-          value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888"
-          >播放源3</option
-        >
+                <option value="//player.alicdn.com/video/aliyunmedia.mp4">播放源1</option>
+                <option value="//yunqivedio.alicdn.com/user-upload/nXPDX8AASx.mp4">播放源2</option>
+                <option value="//tbm-auth.alicdn.com/e7qHgLdugbzzKh2eW0J/kXTgBkjvNXcERYxh2PA@@hd_hq.mp4?auth_key=1584519814-0-0-fc98b2738f331ff015f7bf5c62394888">播放源3</option>
                <option value="//ivi.bupt.edu.cn/hls/cctv1.m3u8">直播播放源4</option>
            </select>
        </div>
        <div class="source-box">
            <span class="source-label">输入播放源(支持动态切换):</span>
-      <input class="source-input" type="text" v-model="source" />
+            <input class="source-input" type="text" v-model="source">
        </div>
    </div>
 </template>
 <script>
+// import VueAliplayerV2 from 'vue-aliplayer-v2';
 export default {
+    // components:{ VueAliplayerV2: VueAliplayerV2.Player },
    data(){
        return {
            options: {
-          // source:'//player.alicdn.com/video/aliyunmedia.mp4',
-          isLive: true, //切换为直播流的时候必填
-          // format: 'm3u8'  //切换为直播流的时候必填
+                source:'//player.alicdn.com/video/aliyunmedia.mp4'
            },
-        source: "//player.alicdn.com/video/aliyunmedia.mp4",
-        // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
-        show: true,
-        isShowMultiple: false,
-      };
+            source: '//player.alicdn.com/video/aliyunmedia.mp4',
+            show: true
+        }
    },

    methods:{
+
        play(){
-        this.$refs.VueAliplayerV2.play();
+            this.$refs.VueAliplayerV2.play()
        },

        pause(){
@ -141,21 +91,10 @@ components: {
        },

        getCurrentTime(){
-        // this.$refs.VueAliplayerV2.getCurrentTime();
-        this.source = "http://ivi.bupt.edu.cn/hls/cctv1.m3u8";
-      },
-
-      getStatus() {
-        const status = this.$refs.VueAliplayerV2.getStatus();
-        console.log(`getStatus:`, status);
-        alert(`getStatus:${status}`);
-      },
-
-      showMultiple() {
-        this.isShowMultiple = !this.isShowMultiple;
-      },
-    },
-  };
+            this.$refs.VueAliplayerV2.getCurrentTime();
+        }
+    }
+}
 </script>
 <style lang="less">
 * {
@ -167,13 +106,6 @@ components: {
    padding: 20px;
    font-size: 24px;
 }
-  .show-multiple {
-    display: flex;
-    .multiple-player {
-      width: calc(100% / 4);
-      margin: 20px;
-    }
-  }
 .player-btns{
    width: 100%;
    display: flex;
@ -213,19 +145,12 @@ components: {
    }
 }
 </style>
-```

+```
 ## 3.功能与配置

 ```javascript
 props:{
-
-    forbidFastForward: {    //禁止拖拽快进
-            required: false,
-            type: [Boolean],
-            default: false
-    },
-    
    options: {  //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
        required: false,
        type: [Object],
@ -238,25 +163,29 @@ props:{
        default: () => null
    },
    
+    id:{  //播放器的ID 唯一标识符 不传就是默认的 但是有多个的时候不一定是唯一的
+        required: false,
+        type: [String],
+        default: `player-${Date.parse(new Date())}`
+    },
+
    cssLink:{   //css版本源
        required: false,
        type: [String],
-        default: `https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css`
+        default: `https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css`
    },
    scriptSrc:{ //js版本源
        required: false,
        type: [String],
-        default: `https://g.alicdn.com/de/prismplayer/2.9.7/aliplayer-min.js`
+        default: `https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js`
    }
 }
 ```
-
 ### 3.1 配置项 options 属性
-
 可以参考 [属性和接口说明](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P) 

 | 名称        | 类型   |  说明  |
-| :----------------------- | :-----------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :-   | :-:  | :-  |
 | source     | String |   视频播放地址url：单独url。默认状态，表示使用vid+playauth。source播放方式优先级最高。source支持多清晰度设置：source:’{“HD”:”address1”,”SD”:”address2”’，详情参见多清晰度播放。     |
 | vid        |   String  |   媒体转码服务的媒体Id。   |
 | playauth        |   String  |    播放权证，如何得到参见获取playauth。   |
@ -317,16 +246,14 @@ props:{
 | liveRetry   |   int  |   直播播放失败重试次数，默认5次   |

 ### 3.2 播放器方法
-
 ```javascript
 // 暂停播放
 this.$refs.VueAliplayerV2.pause();
 ```
-
 可以参考 [播放器接口方法](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u63A5u53E32) 

 | 名称        | 参数   |  说明  |
-| :--------------------- | :------------------------------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| :-   | :-  | :-  |
 | play  | - |   播放视频。    |
 | pause | - |   暂停视频。    |
 | replay | - |   重播视频。    |
@ -372,16 +299,15 @@ this.$refs.VueAliplayerV2.pause();
         */
        handleReady(e){
            console.log(`ready`,e);
-      },
-    },
-  };
+        }
+    }
+}
 </script>
 ```
-
 可以参考 [播放器事件](https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63)

 | 名称       |  说明  |
-| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| :-         | :-  |
 | ready  |   播放器视频初始化按钮渲染完毕。播放器UI初始设置需要此事件后触发，避免UI被初始化所覆盖。播放器提供的方法需要在此事件发生后才可以调用。    |
 | play  |   视频由暂停恢复为播放时触发。    |
 | pause  |   视频暂停时触发。    |
@ -402,12 +328,10 @@ this.$refs.VueAliplayerV2.pause();
 | completeSeek  |  完成拖拽，参数返回拖拽点的时间。  |

 ---
-
 ## 5. 图片展示

 ![图片1](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/p1.png)
 ![图片2](https://github.com/langyuxiansheng/vue-aliplayer-v2/blob/master/images/p2.png)
-
 ---

 ## 6.二次开发 下载项目
@ -417,7 +341,6 @@ git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git
 ```

 ## Project setup
-
 ```bash
 cd vue-aliplayer-v2

@ -425,63 +348,36 @@ 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
 ```

 ## 7.缺陷 & 后期计划
-
 > 2019年12月27日 更新优化局部引用方式

 > 您有功能建议,或者bug反馈请留言.

 ## 8.感谢
-
 ---
-
 - vue-aliplayer 的作者,项目地址:https://github.com/slacrey/vue-aliplayer

 - Alipayer 阿里云的开源播放器 https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1085.36fc6fc57WKZ5P#h2-u64ADu653Eu5668u4E8Bu4EF63

 ### Customize configuration
-
 See [Configuration Reference](https://cli.vuejs.org/config/).

 ## 更新日志

-> v1.3.0 修复部分已知bug,增加forbidFastForward 属性,感谢 "william-xue"网友的功能提交.
-
- sdk 版本更新,默认 SDK 版本由 2.9.3 更新为 2.9.20
- 默认注释更新
- 增加禁止用户拖拽快进的属性选项 forbidFastForward [Boolean] 默认 false
-
-> v1.2.9 修正部分默认属性, 感谢"Schean17"网友的反馈与建议.
-
-> v1.2.8 更换底层默认 sdk 版本为 2.9.3 修复 options 遇到 update loop 错误 感谢"litmonw"网友的反馈与建议.
-
-> v1.2.7 更换底层默认 sdk 版本为 2.9.1 的版本. 更新线上演示 demo 的选项
-
-> v1.2.6 优化 beforeDestroy() 部分的代码.
-
-> v1.2.5 更换默认的播放器 SDK 版本 2.8.2 => 2.9.0,2.8.2 的版本存在多个播放器同时播放直播流异常的 bug,增加了全局 SDK 版本配置,可以在 Vue.use()的时候进行配置.
-
-> v1.2.4 修复多个播放器加载,只初始化一个播放器的 bug.文档部分更新,增加了问题栏. 感谢"沙洲 ad"的反馈与建议.
-
-> v1.2.3 优化播放器的初始化代码,调整包内结构,优化局部组件的注册方式,也兼容老版本的引用方式.文档部分更新,增加了问题栏. 感谢"liangzhiyuan2015"和"fancheur"两位网友的反馈与建议.
-
 > v1.2.2 修复指定id情况下,播放器报错"没有为播放器指定容器",目前移除外部指定id的方式,所有的播放器id都由内部生成,不再由外部指定容器(外部指定的意义并不大),其它的说明:更新1.2.1后报错Uncaught TypeError: 没有为播放器指定容器,因为源码中变更了部分代码,以及最大限度的简化代码,组件内部的根容器就只有一个div容器,导致以前外部指定id的时候,容器id与外部的不一致,导致抛出异常了,现在已经紧急修复了,若在使用,请更新到v1.2.2的版本;如果使用了外部指定id的方式请移除外部的id.否则id会出现重复的情况., 感谢"liyoro"的反馈和建议.

 > v1.2.1 修复直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的bug,修复多个播放器只渲染1个的bug, 感谢"Jonauil"和"guangming95"两位网友的反馈和建议.
@ -496,17 +392,3 @@ See [Configuration Reference](https://cli.vuejs.org/config/).

 > v1.1.6 修复部分已知bug和优化局部的引用方式

---
-
-## 其它问题
-
-1. IOS 或者其它设备无法全屏播放,或者点击全屏按钮的时候也只是显示竖屏？
-
-> 方案与问题所在:
-
-一般情况下可能是开启了强制竖屏(也就是屏幕锁定)打开后就会竖屏而不会全屏了！如下关闭就可以了：
-参考 issues: https://github.com/langyuxiansheng/vue-aliplayer-v2/issues/25
-
-开启了屏幕锁定，只要上拉控制中心，点击屏幕锁定关闭就可以了！
-
-也可能是播放器或者浏览器兼容性问题.
--- a/examples/App.vue
+++ b/examples/App.vue
@ -1,9 +1,7 @@
 <template>
    <div id="app">
        <template v-if="!isShowMultiple && show">
-            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options"
-            :forbidFastForward="forbidFastForward"
-            />
+            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
        </template>
        <div v-if="isShowMultiple && show" class="show-multiple">
            <template v-for="x in 5">
@ -13,13 +11,11 @@
        <p class="remove-text" v-if="!show">播放器已销毁!</p>
        <div class="player-btns">
            <template v-if="!isShowMultiple && show">
-
                <span @click="play()">播放</span>
                <span @click="pause()">暂停</span>
                <span @click="replay()">重播</span>
                <span @click="getCurrentTime()">播放时刻</span>
                <span @click="getStatus()">获取播放器状态</span>
-                <span @click="handlerForbidFastForward()">禁止快进</span>
            </template>
            <span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
            <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</span>
@ -38,75 +34,23 @@
            <span class="source-label">输入播放源(支持动态切换):</span>
            <input class="source-input" type="text" v-model="source">
        </div>
-        <div class="source-box">
-            <span class="source-label">指定为flash:</span>
-              <select v-model="options.useFlashPrism">
-                <option :value="true">是</option>
-                <option :value="false">否</option>
-            </select>
-        </div>
-        <div class="source-box">
-            <span class="source-label">禁止用户拖动(仅flash有效):</span>
-              <select v-model="options.disableSeek">
-                <option :value="true">是</option>
-                <option :value="false">否</option>
-            </select>
-        </div>
    </div>
 </template>
 <script>
 // import VueAliplayerV2 from '../packages';
 export default {
-    // components:{ VueAliplayerV2 },
+    // components:{ VueAliplayerV2: VueAliplayerV2.Player },
    data(){
        return {
            options: {
                // source:'//player.alicdn.com/video/aliyunmedia.mp4',
-                isLive: !true,   //切换为直播流的时候必填
-                // skinLayout: [
-                // {
-                //     'name': 'bigPlayButton',
-                //     'align': 'blabs',
-                //     'x': 30,
-                //     'y': 80
-                // },
-                // {
-                //     'name': 'infoDisplay'
-                // },
-                // {
-                //     'name': 'controlBar',
-                //     'align': 'blabs',
-                //     'x': 0,
-                //     'y': 0,
-                //     'children': [
-                //         {
-                //             'name': 'liveDisplay',
-                //             'align': 'tlabs',
-                //             'x': 15,
-                //             'y': 6
-                //         },
-                //         {
-                //             'name': 'fullScreenButton',
-                //             'align': 'tr',
-                //             'x': 10,
-                //             'y': 10
-                //         },
-                //         {
-                //             'name': 'volume',
-                //             'align': 'tr',
-                //             'x': 5,
-                //             'y': 10
-                //         }
-                //     ]
-                // }]
-                // useFlashPrism: false,    //指定为flash
-                // disableSeek: true //禁用进度条的Seek，默认值为false
+                isLive: true,   //切换为直播流的时候必填
+                // format: 'm3u8'  //切换为直播流的时候必填
            },
            source: '//player.alicdn.com/video/aliyunmedia.mp4',
            // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
            show: true,
-            forbidFastForward: false,
-            isShowMultiple: false,
+            isShowMultiple: false
        }
    },

@ -123,11 +67,6 @@ export default {
        replay(){
            this.$refs.VueAliplayerV2.replay();
        },
-        handlerForbidFastForward () {
-
-            this.forbidFastForward = true
-
-        },

        getCurrentTime(){
            // this.$refs.VueAliplayerV2.getCurrentTime();
@ -185,7 +124,7 @@ export default {
 }
 .source-box{
    padding: 5px 10px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
    .source-label{
        margin-right: 20px;
        font-size: 16px;
--- a/examples/main.js
+++ b/examples/main.js
@ -1,10 +1,7 @@
 import Vue from 'vue';
 import App from './App.vue';
 import VueAliplayerV2 from '../packages';
-Vue.use(VueAliplayerV2,{
-    // 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'
-});
+Vue.use(VueAliplayerV2);
 Vue.config.productionTip = false;
 new Vue({
    render: h => h(App),
--- a/gh-page.sh
+++ b/gh-page.sh
@ -1,23 +0,0 @@
-echo "打包 => dist";
-
-npm run build;
-
-echo "更新gh-pages";
-
-git branch -D gh-pages;
-
-echo "删除gh-pages";
-
-git checkout -b gh-pages;
-
-echo "创建并切换到gh-pages";
-
-git add -f dist;
-
-git commit -m 'create gh-pages';
-
-git push origin -d gh-pages;
-
-git subtree push --prefix dist origin gh-pages;
-
-echo "已推送gh-pages";
--- a/lib/vue-aliplayer-v2.common.js
+++ b/lib/vue-aliplayer-v2.common.js
--- a/lib/vue-aliplayer-v2.umd.js
+++ b/lib/vue-aliplayer-v2.umd.js
--- a/lib/vue-aliplayer-v2.umd.min.js
+++ b/lib/vue-aliplayer-v2.umd.min.js
--- a/package.json
+++ b/package.json
@ -1,8 +1,8 @@
 {
    "name": "vue-aliplayer-v2",
-    "version": "1.3.1",
+    "version": "1.2.2",
    "author": "yxs",
-    "description": "感谢每一位支持开源的朋友. 这是一个基于Alipayer 开发并封装成vue组件的集成播放器.可播放rtmp,m3u8,mp4....视频.除支持直播流与点播的基础功能外,也支持视频的加密播放、清晰度切换、直播时移等业务场景",
+    "description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的集成播放器.",
    "main":"lib/vue-aliplayer-v2.umd.min.js",
    "private": false,
    "license": "MIT",
--- a/packages/AliplayerV2/index.js
+++ b/packages/AliplayerV2/index.js
@ -0,0 +1,7 @@
+// 导入组件，组件必须声明 name
+import VueAliplayerV2 from './src/main.vue';
+// 为组件添加 install 方法，用于按需引入
+VueAliplayerV2.install = function (Vue) {
+    Vue.component(VueAliplayerV2.name, VueAliplayerV2);
+}
+export default VueAliplayerV2;
--- a/packages/AliplayerV2/src/main.vue
+++ b/packages/AliplayerV2/src/main.vue
@ -5,11 +5,6 @@
 export default {
    name: 'VueAliplayerV2',
    props: {
-        forbidFastForward: {    //禁止拖拽快进
-            required: false,
-            type: [Boolean],
-            default: false
-        },
        options: {  //配置项
            required: false,
            type: [Object],
@ -20,15 +15,20 @@ export default {
            type: [String],
            default: null
        },
+        // id:{
+        //     required: false,
+        //     type: [String],
+        //     default: null
+        // },
        cssLink:{   //css版本源
            required: false,
            type: [String],
-            default: `https://g.alicdn.com/de/prismplayer/2.9.20/skins/default/aliplayer-min.css`
+            default: `https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css`
        },
        scriptSrc:{ //js版本源
            required: false,
            type: [String],
-            default: `https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-min.js`
+            default: `https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js`
        }
    },
    data () {
@ -129,10 +129,6 @@ export default {
        source(){ //监听播放源变化
            this.init();
        },
-        forbidFastForward () {
-            this.init();
-
-        },

        options:{   //配置项是对象,只能深度监听
            handler(){
@ -153,16 +149,14 @@ export default {
        });
    },
    methods: {
-        handlerFastForward () {

-        },
        /**
         * 创建script和css
         * 加载Alipayer的SDK
         */
        init(){
-            const linkID = 'app__aliplayer-min-css';
-            const scriptID = 'app__aliplayer-min-js';
+            const linkID = 'aliplayer-min-css';
+            const scriptID = 'aliplayer-min-js';
            const head = document.getElementsByTagName('head');
            const html = document.getElementsByTagName('html');
            let scriptTag = document.getElementById(scriptID);
@ -174,7 +168,6 @@ export default {
                link.rel = 'stylesheet';
                link.href = this.cssLink;
                link.id = linkID;
-                // link.className = linkID;
                head[0].appendChild(link);
            }
            if(!scriptTag) {
@ -182,16 +175,17 @@ export default {
                scriptTag = document.createElement('script');
                scriptTag.type = "text/javascript";
                scriptTag.id = scriptID;
-                // scriptTag.className = scriptID;
                scriptTag.src = this.scriptSrc;
                html[0].appendChild(scriptTag);
-            } else {
-                this.initPlayer();  //这样是为了兼容页面上有多个播放器
-            }
-            //兼容单页加载和硬加载
                scriptTag.addEventListener("load", () => {
                    this.initPlayer();
                });
+            } else {
+                this.initPlayer();  //这样是为了兼容页面上有多个播放器
+                scriptTag.addEventListener("load", () => {
+                    this.initPlayer();
+                });
+            }
        },

        /**
@ -200,7 +194,7 @@ export default {
         */
        initPlayer(){
            if(typeof window.Aliplayer != 'undefined') {
-                const options = this.deepCloneObject(this.options);
+                const options = this.options;
                if(options){
                    for (const key in options) {
                       this.config[key] = options[key];
@ -216,24 +210,6 @@ export default {
                        this.$emit(this.events[ev],e);
                    });
                }
-
-
-                //开启禁止拖拽快进
-                if (this.forbidFastForward) {
-                    let last = 0, max_time = 0;
-                    this.player.on('timeupdate', function () {
-                        let current = this.getCurrentTime();
-                        if (current - last > 2) {
-                            this.seek(last);
-                        } else {
-                            last = current;
-                            if (last >= max_time) {
-                                max_time = last;
-                            }
-                        }
-                    });
-                }
-
                //通过播放器实例的off方法取消订阅
                //player.off('ready',handleReady);
            }
@ -512,44 +488,15 @@ export default {
         */
        off(ev,handle){
            this.player && this.player.off(ev,handle);
-        },
-
-
-        /**
-         * 深度拷贝
-         * @param {*} obj
-         */
-        deepCloneObject (obj) {
-            let objClone = Array.isArray(obj) ? [] : {};
-            if (obj && typeof obj === 'object') {
-                for (let key in obj) {
-                    if (obj.hasOwnProperty(key)) {
-                        //判断ojb子元素是否为对象，如果是，递归复制
-                        if (obj[key] && typeof obj[key] === 'object') {
-                            objClone[key] = this.deepCloneObject(obj[key]);
-                        } else {
-                            //如果不是，简单复制
-                            objClone[key] = obj[key];
        }
-                    }
-                }
-            }
-            return objClone;
-        }
-
    },
    beforeDestroy(){  //防止重复创建
        this.dispose(); //销毁播放器(防止直播播放的情况下,播放器已经销毁,而后台还在继续下载资源造成卡顿的bug)
-        // const head = document.querySelector('head');
-        // const cssNodes = document.querySelectorAll(`link.app__aliplayer-min-css`);
-        // (html && cssNodes.length > 1) && cssNodes.forEach((item, index)=>{
-        //     if(index != 0) head.removeChild(item);
-        // });
-        // const html = document.querySelector('html');
-        // const jsNodes = document.querySelectorAll(`script.app__aliplayer-min-js`);
-        // (html && jsNodes.length > 1) && jsNodes.forEach((item, index)=>{
-        //     if(index != 0) html.removeChild(item);
-        // });
+        const head = document.querySelector('head');    //移除所有的重复创建的标签
+        const nodes = document.querySelectorAll('script[src="https://g.alicdn.com/de/prismplayer/2.8.2/hls/aliplayer-hls-min.js"]');
+        head && nodes.forEach((item)=>{
+            head.removeChild(item);
+        });
    }
 };
 </script>
--- a/packages/index.js
+++ b/packages/index.js
@ -1,11 +1,27 @@
 // packages / index.js
 // 导入单个组件
 import VueAliplayerV2 from './AliplayerV2';
+
+// 以数组的结构保存组件，便于遍历
+const components = [
+    VueAliplayerV2
+];
+
 // 定义 install 方法
-VueAliplayerV2.install = (Vue, options) =>{
-    if(options && options.cssLink) VueAliplayerV2.props.cssLink.default = options.cssLink;
-    if(options && options.scriptSrc) VueAliplayerV2.props.scriptSrc.default = options.scriptSrc;
-    Vue.component(VueAliplayerV2.name, VueAliplayerV2);
+const install = (Vue) =>{
+    if (install.installed) return false;
+    install.installed = true;
+    // 遍历并注册全局组件
+    components.map(component => {
+        return Vue.component(component.name, component)
+    });
+};
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+}
+export default {
+    // 导出的对象必须具备一个 install 方法
+    install,
+    Player: VueAliplayerV2
+    // 组件列表
 };
-VueAliplayerV2.Player = VueAliplayerV2;
-export default VueAliplayerV2;
--- a/pages.sh
+++ b/pages.sh
@ -1,25 +0,0 @@
-echo "打包 => dist";
-
-# 打包 => dist
-npm run build;
-
-# 更新gh-pages
-echo "更新gh-pages";
-
-git branch -D gh-pages;
-
-echo "删除gh-pages";
-
-git checkout -b gh-pages;
-
-echo "创建并切换到gh-pages";
-
-git add -f dist;
-
-git commit -m 'create gh-pages';
-
-git push origin -d gh-pages;
-
-git subtree push --prefix dist origin gh-pages;
-
-echo "已推送gh-pages";
--- a/t.sh
+++ b/t.sh
@ -1,7 +1,3 @@
-echo "设置 npm config set registry http://registry.npmjs.org"
-
-npm config set registry http://registry.npmjs.org
-
 echo "打包 => dist";

 # 打包 => dist
@ -17,10 +13,6 @@ echo "推送到npmjs";
 #推送到npmjs
 npm publish;

-echo "设置 npm config set registry https://registry.npm.taobao.org"
-
-npm config set registry https://registry.npm.taobao.org
-
 # 更新gh-pages
 echo "更新gh-pages";

@ -41,3 +33,18 @@ git push origin -d gh-pages;
 git subtree push --prefix dist origin gh-pages;

 echo "已推送gh-pages";
+
+# 推送完成后切换回master
+git checkout master; 
+
+echo "切换回master";
+
+git add .;
+
+git commit -m "更新lib包";
+
+git pull;
+
+git push;
+
+echo "完成";