1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
| <script>
document.addEventListener('DOMContentLoaded', initDplayer);
function initDplayer() {
const common = {
loadResource: function (id, resource, type, callback) {
let loaded = document.head.querySelector('#' + id);
if (loaded) {
callback();
return;
}
const element = document.createElement(type);
element.onload = element.onreadystatechange = () => {
if (!loaded && (!element.readyState || /loaded|complete/.test(element.readyState))) {
element.onload = element.onreadystatechange = null;
loaded = true;
callback();
}
}
if (type === 'link') {
element.rel = 'stylesheet';
element.href = resource;
} else {
element.src = resource;
}
element.id = id;
document.getElementsByTagName('head')[0].appendChild(element);
},
loadResources: function (callback) {
const cdn = '//s0.pstatp.com/cdn/expire-1-M';
const resources = [
'/dplayer/1.25.0/DPlayer.min.css',
'/dplayer/1.25.0/DPlayer.min.js',
'/hls.js/0.12.4/hls.light.min.js',
'/flv.js/1.5.0/flv.min.js'
];
let unloadedResourceCount = resources.length;
resources.forEach(resource => {
this.loadResource(btoa(resource).replace(/[=+\/]/g, ''), cdn + resource,
({
'css': 'link',
'js': 'script'
})[resource.split('.').pop()],
() => --unloadedResourceCount ? null : callback()
);
});
},
createDplayers: function (sources, callback) {
for (let i = 0; i < sources.length; i++) {
const child = document.createElement('div');
const src = sources[i].getAttribute('src');
sources[i].parentNode.insertBefore(child, sources[i]);
sources[i].style.display = 'none';
const type = src.split('.').pop();
const option = { url: src };
type === 'flv' ? option.type = type : null;
const dplayer = new DPlayer({ container: child, preload: 'none', autoplay: false, screenshot: false, video: option });
}
if (typeof callback === 'function') callback();
}
};
const mirages = {
isMirages: function () { return Mirages || false },
fixVideoSize: function (length) {
let outerTimer = false;
const outerInterval = setInterval(() => {
if (outerTimer) return;
const videos = document.getElementsByTagName('video');
if (videos.length === length) {
const dplayerWraps = document.querySelectorAll('.dplayer-video-wrap');
for (let i = 0; i < length; i++) {
const videoContainers = dplayerWraps[i].querySelectorAll('.video-container.video-4-3');
if (videoContainers.length) {
videoContainers[0].style = 'position: initial;';
videoContainers[0].className = 'video-container video-16-9';
console.log('video-4-3 fixed.');
} else {
const videoContainer = document.createElement('div');
videoContainer.style = 'position: initial;';
videoContainer.className = 'video-container video-16-9';
videoContainer.appendChild(videos[i]);
dplayerWraps[i].appendChild(videoContainer);
console.log('video-16-9 inserted.');
const targetNode = videoContainer;
const config = { childList: true };
const callback = (mutationsList, observer) => {
const newVideoContainers = videoContainer.querySelectorAll(
'.video-container.video-4-3');
if (newVideoContainers.length) {
newVideoContainers[0].className = '';
console.log('auto inserted video-4-3 fixed.');
observer.disconnect();
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
setTimeout(() => observer.disconnect(), 1000 * 120);
}
}
outerTimer = true;
clearInterval(outerInterval);
}
}, 500);
}
};
const dps = document.getElementsByTagName('dp');
if (dps.length !== 0) {
common.loadResources(() => common.createDplayers(dps, () => {
mirages.isMirages() ? mirages.fixVideoSize(dps.length) : null;
}));
}
};
</script>
|
