Merge pull request #64 from langyuxiansheng/dev_v1.3.1

Dev v1.3.1

README.md

@@ -1,12 +1,17 @@
 # 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
@@ -16,70 +21,115 @@ 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
-import VueAliplayerV2 from 'vue-aliplayer-v2';
-components:{ VueAliplayerV2: VueAliplayerV2.Player }
+//推荐第一种(仅v1.2.3)及以上的版本可用
+import VueAliplayerV2 from "vue-aliplayer-v2";
+components: {
+  VueAliplayerV2;
+}
+
+//或者
+components: {
+  VueAliplayerV2: VueAliplayerV2.Player;
+}
 ```
 
 ## 2.组件中使用
 
-### 组件模板使用,但需要注意的是,假如你的页面中有多个播放器,那么这个id需要唯一!!,ID必传,只有一个的时候,可以忽略,命名只能是有效字符开头. 下面的视频连接仅供演示测试.
+### 组件模板使用,下面的视频连接仅供演示测试.
+
 ```html
 <template>
   <div id="app">
-        <template v-if="show">
-            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
+    <template v-if="!isShowMultiple && show">
+      <vue-aliplayer-v2
+        :source="source"
+        ref="VueAliplayerV2"
+        :options="options"
+      />
     </template>
-        <p class="remove-text" v-else>播放器已销毁!</p>
+    <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>
     <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="show = !show">{{ show ? '销毁' : '重载' }}</span>
-            <span @click="options.isLive = !options.isLive">{{ options.isLive ? '切换普通模式' : '切换直播模式' }}</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
+      >
     </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'
+          // source:'//player.alicdn.com/video/aliyunmedia.mp4',
+          isLive: true, //切换为直播流的时候必填
+          // format: 'm3u8'  //切换为直播流的时候必填
         },
