JLNTV_IPD/vue-aliplayer-v2
4
0
Fork 0
mirror of https://github.com/langyuxiansheng/vue-aliplayer-v2.git synced 2025-04-06 03:57:55 +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> <template>
<div id="app"> <div id="app">
<VueAliplayerV2 <vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170050" :options="{source:'rtmp://182.145.195.238:1935/hls/1194076936807170050'}" />
ref="VueAliplayerV2" <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="play()">播放</button>
<button @click="pause()">暂停</button> <button @click="pause()">暂停</button>
<button @click="replay()">重播</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 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.function.name.js
var es6_function_name = __webpack_require__("7cfd"); 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& // 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.config.id}})} 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 = [] 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& // 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() { default: function _default() {
return null; return null;
} }
},
id: {
required: false,
type: [String],
default: "player-".concat(Date.parse(new Date()))
} }
}, },
data: function data() { data: function data() {
@ -197,13 +202,13 @@ var staticRenderFns = []
player: null, player: null,
//播放器实例 //播放器实例
config: { config: {
id: "player-".concat(Date.parse(new Date())), id: null,
//播放器的ID //播放器的ID
width: '100%', width: '100%',
autoplay: true, 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', 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' scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
}, },
@ -289,7 +294,11 @@ var staticRenderFns = []
}; };
}, },
mounted: function mounted() { mounted: function mounted() {
this.init(); var _this = this;
this.$nextTick(function () {
_this.init();
});
}, },
methods: { methods: {
/** /**
@ -297,14 +306,14 @@ var staticRenderFns = []
* 加载Alipayer的SDK * 加载Alipayer的SDK
*/ */
init: function init() { init: function init() {
var _this = this; var _this2 = this;
var load = true; var load = true;
var scriptTag = document.getElementById(scriptID);
var linkID = 'aliplayer-min-css'; var linkID = 'aliplayer-min-css';
var scriptID = 'aliplayer-min-js'; var scriptID = 'aliplayer-min-js';
var head = document.getElementsByTagName('head'); var head = document.getElementsByTagName('head');
var html = document.getElementsByTagName('html'); var html = document.getElementsByTagName('html');
var scriptTag = document.getElementById(scriptID);
if (!document.getElementById(linkID)) { if (!document.getElementById(linkID)) {
var link = document.createElement('link'); var link = document.createElement('link');
@ -322,7 +331,7 @@ var staticRenderFns = []
} }
scriptTag.addEventListener("load", function () { scriptTag.addEventListener("load", function () {
_this.initPlayer(); _this2.initPlayer();
load = false; load = false;
}); });
@ -337,7 +346,7 @@ var staticRenderFns = []
* @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z * @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
*/ */
initPlayer: function initPlayer() { initPlayer: function initPlayer() {
var _this2 = this; var _this3 = this;
if (typeof window.Aliplayer != 'undefined') { if (typeof window.Aliplayer != 'undefined') {
var options = this.options; var options = this.options;
@ -348,15 +357,16 @@ var staticRenderFns = []
} }
} }
this.config.id = this.id;
this.player = new Aliplayer(this.config, function (player) { this.player = new Aliplayer(this.config, function (player) {
console.log('播放器创建好了。', player); console.log('播放器创建好了。', player);
}); });
var _loop = function _loop(ev) { var _loop = function _loop(ev) {
_this2.player.on(_this2.events[ev], function (e) { _this3.player.on(_this3.events[ev], function (e) {
console.log("object ".concat(_this2.events[ev]), 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 // EXTERNAL MODULE: ./node_modules/_core-js@2.6.10@core-js/modules/es6.function.name.js
var es6_function_name = __webpack_require__("7cfd"); 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& // 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.config.id}})} 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 = [] 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& // 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() { default: function _default() {
return null; return null;
} }
},
id: {
required: false,
type: [String],
default: "player-".concat(Date.parse(new Date()))
} }
}, },
data: function data() { data: function data() {
@ -206,13 +211,13 @@ var staticRenderFns = []
player: null, player: null,
//播放器实例 //播放器实例
config: { config: {
id: "player-".concat(Date.parse(new Date())), id: null,
//播放器的ID //播放器的ID
width: '100%', width: '100%',
autoplay: true, 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', 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' scriptSrc: 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js'
}, },
@ -298,7 +303,11 @@ var staticRenderFns = []
}; };
}, },
mounted: function mounted() { mounted: function mounted() {
this.init(); var _this = this;
this.$nextTick(function () {
_this.init();
});
}, },
methods: { methods: {
/** /**
@ -306,14 +315,14 @@ var staticRenderFns = []
* 加载Alipayer的SDK * 加载Alipayer的SDK
*/ */
init: function init() { init: function init() {
var _this = this; var _this2 = this;
var load = true; var load = true;
var scriptTag = document.getElementById(scriptID);
var linkID = 'aliplayer-min-css'; var linkID = 'aliplayer-min-css';
var scriptID = 'aliplayer-min-js'; var scriptID = 'aliplayer-min-js';
var head = document.getElementsByTagName('head'); var head = document.getElementsByTagName('head');
var html = document.getElementsByTagName('html'); var html = document.getElementsByTagName('html');
var scriptTag = document.getElementById(scriptID);
if (!document.getElementById(linkID)) { if (!document.getElementById(linkID)) {
var link = document.createElement('link'); var link = document.createElement('link');
@ -331,7 +340,7 @@ var staticRenderFns = []
} }
scriptTag.addEventListener("load", function () { scriptTag.addEventListener("load", function () {
_this.initPlayer(); _this2.initPlayer();
load = false; load = false;
}); });
@ -346,7 +355,7 @@ var staticRenderFns = []
* @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z * @description SDK文档地址:https://help.aliyun.com/document_detail/125572.html?spm=a2c4g.11186623.6.1084.131d1c4cJT7o5Z
*/ */
initPlayer: function initPlayer() { initPlayer: function initPlayer() {
var _this2 = this; var _this3 = this;
if (typeof window.Aliplayer != 'undefined') { if (typeof window.Aliplayer != 'undefined') {
var options = this.options; var options = this.options;
@ -357,15 +366,16 @@ var staticRenderFns = []
} }
} }
this.config.id = this.id;
this.player = new Aliplayer(this.config, function (player) { this.player = new Aliplayer(this.config, function (player) {
console.log('播放器创建好了。', player); console.log('播放器创建好了。', player);
}); });
var _loop = function _loop(ev) { var _loop = function _loop(ev) {
_this2.player.on(_this2.events[ev], function (e) { _this3.player.on(_this3.events[ev], function (e) {
console.log("object ".concat(_this2.events[ev]), 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", "name": "vue-aliplayer-v2",
"version": "1.0.1", "version": "1.0.3",
"author": "yxs", "author": "yxs",
"description": "青出于蓝而胜于蓝,感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.", "description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.",
"main":"lib/vue-aliplayer-v2.umd.min.js", "main":"lib/vue-aliplayer-v2.umd.min.js",
"private": false, "private": false,
"license": "MIT", "license": "MIT",

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

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