Compare commits

...

25 Commits

Author SHA1 Message Date
langyuxiansheng
cdf70ab208
Merge pull request #64 from langyuxiansheng/dev_v1.3.1
Dev v1.3.1
2022-05-12 16:47:43 +08:00
zhouliujun
d9bd73f6d4 更新umd 2022-05-12 14:23:21 +08:00
zhouliujun
31441d7773 更新版本号 2022-05-12 14:20:44 +08:00
langyuxiansheng
d7495c1469
Merge pull request #63 from william-xue/feature/add-function-forbidfastforward
Feature/add function forbidfastforward  增加禁止拖拽快进播放属性
2022-05-12 14:05:27 +08:00
xueyuan
444820e168 加师范例子 2022-05-11 21:47:19 +08:00
xueyuan
5169e0cc32 增加禁止快进功能 2022-05-11 21:36:10 +08:00
zhouliujun
a571705e6a Merge branch 'dev_v1.3.0' of https://github.com/langyuxiansheng/vue-aliplayer-v2 2021-07-11 11:09:33 +08:00
zhouliujun
01c82d7f6d 更新sdk版本 2021-07-11 10:41:59 +08:00
zhouliujun
5a0a49aacc 更新默认SDK版本 2021-07-11 09:52:13 +08:00
zhouliujun
3758626080 Merge branch 'master' of https://github.com/langyuxiansheng/vue-aliplayer-v2 2021-06-21 17:12:47 +08:00
zhouliujun
3593da7f8e 更新pages 2021-06-21 17:11:13 +08:00
langyuxiansheng
1b16c2d3e6
Merge pull request #54 from langyuxiansheng/dev_v1.2.9
更新包
2021-06-21 17:05:47 +08:00
zhouliujun
39bd7ad3b7 更新包 2021-05-11 14:24:43 +08:00
langyuxiansheng
0d7cab7d36
Merge pull request #48 from langyuxiansheng/dev_v1.2.9
修正部分默认属性
2021-05-11 14:18:11 +08:00
zhouliujun
486cfe87bb 修正部分默认属性 2021-05-11 14:13:16 +08:00
langyuxiansheng
2d07b16f2e
Merge pull request #40 from langyuxiansheng/dev_v1.2.8
增加gh-pages的脚本
2021-01-14 16:18:58 +08:00
zhouliujun
f3b97d319c 增加gh-pages的脚本 2021-01-14 16:02:15 +08:00
langyuxiansheng
964f6b847d
Merge pull request #39 from langyuxiansheng/dev_v1.2.8
Dev v1.2.8
2021-01-13 17:21:57 +08:00
zhouliujun
361f56b518 更新lib 2021-01-13 17:20:41 +08:00
zhouliujun
023de1ad31 更新版本和修复bug 2021-01-13 17:18:57 +08:00
zhouliujun
d3156070eb 增加开发版本分支 2021-01-13 16:35:19 +08:00
langyuxiansheng
6be2ffb5d4
Update README.md 2021-01-03 11:17:38 +08:00
langyuxiansheng
bee90e339b
Update README.md 2021-01-03 11:17:07 +08:00
langyuxiansheng
4af7f7fee7
Merge pull request #36 from Ghost23333/master
现在可以动态修改直播视频了,demo在readme.md
2021-01-03 11:14:49 +08:00
ghost
43d7ad5c34 现在可以动态修改直播视频了 2021-01-03 10:19:16 +08:00
9 changed files with 711 additions and 361 deletions

129
README.md
View File

