JLNTV_IPD/vue-aliplayer-v2
4
0
Fork 0
mirror of https://github.com/langyuxiansheng/vue-aliplayer-v2.git synced 2025-04-05 19:41:39 +08:00
Code Issues Projects Releases Wiki Activity

修复重复创建script的bug

Browse Source
This commit is contained in:
zhouliujun 2019-11-13 18:03:33 +08:00
parent a7cd05a1d9
commit b2109016de
10 changed files with 72 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/index.878e05a5.css → dist/css/index.9f1dddb0.css vendored
View File

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

2
dist/index.html vendored
View File

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

2
dist/js/index.61751f56.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/index.81b64845.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
examples/App.vue
View File

@ -1,8 +1,8 @@
<template>
<div id="app">
<VueAliplayerV2
ref="VueAliplayerV2"
/>
<vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170050" :options="{source:'rtmp://182.145.195.238:1935/hls/1194076936807170050'}" />
<vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170051" :options="{source:'rtmp://182.145.195.238:1935/hls/1194076936807170051'}" />
<vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170052" :options="{source:'rtmp://182.145.195.238:1935/hls/1194076936807170052'}" />
<button @click="play()">播放</button>
<button @click="pause()">暂停</button>
<button @click="replay()">重播</button>

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

@ -169,12 +169,12 @@ function _defineProperty(obj, key, value) {
// 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/src/main.vue?vue&type=template&id=b393ee62&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.config.id}})}
// 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/src/main.vue?vue&type=template&id=2cbd4957&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.id}})}
var staticRenderFns = []
// CONCATENATED MODULE: ./packages/AliplayerV2/src/main.vue?vue&type=template&id=b393ee62&
// CONCATENATED MODULE: ./packages/AliplayerV2/src/main.vue?vue&type=template&id=2cbd4957&
// 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/src/main.vue?vue&type=script&lang=js&
//
@ -190,6 +190,11 @@ var staticRenderFns = []
default: function _default() {
return null;
}
},
id: {
required: false,
type: [String],
default: "player-".concat(Date.parse(new Date()))
}
},
data: function data() {
@ -197,13 +202,13 @@ var staticRenderFns = []
player: null,
//播放器实例
config: {
id: "player-".concat(Date.parse(new Date())),
id: null,
//播放器的ID
width: '100%',
autoplay: true,
isLive: true,
// isLive: true,
//支持播放地址播放,此播放优先级最高
source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
},
@ -289,7 +294,11 @@ var staticRenderFns = []
};
},
mounted: function mounted() {
this.init();
var _this = this;
this.$nextTick(function () {
_this.init();
});
},
methods: {
/**
@ -297,14 +306,14 @@ var staticRenderFns = []
* 加载Alipayer的SDK
*/
init: function init() {
var _this = this;
var _this2 = this;
var load = true;
var scriptTag = document.getElementById(scriptID);
var linkID = 'aliplayer-min-css';
var scriptID = 'aliplayer-min-js';
var head = document.getElementsByTagName('head');
var html = document.getElementsByTagName('html');
var scriptTag = document.getElementById(scriptID);
if (!document.getElementById(linkID)) {
var link = document.createElement('link');
@ -322,7 +331,7 @@ var staticRenderFns = []
}
scriptTag.addEventListener("load", function () {
_this.initPlayer();
_this2.initPlayer();
load = false;
});
@ -337,7 +346,7 @@ var staticRenderFns = []
* @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
*/
initPlayer: function initPlayer() {
var _this2 = this;
var _this3 = this;
if (typeof window.Aliplayer != 'undefined') {
var options = this.options;
@ -348,15 +357,16 @@ var staticRenderFns = []
}
}
this.config.id = this.id;
this.player = new Aliplayer(this.config, function (player) {
console.log('播放器创建好了。', player);
});
var _loop = function _loop(ev) {
_this2.player.on(_this2.events[ev], function (e) {
console.log("object ".concat(_this2.events[ev]), e);
_this3.player.on(_this3.events[ev], function (e) {
console.log("object ".concat(_this3.events[ev]), e);
_this2.$emit(_this2.events[ev], e);
_this3.$emit(_this3.events[ev], e);
});
};

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

@ -178,12 +178,12 @@ function _defineProperty(obj, key, value) {
// 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/src/main.vue?vue&type=template&id=b393ee62&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.config.id}})}
// 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/src/main.vue?vue&type=template&id=2cbd4957&
var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":_vm.id}})}
var staticRenderFns = []
// CONCATENATED MODULE: ./packages/AliplayerV2/src/main.vue?vue&type=template&id=b393ee62&
// CONCATENATED MODULE: ./packages/AliplayerV2/src/main.vue?vue&type=template&id=2cbd4957&
// 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/src/main.vue?vue&type=script&lang=js&
//
@ -199,6 +199,11 @@ var staticRenderFns = []
default: function _default() {
return null;
}
},
id: {
required: false,
type: [String],
default: "player-".concat(Date.parse(new Date()))
}
},
data: function data() {
@ -206,13 +211,13 @@ var staticRenderFns = []
player: null,
//播放器实例
config: {
id: "player-".concat(Date.parse(new Date())),
id: null,
//播放器的ID
width: '100%',
autoplay: true,
isLive: true,
// isLive: true,
//支持播放地址播放,此播放优先级最高
source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
},
@ -298,7 +303,11 @@ var staticRenderFns = []
};
},
mounted: function mounted() {
this.init();
var _this = this;
this.$nextTick(function () {
_this.init();
});
},
methods: {
/**
@ -306,14 +315,14 @@ var staticRenderFns = []
* 加载Alipayer的SDK
*/
init: function init() {
var _this = this;
var _this2 = this;
var load = true;
var scriptTag = document.getElementById(scriptID);
var linkID = 'aliplayer-min-css';
var scriptID = 'aliplayer-min-js';
var head = document.getElementsByTagName('head');
var html = document.getElementsByTagName('html');
var scriptTag = document.getElementById(scriptID);
if (!document.getElementById(linkID)) {
var link = document.createElement('link');
@ -331,7 +340,7 @@ var staticRenderFns = []
}
scriptTag.addEventListener("load", function () {
_this.initPlayer();
_this2.initPlayer();
load = false;
});
@ -346,7 +355,7 @@ var staticRenderFns = []
* @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
*/
initPlayer: function initPlayer() {
var _this2 = this;
var _this3 = this;
if (typeof window.Aliplayer != 'undefined') {
var options = this.options;
@ -357,15 +366,16 @@ var staticRenderFns = []
}
}
this.config.id = this.id;
this.player = new Aliplayer(this.config, function (player) {
console.log('播放器创建好了。', player);
});
var _loop = function _loop(ev) {
_this2.player.on(_this2.events[ev], function (e) {
console.log("object ".concat(_this2.events[ev]), e);
_this3.player.on(_this3.events[ev], function (e) {
console.log("object ".concat(_this3.events[ev]), e);
_this2.$emit(_this2.events[ev], e);
_this3.$emit(_this3.events[ev], e);
});
};

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

File diff suppressed because one or more lines are too long

4
package.json
View File

@ -1,8 +1,8 @@
{
"name": "vue-aliplayer-v2",
"version": "1.0.1",
"version": "1.0.3",
"author": "yxs",
"description": "青出于蓝而胜于蓝,感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.",
"description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.",
"main":"lib/vue-aliplayer-v2.umd.min.js",
"private": false,
"license": "MIT",

22
packages/AliplayerV2/src/main.vue
View File

@ -1,5 +1,5 @@
<template>
<div :id="config.id"></div>
<div :id="id"></div>
</template>
<script>
export default {
@ -10,18 +10,22 @@ export default {
type: [Object],
default: () => null
},
id:{
required: false,
type: [String],
default: `player-${Date.parse(new Date())}`
}
},
data () {
return {
player: null, //播放器实例
config:{
id: `player-${Date.parse(new Date())}`, //播放器的ID
id: null, //播放器的ID
width: '100%',
autoplay: true,
isLive: true,
// isLive: true,
//支持播放地址播放,此播放优先级最高
source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
// source: 'rtmp://182.145.195.238:1935/hls/1194076936807170050',
cssLink: 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css',
scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js',
},
@ -108,7 +112,9 @@ export default {
};
},
mounted () {
this.init();
this.$nextTick(()=>{
this.init();
});
},
methods: {
@ -118,18 +124,17 @@ export default {
*/
init(){
let load = true;
let scriptTag = document.getElementById(scriptID);
const linkID = 'aliplayer-min-css';
const scriptID = 'aliplayer-min-js';
const head = document.getElementsByTagName('head');
const html = document.getElementsByTagName('html');
let scriptTag = document.getElementById(scriptID);
if(!document.getElementById(linkID)) {
const link = document.createElement('link');
link.href = this.config.cssLink;
link.setAttribute('id',linkID);
head[0].appendChild(link);
}
if(!scriptTag) {
scriptTag = document.createElement('script');
scriptTag.id = scriptID;
@ -160,6 +165,7 @@ export default {
this.config[key] = options[key];
}
}
this.config.id = this.id;
this.player = new Aliplayer(this.config, function(player) {
console.log('播放器创建好了。',player);
});