-            source: '//player.alicdn.com/video/aliyunmedia.mp4',
-            show: true
-        }
+        source: "//player.alicdn.com/video/aliyunmedia.mp4",
+        // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
+        show: true,
+        isShowMultiple: false,
+      };
     },
 
     methods: {
-
       play() {
-            this.$refs.VueAliplayerV2.play()
+        this.$refs.VueAliplayerV2.play();
       },
 
       pause() {
@@ -91,10 +141,21 @@ export default {
       },
 
       getCurrentTime() {
-            this.$refs.VueAliplayerV2.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;
+      },
+    },
+  };
 </script>
 <style lang="less">
   * {
@@ -106,6 +167,13 @@ export default {
     padding: 20px;
     font-size: 24px;
   }
+  .show-multiple {
+    display: flex;
+    .multiple-player {
+      width: calc(100% / 4);
+      margin: 20px;
+    }
+  }
   .player-btns {
     width: 100%;
     display: flex;
@@ -145,12 +213,19 @@ export default {
     }
   }
 </style>
-
 ```
+
 ## 3.功能与配置
 
 ```javascript
 props:{
+
+    forbidFastForward: {    //禁止拖拽快进
+            required: false,
+            type: [Boolean],
+            default: false
+    },
+    
     options: {  //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
         required: false,
         type: [Object],
@@ -163,29 +238,25 @@ 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.8.2/skins/default/aliplayer-min.css`
+        default: `https://g.alicdn.com/de/prismplayer/2.9.7/skins/default/aliplayer-min.css`
     },
     scriptSrc:{ //js版本源
         required: false,
         type: [String],
-        default: `https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js`
+        default: `https://g.alicdn.com/de/prismplayer/2.9.7/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。                                                                                                                                              |
@@ -246,14 +317,16 @@ 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                 | -                                                                                     | 重播视频。                                                                                                                                                            |
@@ -299,15 +372,16 @@ export default {
        */
       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             | 视频暂停时触发。                                                                                                                         |
@@ -328,10 +402,12 @@ export default {
 | 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.二次开发 下载项目
@@ -341,6 +417,7 @@ git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git
 ```
 
 ## Project setup
+
 ```bash
 cd vue-aliplayer-v2
 
@@ -348,36 +425,63 @@ 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"两位网友的反馈和建议.
@@ -392,3 +496,17 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
 
 > v1.1.6 修复部分已知 bug 和优化局部的引用方式
 
+---
+
+## 其它问题
+
+1. IOS 或者其它设备无法全屏播放,或者点击全屏按钮的时候也只是显示竖屏？
+
+> 方案与问题所在:
+
+一般情况下可能是开启了强制竖屏(也就是屏幕锁定)打开后就会竖屏而不会全屏了！如下关闭就可以了：
+参考 issues: https://github.com/langyuxiansheng/vue-aliplayer-v2/issues/25
+
+-开启了屏幕锁定，只要上拉控制中心，点击屏幕锁定关闭就可以了！
+
+-也可能是播放器或者浏览器兼容性问题.

examples/App.vue

@@ -1,7 +1,9 @@
 <template>
     <div id="app">
         <template v-if="!isShowMultiple && show">
-            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options" />
+            <vue-aliplayer-v2 :source="source" ref="VueAliplayerV2" :options="options"
+            :forbidFastForward="forbidFastForward"
+            />
         </template>
         <div v-if="isShowMultiple && show" class="show-multiple">
             <template v-for="x in 5">
@@ -11,11 +13,13 @@
         <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>
@@ -34,23 +38,75 @@
             <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: VueAliplayerV2.Player },
+    // components:{ VueAliplayerV2 },
     data () {
         return {
             options: {
                 // source:'//player.alicdn.com/video/aliyunmedia.mp4',
-                isLive: true,   //切换为直播流的时候必填
-                // format: 'm3u8'  //切换为直播流的时候必填
+                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
             },
             source: '//player.alicdn.com/video/aliyunmedia.mp4',
             // source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
             show: true,
-            isShowMultiple: false
+            forbidFastForward: false,
+            isShowMultiple: false,
         }
     },
 
@@ -67,6 +123,11 @@ export default {
         replay () {
             this.$refs.VueAliplayerV2.replay();
         },
+        handlerForbidFastForward () {
+
+            this.forbidFastForward = true
+
+        },
 
         getCurrentTime () {
             // this.$refs.VueAliplayerV2.getCurrentTime();
@@ -124,7 +185,7 @@ export default {
 }
 .source-box {
     padding: 5px 10px;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
     .source-label {
         margin-right: 20px;
         font-size: 16px;

examples/main.js

@@ -1,7 +1,10 @@
 import Vue from 'vue';
 import App from './App.vue';
 import VueAliplayerV2 from '../packages';
-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'
+});
 Vue.config.productionTip = false;
 new Vue({
     render: h => h(App),

gh-page.sh

@@ -0,0 +1,23 @@
+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";

package.json

@@ -1,8 +1,8 @@
 {
     "name": "vue-aliplayer-v2",
-    "version": "1.2.2",
+    "version": "1.3.1",
     "author": "yxs",
-    "description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的集成播放器.",
+    "description": "感谢每一位支持开源的朋友. 这是一个基于Alipayer 开发并封装成vue组件的集成播放器.可播放rtmp,m3u8,mp4....视频.除支持直播流与点播的基础功能外,也支持视频的加密播放、清晰度切换、直播时移等业务场景",
     "main": "lib/vue-aliplayer-v2.umd.min.js",
     "private": false,
     "license": "MIT",

packages/AliplayerV2/index.js

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

packages/AliplayerV2/index.vue

@@ -5,6 +5,11 @@
 export default {
     name: 'VueAliplayerV2',
     props: {
+        forbidFastForward: {    //禁止拖拽快进
+            required: false,
+            type: [Boolean],
+            default: false
+        },
         options: {  //配置项
             required: false,
             type: [Object],
@@ -15,20 +20,15 @@ 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.8.2/skins/default/aliplayer-min.css`
+            default: `https://g.alicdn.com/de/prismplayer/2.9.20/skins/default/aliplayer-min.css`
         },
         scriptSrc: { //js版本源
             required: false,
             type: [String],
-            default: `https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js`
+            default: `https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-min.js`
         }
     },
     data () {
@@ -129,6 +129,10 @@ export default {
         source () { //监听播放源变化
             this.init();
         },
+        forbidFastForward () {
+            this.init();
+
+        },
 
         options: {   //配置项是对象,只能深度监听
             handler () {
@@ -149,14 +153,16 @@ export default {
         });
     },
     methods: {
+        handlerFastForward () {
 
+        },
         /**
          * 创建script和css
          * 加载Alipayer的SDK
          */
         init () {
-            const linkID = 'aliplayer-min-css';
-            const scriptID = 'aliplayer-min-js';
+            const linkID = 'app__aliplayer-min-css';
+            const scriptID = 'app__aliplayer-min-js';
             const head = document.getElementsByTagName('head');
             const html = document.getElementsByTagName('html');
             let scriptTag = document.getElementById(scriptID);
@@ -168,6 +174,7 @@ export default {
                 link.rel = 'stylesheet';
                 link.href = this.cssLink;
                 link.id = linkID;
+                // link.className = linkID;
                 head[0].appendChild(link);
             }
             if (!scriptTag) {
@@ -175,17 +182,16 @@ export default {
                 scriptTag = document.createElement('script');
                 scriptTag.type = "text/javascript";
                 scriptTag.id = scriptID;
+                // scriptTag.className = scriptID;
                 scriptTag.src = this.scriptSrc;
                 html[0].appendChild(scriptTag);
-                scriptTag.addEventListener("load", () => {
-                    this.initPlayer();
-                });
             } else {
                 this.initPlayer();  //这样是为了兼容页面上有多个播放器
+            }
+            //兼容单页加载和硬加载
             scriptTag.addEventListener("load", () => {
                 this.initPlayer();
             });
-            }
         },
 
         /**
@@ -194,7 +200,7 @@ export default {
          */
         initPlayer () {
             if (typeof window.Aliplayer != 'undefined') {
-                const options = this.options;
+                const options = this.deepCloneObject(this.options);
                 if (options) {
                     for (const key in options) {
                         this.config[key] = options[key];
@@ -210,6 +216,24 @@ 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);
             }
@@ -488,15 +512,44 @@ 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 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);
-        });
+        // 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);
+        // });
     }
 };
 </script>

packages/index.js

@@ -1,27 +1,11 @@
 // packages / index.js
 // 导入单个组件
 import VueAliplayerV2 from './AliplayerV2';
-
-// 以数组的结构保存组件，便于遍历
-const components = [
-    VueAliplayerV2
-];
-
 // 定义 install 方法
-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.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);
 };
+VueAliplayerV2.Player = VueAliplayerV2;
+export default VueAliplayerV2;

pages.sh

@@ -0,0 +1,25 @@
+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";

t.sh

@@ -1,3 +1,7 @@
+echo "设置 npm config set registry http://registry.npmjs.org"
+
+npm config set registry http://registry.npmjs.org
+
 echo "打包 => dist";
 
 # 打包 => dist
@@ -13,6 +17,10 @@ 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";
 
@@ -33,18 +41,3 @@ 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 "完成";