@ -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,7 +21,7 @@ yarn add vue-aliplayer-v2
#### 全局注册 main.js
```javascript
import VueAliplayerV2 from 'vue-aliplayer-v2';
import VueAliplayerV2 from "vue-aliplayer-v2";
Vue.use(VueAliplayerV2);
@ -30,28 +35,41 @@ Vue.use(VueAliplayerV2);
#### 局部注册 App.vue
```javascript
//推荐第一种(仅v1.2.3)及以上的版本可用
import VueAliplayerV2 from 'vue-aliplayer-v2';
components:{ VueAliplayerV2 }
import VueAliplayerV2 from "vue-aliplayer-v2";
components: {
VueAliplayerV2;
}
//或者
components:{ VueAliplayerV2: VueAliplayerV2.Player }
components: {
VueAliplayerV2: VueAliplayerV2.Player;
}
```
## 2.组件中使用
### 组件模板使用,下面的视频连接仅供演示测试.
```html
<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"
/>
</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" />
<vue-aliplayer-v2
class="multiple-player"
:key="x"
:source="source"
ref="VueAliplayerV2"
:options="options"
/>
</template>
</div>
<p class="remove-text" v-if="!show">播放器已销毁!</p>
@ -64,21 +82,32 @@ components:{ VueAliplayerV2: VueAliplayerV2.Player }
<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="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>
@ -91,17 +120,16 @@ export default {
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
}
isShowMultiple: false,
};
},
methods: {
play() {
this.$refs.VueAliplayerV2.play()
this.$refs.VueAliplayerV2.play();
},
pause() {
@ -114,7 +142,7 @@ export default {
getCurrentTime() {
// this.$refs.VueAliplayerV2.getCurrentTime();
this.source = 'http://ivi.bupt.edu.cn/hls/cctv1.m3u8';
this.source = "http://ivi.bupt.edu.cn/hls/cctv1.m3u8";
},
getStatus() {
@ -125,9 +153,9 @@ export default {
showMultiple() {
this.isShowMultiple = !this.isShowMultiple;
}
}
}
},
},
};
</script>
<style lang="less">
* {
@ -185,12 +213,19 @@ export default {
}
}
</style>
```
## 3.功能与配置
```javascript
props:{
forbidFastForward: { //禁止拖拽快进
required: false,
type: [Boolean],
default: false
},
options: { //配置项 (options.source 不支持动态切换,需要动态切换请直接使用source)
required: false,
type: [Object],
@ -206,20 +241,22 @@ props:{
cssLink:{ //css版本源
required: false,
type: [String],
default: `https://g.alicdn.com/de/prismplayer/2.9.0/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.9.0/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。 |
@ -280,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 | - | 重播视频。 |
@ -333,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 | 视频暂停时触发。 |
@ -362,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.二次开发 下载项目
@ -375,6 +417,7 @@ git clone https://github.com/langyuxiansheng/vue-aliplayer-v2.git
```
## Project setup
```bash
cd vue-aliplayer-v2
@ -382,36 +425,53 @@ 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() 部分的代码.
@ -437,6 +497,7 @@ See [Configuration Reference](https://cli.vuejs.org/config/).
> v1.1.6 修复部分已知 bug 和优化局部的引用方式
---
## 其它问题
1. IOS 或者其它设备无法全屏播放,或者点击全屏按钮的时候也只是显示竖屏?

View File

@ -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>
@ -59,12 +63,49 @@ export default {
options: {
// source:'//player.alicdn.com/video/aliyunmedia.mp4',
isLive: !true, //
useFlashPrism: false, //flash
disableSeek: true //Seekfalse
// 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 //Seekfalse
},
source: '//player.alicdn.com/video/aliyunmedia.mp4',
// source: '//ivi.bupt.edu.cn/hls/cctv1.m3u8',
show: true,
forbidFastForward: false,
isShowMultiple: false,
}
},
@ -82,6 +123,11 @@ export default {
replay () {
this.$refs.VueAliplayerV2.replay();
},
handlerForbidFastForward () {
this.forbidFastForward = true
},
getCurrentTime () {
// this.$refs.VueAliplayerV2.getCurrentTime();

23
gh-page.sh Normal file
View File

@ -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";

View File

@ -142,24 +142,47 @@ if (typeof window !== 'undefined') {
// EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.function.name.js
var es6_function_name = __webpack_require__("7cfd");
// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=c8a41478&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.playerId}})}
var staticRenderFns = []
// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=c8a41478&
// CONCATENATED MODULE: ./node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/esm/typeof.js
function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
function _typeof(obj) {
if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
_typeof = function _typeof(obj) {
return _typeof2(obj);
};
} else {
_typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
};
}
return _typeof(obj);
}
// EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.regexp.to-string.js
var es6_regexp_to_string = __webpack_require__("cc1d");
// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.0.6@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=script&lang=js&
//
//
//
/* harmony default export */ var AliplayerV2vue_type_script_lang_js_ = ({
name: 'VueAliplayerV2',
props: {
forbidFastForward: {
//禁止拖拽快进
required: false,
type: [Boolean],
default: false
},
options: {
//配置项
required: false,
@ -178,13 +201,13 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
//css版本源
required: false,
type: [String],
default: "https://g.alicdn.com/de/prismplayer/2.9.1/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.9.1/aliplayer-min.js"
default: "https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-min.js"
}
},
data: function data() {
@ -287,6 +310,9 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
//监听播放源变化
this.init();
},
forbidFastForward: function forbidFastForward() {
this.init();
},
options: {
//配置项是对象,只能深度监听
handler: function handler() {
@ -311,6 +337,8 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
});
},
methods: {
handlerFastForward: function handlerFastForward() {},
/**
* 创建script和css
* 加载Alipayer的SDK
@ -362,7 +390,7 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
var _this4 = this;
if (typeof window.Aliplayer != 'undefined') {
var options = this.options;
var options = this.deepCloneObject(this.options);
if (options) {
for (var key in options) {
@ -387,6 +415,25 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
for (var ev in this.events) {
_loop(ev);
} //开启禁止拖拽快进
if (this.forbidFastForward) {
var last = 0,
max_time = 0;
this.player.on('timeupdate', function () {
var 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);
@ -666,6 +713,30 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
*/
off: function off(ev, handle) {
this.player && this.player.off(ev, handle);
},
/**
* 深度拷贝
* @param {*} obj
*/
deepCloneObject: function deepCloneObject(obj) {
var objClone = Array.isArray(obj) ? [] : {};
if (obj && _typeof(obj) === 'object') {
for (var 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: function beforeDestroy() {

View File

@ -151,24 +151,47 @@ if (typeof window !== 'undefined') {
// EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.function.name.js
var es6_function_name = __webpack_require__("7cfd");
// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"05d0d90a-vue-loader-template"}!./node_modules/_vue-loader@15.7.2@vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=template&id=c8a41478&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.playerId}})}
var staticRenderFns = []
// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=3905f692&
// CONCATENATED MODULE: ./packages/AliplayerV2/index.vue?vue&type=template&id=c8a41478&
// CONCATENATED MODULE: ./node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/esm/typeof.js
function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
function _typeof(obj) {
if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
_typeof = function _typeof(obj) {
return _typeof2(obj);
};
} else {
_typeof = function _typeof(obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
};
}
return _typeof(obj);
}
// EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.regexp.to-string.js
var es6_regexp_to_string = __webpack_require__("cc1d");
// CONCATENATED MODULE: ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_thread-loader@2.1.3@thread-loader/dist/cjs.js!./node_modules/_babel-loader@8.0.6@babel-loader/lib!./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.7.2@vue-loader/lib??vue-loader-options!./packages/AliplayerV2/index.vue?vue&type=script&lang=js&
//
//
//
/* harmony default export */ var AliplayerV2vue_type_script_lang_js_ = ({
name: 'VueAliplayerV2',
props: {
forbidFastForward: {
//禁止拖拽快进
required: false,
type: [Boolean],
default: false
},
options: {
//配置项
required: false,
@ -187,13 +210,13 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
//css版本源
required: false,
type: [String],
default: "https://g.alicdn.com/de/prismplayer/2.9.1/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.9.1/aliplayer-min.js"
default: "https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-min.js"
}
},
data: function data() {
@ -296,6 +319,9 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
//监听播放源变化
this.init();
},
forbidFastForward: function forbidFastForward() {
this.init();
},
options: {
//配置项是对象,只能深度监听
handler: function handler() {
@ -320,6 +346,8 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
});
},
methods: {
handlerFastForward: function handlerFastForward() {},
/**
* 创建script和css
* 加载Alipayer的SDK
@ -371,7 +399,7 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
var _this4 = this;
if (typeof window.Aliplayer != 'undefined') {
var options = this.options;
var options = this.deepCloneObject(this.options);
if (options) {
for (var key in options) {
@ -396,6 +424,25 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
for (var ev in this.events) {
_loop(ev);
} //开启禁止拖拽快进
if (this.forbidFastForward) {
var last = 0,
max_time = 0;
this.player.on('timeupdate', function () {
var 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);
@ -675,6 +722,30 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
*/
off: function off(ev, handle) {
this.player && this.player.off(ev, handle);
},
/**
* 深度拷贝
* @param {*} obj
*/
deepCloneObject: function deepCloneObject(obj) {
var objClone = Array.isArray(obj) ? [] : {};
if (obj && _typeof(obj) === 'object') {
for (var 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: function beforeDestroy() {

File diff suppressed because one or more lines are too long

View File

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

View File

@ -5,6 +5,11 @@
export default {
name: 'VueAliplayerV2',
props: {
forbidFastForward: { //
required: false,
type: [Boolean],
default: false
},
options: { //
required: false,
type: [Object],
@ -18,12 +23,12 @@ export default {
cssLink: { //css
required: false,
type: [String],
default: `https://g.alicdn.com/de/prismplayer/2.9.1/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.9.1/aliplayer-min.js`
default: `https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-min.js`
}
},
data () {
@ -124,6 +129,10 @@ export default {
source () { //
this.init();
},
forbidFastForward () {
this.init();
},
options: { //,
handler () {
@ -144,7 +153,9 @@ export default {
});
},
methods: {
handlerFastForward () {
},
/**
* 创建script和css
* 加载Alipayer的SDK
@ -189,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];
@ -205,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);
}
@ -483,7 +512,31 @@ 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)

25
pages.sh Normal file
View File

@ -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";