Skip to content

Commit 106c17f

Browse files
zhangxin92zhangxin92
committed
fix(xgplayer): fix defination compatibility
1 parent f86fd8d commit 106c17f

File tree

6 files changed

+125
-115
lines changed

6 files changed

+125
-115
lines changed

‎examples

Submodule examples updated 43 files

‎packages/xgplayer/browser/index.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/xgplayer/dist/index.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/xgplayer/src/control/definition.js

Lines changed: 116 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,126 @@
1-
import Player from '../player';
1+
import Player from '../player'
22

33
let definition = function () {
4-
let player = this, util = Player.util, sniffer = Player.sniffer;
5-
let ul = util.createDom('xg-definition', '', {tabindex: 3}, 'xgplayer-definition'), root = player.controls;
6-
if (sniffer.device === 'mobile') {
7-
return;
8-
}
9-
player.on('resourceReady', function (list) {
10-
if (list && list instanceof Array && list.length > 1) {
11-
util.addClass(player.root, 'xgplayer-is-definition');
12-
player.on('canplay', function () {
13-
let tmp = ['<ul>'], src = player.config.url, a = document.createElement('a');
14-
if (player.switchURL) {
15-
['mp4', 'hls', 'flv'].every(item=>{
16-
if (player[item]) {
17-
a.href = player[item].url;
18-
src = a.href;
19-
return false;
20-
} else {
21-
return true;
22-
}
23-
});
24-
} else {
25-
src = player.currentSrc || player.src;
26-
}
27-
list.forEach(item=>{
28-
a.href = item.url;
29-
tmp.push(`<li url='${item.url}' cname='${item.name}' class='${a.href === src ? 'definition' : ''}'>${item.name}</li>`);
30-
});
31-
let cursrc = list.filter(item=>{ a.href = item.url; return a.href === src; });
32-
tmp.push(`</ul><p class="name"><em>${(cursrc[0] || {name: ''}).name}</em></p>`);
33-
let urlInRoot = root.querySelector('.xgplayer-definition');
34-
let tipsText = player.config.lang && player.config.lang === "zh-cn" ? "清晰度" : "Quality"
35-
if (urlInRoot) {
36-
urlInRoot.innerHTML = `<xg-tips class="xgplayer-tips">${tipsText}</xg-tips>` + tmp.join('');
37-
} else {
38-
ul.innerHTML = `<xg-tips class="xgplayer-tips">${tipsText}</xg-tips>` + tmp.join('');
39-
root.appendChild(ul);
40-
}
41-
});
4+
let player = this, util = Player.util, sniffer = Player.sniffer
5+
let ul = util.createDom('xg-definition', '', {tabindex: 3}, 'xgplayer-definition'), root = player.controls
6+
if (sniffer.device === 'mobile') {
7+
return
8+
}
9+
player.on('resourceReady', function (list) {
10+
if (list && list instanceof Array && list.length > 1) {
11+
util.addClass(player.root, 'xgplayer-is-definition')
12+
player.on('canplay', function () {
13+
let tmp = ['<ul>'], src = player.config.url, a = document.createElement('a')
14+
if (player.switchURL) {
15+
['mp4', 'hls', 'flv', 'dash'].every(item => {
16+
if (player[item]) {
17+
a.href = player[item].url
18+
src = a.href
19+
return false
20+
} else {
21+
return true
22+
}
23+
})
24+
} else {
25+
src = player.currentSrc || player.src
26+
}
27+
list.forEach(item => {
28+
a.href = item.url
29+
if (player.dash) {
30+
tmp.push(`<li url='${item.url}' cname='${item.name}' class='${item.selected ? 'definition' : ''}'>${item.name}</li>`)
31+
} else {
32+
tmp.push(`<li url='${item.url}' cname='${item.name}' class='${a.href === src ? 'definition' : ''}'>${item.name}</li>`)
33+
}
34+
})
35+
let cursrc = list.filter(item => {
36+
a.href = item.url
37+
if (player.dash) {
38+
return item.selected
39+
} else {
40+
return a.href === src
41+
}
42+
})
43+
tmp.push(`</ul><p class='name'><em>${(cursrc[0] || {name: ''}).name}</em></p>`)
44+
let urlInRoot = root.querySelector('.xgplayer-definition')
45+
let tipsText = player.config.lang && player.config.lang === 'zh-cn' ? '清晰度' : 'Quality'
46+
if (urlInRoot) {
47+
urlInRoot.innerHTML = `<xg-tips class='xgplayer-tips'>${tipsText}</xg-tips>` + tmp.join('')
48+
} else {
49+
ul.innerHTML = `<xg-tips class='xgplayer-tips'>${tipsText}</xg-tips>` + tmp.join('')
50+
root.appendChild(ul)
4251
}
43-
});
52+
})
53+
}
54+
});
4455

45-
['touchstart', 'click'].forEach(item=>{
46-
ul.addEventListener(item, function (e) {
47-
e.preventDefault();
48-
e.stopPropagation();
49-
let li = e.target || e.srcElement, a = document.createElement('a');
50-
if (li && li.tagName.toLocaleLowerCase() === 'li') {
51-
Array.prototype.forEach.call(li.parentNode.childNodes, item=>{
52-
util.removeClass(item, 'definition');
53-
});
54-
util.addClass(li, 'definition');
55-
li.parentNode.nextSibling.innerHTML = `<em>${li.getAttribute('cname')}</em>`;
56-
a.href = li.getAttribute('url');
57-
if (player.switchURL) {
58-
let curRUL = document.createElement('a');
59-
['mp4', 'hls', 'flv'].every(item=>{
60-
if (player[item]) {
61-
curRUL = player[item].url;
62-
return false;
63-
} else {
64-
return true;
65-
}
66-
});
67-
if (curRUL.href !== a.href && !player.ended) {
68-
player.switchURL(a.href);
69-
}
70-
} else {
71-
if (a.href !== player.currentSrc) {
72-
let curTime = player.currentTime, paused = player.paused;
73-
if (!player.ended) {
74-
player.src = a.href;
75-
player.once('canplay', function () {
76-
player.currentTime = curTime;
77-
if (!paused) {
78-
player.play();
79-
}
80-
});
81-
}
82-
}
56+
['touchstart', 'click'].forEach(item => {
57+
ul.addEventListener(item, function (e) {
58+
e.preventDefault()
59+
e.stopPropagation()
60+
let li = e.target || e.srcElement, a = document.createElement('a')
61+
if (li && li.tagName.toLocaleLowerCase() === 'li') {
62+
Array.prototype.forEach.call(li.parentNode.childNodes, item => {
63+
util.removeClass(item, 'definition')
64+
})
65+
util.addClass(li, 'definition')
66+
li.parentNode.nextSibling.innerHTML = `<em>${li.getAttribute('cname')}</em>`
67+
a.href = li.getAttribute('url')
68+
if (player.switchURL) {
69+
let curRUL = document.createElement('a');
70+
['mp4', 'hls', 'flv', 'dash'].every(item => {
71+
if (player[item]) {
72+
curRUL = player[item].url
73+
return false
74+
} else {
75+
return true
76+
}
77+
})
78+
if (curRUL.href !== a.href && !player.ended) {
79+
player.switchURL(a.href)
80+
}
81+
} else {
82+
if (a.href !== player.currentSrc) {
83+
let curTime = player.currentTime, paused = player.paused
84+
if (!player.ended) {
85+
player.src = a.href
86+
player.once('canplay', function () {
87+
player.currentTime = curTime
88+
if (!paused) {
89+
player.play()
8390
}
84-
player.emit('definitionchange', a.href);
85-
} else if (li && (li.tagName.toLocaleLowerCase() === 'p' || li.tagName.toLocaleLowerCase() === 'em')) {
86-
util.addClass(ul, 'xgplayer-definition-active');
87-
ul.focus();
91+
})
8892
}
89-
}, false);
90-
});
91-
92-
ul.addEventListener('blur', (e)=>{
93-
e.preventDefault();
94-
e.stopPropagation();
95-
util.removeClass(ul, 'xgplayer-definition-active');
96-
});
97-
98-
ul.addEventListener('mouseenter', (e)=>{
99-
e.preventDefault();
100-
e.stopPropagation();
101-
let tips = ul.querySelector('.xgplayer-tips');
102-
tips.style.left = "50%"
103-
let rect = tips.getBoundingClientRect()
104-
let rootRect = player.root.getBoundingClientRect()
105-
if(rect.right > rootRect.right) {
106-
tips.style.left = `${- rect.right + rootRect.right + 16}px`
93+
}
10794
}
108-
});
95+
player.emit('definitionchange', a.href)
96+
} else if (li && (li.tagName.toLocaleLowerCase() === 'p' || li.tagName.toLocaleLowerCase() === 'em')) {
97+
util.addClass(ul, 'xgplayer-definition-active')
98+
ul.focus()
99+
}
100+
}, false)
101+
})
109102

110-
player.once('destroy', ()=>{
111-
ul = null;
112-
});
103+
ul.addEventListener('blur', (e) => {
104+
e.preventDefault()
105+
e.stopPropagation()
106+
util.removeClass(ul, 'xgplayer-definition-active')
107+
})
108+
109+
ul.addEventListener('mouseenter', (e) => {
110+
e.preventDefault()
111+
e.stopPropagation()
112+
let tips = ul.querySelector('.xgplayer-tips')
113+
tips.style.left = '50%'
114+
let rect = tips.getBoundingClientRect()
115+
let rootRect = player.root.getBoundingClientRect()
116+
if (rect.right > rootRect.right) {
117+
tips.style.left = `${-rect.right + rootRect.right + 16}px`
118+
}
119+
})
113120

114-
};
121+
player.once('destroy', () => {
122+
ul = null
123+
})
124+
}
115125

116-
Player.install('definition', definition);
126+
Player.install('definition', definition)

‎packages/xgplayer/src/control/progress.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ progress = function () {
4949
let w = e.clientX - left > containerWidth ? containerWidth : e.clientX - left
5050
let now = w / containerWidth * player.duration
5151
progress.style.width = `${w * 100 / containerWidth}%`
52-
if (player.videoConfig.mediaType === 'video') {
52+
if (player.videoConfig.mediaType === 'video' && !player.dash) {
5353
player.currentTime = Number(now).toFixed(1)
5454
} else {
5555
let time = util.findDom(root, '.xgplayer-time')
@@ -67,7 +67,7 @@ progress = function () {
6767
window.removeEventListener('mouseup', up)
6868
window.removeEventListener('touchend', up)
6969
container.blur()
70-
if (!player.isProgressMoving || player.videoConfig.mediaType === 'audio') {
70+
if (!player.isProgressMoving || player.videoConfig.mediaType === 'audio' || player.dash) {
7171
let w = e.clientX - left
7272
let now = w / containerWidth * player.duration
7373
progress.style.width = `${w * 100 / containerWidth}%`
@@ -134,7 +134,7 @@ progress = function () {
134134
if (!containerWidth && container) {
135135
containerWidth = container.getBoundingClientRect().width
136136
}
137-
if (player.videoConfig.mediaType !== 'audio' || !player.isProgressMoving) {
137+
if (player.videoConfig.mediaType !== 'audio' || !player.isProgressMoving || !player.dash) {
138138
progress.style.width = `${player.currentTime * 100 / player.duration}%`
139139
}
140140
}

‎packages/xgplayer/src/control/time.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ let time = function () {
66
let curtime = util.createDom('xg-time', `<span>${player.currentTime || format(0)}</span><em>${player.duration || format(0)}</em>`, {}, 'xgplayer-time'); let root = player.controls
77
root.appendChild(curtime)
88
let handle = function () {
9-
if (player.videoConfig.mediaType !== 'audio' || !player.isProgressMoving) {
9+
if (player.videoConfig.mediaType !== 'audio' || !player.isProgressMoving || !player.dash) {
1010
curtime.innerHTML = `<span>${format(player.currentTime || 0)}</span><em>${format(player.duration)}`
1111
}
1212
}

0 commit comments

Comments
 (0)