修复播放器重载的bug

This commit is contained in:
zhouliujun 2019-12-12 18:34:12 +08:00
parent 6371e9ad1d
commit 2c4eb12b99
6 changed files with 56 additions and 48 deletions

View File

@ -1,11 +1,15 @@
<template>
<div id="app">
<vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170050" :options="options" />
<template v-if="show">
<vue-aliplayer-v2 ref="VueAliplayerV2" id="player-1194076936807170050" :options="options" />
</template>
<p class="remove-text" v-else>播放器已销毁!</p>
<div class="player-btns">
<span @click="play()">播放</span>
<span @click="pause()">暂停</span>
<span @click="replay()">重播</span>
<span @click="getCurrentTime()">播放时刻</span>
<span @click="show = !show">{{ show ? '销毁' : '重载' }}</span>
</div>
</div>
</template>
@ -15,7 +19,8 @@ export default {
return {
options: {
source:'//player.alicdn.com/video/aliyunmedia.mp4'
}
},
show: true
}
},
@ -35,7 +40,7 @@ export default {
getCurrentTime(){
this.$refs.VueAliplayerV2.getCurrentTime();
},
}
}
}
</script>
@ -44,11 +49,16 @@ export default {
margin: 0;
padding: 0;
}
.remove-text{
text-align: center;
padding: 20px;
font-size: 24px;
}
.player-btns{
width: 800px;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
span {
margin: 0 auto;
display: inline-block;

View File

@ -127,12 +127,12 @@ 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/src/main.vue?vue&type=template&id=66e79580&
// 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=c72078bc&
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=66e79580&
// CONCATENATED MODULE: ./packages/AliplayerV2/src/main.vue?vue&type=template&id=c72078bc&
// 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&
//
@ -274,14 +274,14 @@ var staticRenderFns = []
init: function init() {
var _this3 = this;
var load = true;
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);
var linkIDTag = document.getElementById(linkID);
if (!document.getElementById(linkID)) {
if (!linkIDTag) {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
@ -298,14 +298,12 @@ var staticRenderFns = []
html[0].appendChild(scriptTag);
}
scriptTag.addEventListener("load", function () {
_this3.initPlayer();
load = false;
});
if (!load) {
if (scriptTag && linkIDTag) {
this.initPlayer();
} else {
scriptTag.addEventListener("load", function () {
_this3.initPlayer();
});
}
},
@ -325,10 +323,11 @@ var staticRenderFns = []
}
}
this.config.id = this.id;
this.player = new Aliplayer(this.config, function (player) {
console.log('播放器创建好了。', player);
});
this.config.id = this.id; // this.player = new Aliplayer(this.config, function(player) {
// // console.log('播放器创建好了',player);
// });
this.player = new Aliplayer(this.config);
var _loop = function _loop(ev) {
_this4.player.on(_this4.events[ev], function (e) {

View File

@ -136,12 +136,12 @@ 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/src/main.vue?vue&type=template&id=66e79580&
// 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=c72078bc&
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=66e79580&
// CONCATENATED MODULE: ./packages/AliplayerV2/src/main.vue?vue&type=template&id=c72078bc&
// 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&
//
@ -283,14 +283,14 @@ var staticRenderFns = []
init: function init() {
var _this3 = this;
var load = true;
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);
var linkIDTag = document.getElementById(linkID);
if (!document.getElementById(linkID)) {
if (!linkIDTag) {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
@ -307,14 +307,12 @@ var staticRenderFns = []
html[0].appendChild(scriptTag);
}
scriptTag.addEventListener("load", function () {
_this3.initPlayer();
load = false;
});
if (!load) {
if (scriptTag && linkIDTag) {
this.initPlayer();
} else {
scriptTag.addEventListener("load", function () {
_this3.initPlayer();
});
}
},
@ -334,10 +332,11 @@ var staticRenderFns = []
}
}
this.config.id = this.id;
this.player = new Aliplayer(this.config, function (player) {
console.log('播放器创建好了。', player);
});
this.config.id = this.id; // this.player = new Aliplayer(this.config, function(player) {
// // console.log('播放器创建好了',player);
// });
this.player = new Aliplayer(this.config);
var _loop = function _loop(ev) {
_this4.player.on(_this4.events[ev], function (e) {

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "vue-aliplayer-v2",
"version": "1.0.9",
"version": "1.1.0",
"author": "yxs",
"description": "感谢每一位开源的开发者. 这是一个基于Alipayer 开发并封装成vue组件的播放器.",
"main":"lib/vue-aliplayer-v2.umd.min.js",

View File

@ -129,13 +129,13 @@ export default {
* 加载Alipayer的SDK
*/
init(){
let load = true;
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)) {
let linkIDTag = document.getElementById(linkID);
if(!linkIDTag) {
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
@ -151,13 +151,12 @@ export default {
html[0].appendChild(scriptTag);
}
scriptTag.addEventListener("load", () => {
this.initPlayer();
load = false;
});
if(!load){
if(scriptTag && linkIDTag){
this.initPlayer();
} else {
scriptTag.addEventListener("load", () => {
this.initPlayer();
});
}
},
@ -174,9 +173,10 @@ export default {
}
}
this.config.id = this.id;
this.player = new Aliplayer(this.config, function(player) {
console.log('播放器创建好了。',player);
});
// this.player = new Aliplayer(this.config, function(player) {
// // console.log('',player);
// });
this.player = new Aliplayer(this.config);
for(const ev in this.events){
this.player.on(this.events[ev],(e)=>{
// console.log(`object ${this.events[ev]}`,e);