JLNTV_IPD/vue-aliplayer-v2
4
0
Fork 0
mirror of https://github.com/langyuxiansheng/vue-aliplayer-v2.git synced 2025-09-02 12:59:49 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #39 from langyuxiansheng/dev_v1.2.8

Browse Source 
Dev v1.2.8
This commit is contained in:
langyuxiansheng 2021-01-13 17:21:57 +08:00 committed by GitHub
commit 964f6b847d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 175 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,5 +1,5 @@
# 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)
@ -422,7 +422,9 @@ npm run lint
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
## 更新日志
## 更新日志
> v1.2.8 更换底层默认sdk版本为2.9.3 修复options 遇到 update loop 错误 感谢"litmonw"网友的反馈与建议.
> v1.2.7 更换底层默认sdk版本为2.9.1的版本. 更新线上演示demo的选项，感谢网友“Ghost23333”的demo

42
examples/App.vue
View File

@ -1,7 +1,7 @@
<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">
@ -59,8 +59,44 @@ export default {
options: {
// source:'//player.alicdn.com/video/aliyunmedia.mp4',
isLive: !true, //切换为直播流的时候必填
useFlashPrism: false, //指定为flash
disableSeek: true //禁用进度条的Seek，默认值为false
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',

55
lib/vue-aliplayer-v2.common.js
View File

@ -142,18 +142,35 @@ 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=54014060&
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=54014060&
// 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&
//
//
//
@ -178,13 +195,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.3/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.3/aliplayer-min.js"
}
},
data: function data() {
@ -196,7 +213,9 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
id: null,
//播放器的ID
width: '100%',
autoplay: true // isLive: true,
autoplay: true,
skinLayout: false,
progressMarkers: false // isLive: true,
//支持播放地址播放,此播放优先级最高
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
@ -362,7 +381,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) {
@ -666,6 +685,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() {

55
lib/vue-aliplayer-v2.umd.js
View File

@ -151,18 +151,35 @@ 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=54014060&
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=54014060&
// 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&
//
//
//
@ -187,13 +204,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.3/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.3/aliplayer-min.js"
}
},
data: function data() {
@ -205,7 +222,9 @@ var es6_regexp_to_string = __webpack_require__("cc1d");
id: null,
//播放器的ID
width: '100%',
autoplay: true // isLive: true,
autoplay: true,
skinLayout: false,
progressMarkers: false // isLive: true,
//支持播放地址播放,此播放优先级最高
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
@ -371,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) {
@ -675,6 +694,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() {

2
lib/vue-aliplayer-v2.umd.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

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

38
packages/AliplayerV2/index.vue
View File

@ -18,12 +18,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.3/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.3/aliplayer-min.js`
}
},
data () {
@ -34,6 +34,8 @@ export default {
id: null, //播放器的ID
width: '100%',
autoplay: true,
skinLayout: false,
progressMarkers: false
// isLive: true,
//支持播放地址播放,此播放优先级最高
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
@ -127,9 +129,9 @@ export default {
options:{ //配置项是对象,只能深度监听
handler(){
this.init();
this.init();
},
deep:true
deep: true
}
},
mounted () {
@ -189,10 +191,10 @@ 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];
this.config[key] = options[key];
}
}
if(this.source) this.config.source = this.source; //播放源
@ -483,7 +485,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)