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>
|