1class ScriptDetailVideo extends Script { 2 constructor(params) { 3 super(params) 4 this.$dom = document.querySelector(`#${this.attrId}`) 5 this.$parent = this.$dom.querySelector('.unit-detail-video') 6 this.$content = this.$dom.querySelector('.unit-detail-video__content') 7 this.videoUrl = this.$dom.querySelector('[video-src]').getAttribute('video-src') || '' 8 this.config = JSON.parse(decodeURIComponent(params.config)) 9 10 this.isMp4 = /\.mp4(\?|$)/i.test(this.videoUrl) 11 this.isIframe = /^\s*<iframe[^>]*>[\s\S]*?<\/iframe>\s*$/.test(this.videoUrl) 12 13 let methodMap = { 14 default: this.config.method, 15 md: this.config.method_md, 16 xl: this.config.method_xl 17 } 18 this.method = methodMap[this.utilts.getScreen()] 19 } 20 async init() { 21 // ç»å®è§é¢ç¸å ³äºä»¶ 22 this.initNodeEvent() 23 // iframe没å°é¢ï¼ç´æ¥æ¾ç¤º 24 if (!this.config.default_src && this.method === '2' && this.config.autoplay.toString() !== '1' && (this.isIframe || !this.isMp4)) { 25 this.videoPlayMothod2() 26 } 27 } 28 /** ç»å®ææ¾äºä»¶ */ 29 initNodeEvent() {
30 let config = JSON.parse(JSON.stringify(this.config)) 31 let $el = this.$dom.querySelector('[video-src]') 32 let url = this.videoUrl 33 const isIframe = this.isIframe 34 35 // let maxHeight = '' 36 // const handleResize = () => { 37 // maxHeight = `${this.$parent.offsetWidth * 0.5625}px` // 16:9 38 // if (window.innerWidth < 1200) { // ä» PC端éå¶æ大é«åº¦ 39 // maxHeight = '' 40 // } 41 // if (isIframe || !this.isMp4) { 42 // $el.querySelector('.base-video__preview').style.height = maxHeight 43 // } else { 44 // const $video = $el.querySelector('.base-video__preview video') 45 // $video && ($video.style.height = maxHeight) 46 // } 47 // } 48 // handleResize() 49 // // çå¬ container 尺寸åå 50 // var observer = new ResizeObserver((entries) => { 51 // entries.forEach((entry) => { 52 // if (entry.target === this.$parent) { 53 // handleResize() 54 // } 55 // }); 56 // }); 57 // // çå¬ç®æ å ç´ ç宽度åå 58 // observer.observe(this.$parent); 59 60 if (url) { 61 let videoList = [ 62 '<video style="filter:brightness('+((config.show_mask * 1)?config.opacity:'1')+');display:block;height:auto;margin:0 auto;max-width:100%;" autoplay controlsList="nodownload" webkit-playsinline="true" playsinline="true" preload="metadata" src="' + url + '"' + (config.loop && config.loop.toString() === '1' ? ' loop' : '') + (config.muted && config.muted.toString() === '1' ? ' muted' : '') + (config.controls && config.controls.toString() === '1' ? ' controls' : '') + '></video>', 63 '<iframe frameborder="0" allow="autoplay" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="' + url + '"></iframe>' 64 ] 65 if (this.method === '2') { 66 let videoHtml; 67 if (isIframe) { 68 videoHtml = globalThis.Server.iframeAutoplay(url) 69 } else if (this.isMp4) { 70 videoHtml = videoList[0] 71 $el.querySelector('.base-video__preview').style['aspect-ratio'] = 'auto' 72 } else { 73 videoHtml = globalThis.Server.iframeAutoplay(videoList[1]) 74 } 75 76 let initHtml = $el.querySelector('.base-video__preview').innerHTML 77 const resetVideo = () => { 78 $el.querySelector('.base-video__preview').innerHTML = initHtml; 79 $el.querySelector('.base-video__preview').classList.remove('play') 80 $el.classList.remove('play') 81 this.$dom.querySelector('.unit-detail-video__close').style.display = 'none' 82 // iframe没å°é¢ï¼ç´æ¥æ¾ç¤º 83 if (!this.config.default_src && this.config.autoplay.toString() !== '1' && (this.isIframe || !this.isMp4)) { 84 this.videoPlayMothod2() 85 } 86 } 87 this.$dom.querySelector('.unit-detail-video__close').addEventListener('click', resetVideo) 88 89 const playVideo = () => { 90 initHtml = $el.querySelector('.base-video__preview').innerHTML 91 92 $el.querySelector('.base-video__preview').innerHTML += videoHtml 93 $el.querySelector('.base-video__preview').classList.add('play') 94 $el.classList.add('play') 95 96 this.$dom.querySelector('.unit-detail-video__close').style.display = 'block' 97 98 const videothumb = $el.querySelector('.base-video__thumb img') 99 const videoDom = $el.querySelector('.base-video__preview video') 100 if (videothumb && videoDom) videoDom.poster = videothumb.getAttribute('src') || videothumb.getAttribute('lazy-src') 101 } 102 // å½åææ¾ 103 if (config.autoplay.toString() === '1' && $el.querySelector('.base-video__preview').classList.value.indexOf('play') === -1) { 104 // èªå¨ææ¾ 105 playVideo() 106 } else { 107 // æå¨ææ¾ 108 if (isIframe || !this.isMp4) { 109 videoHtml = this.config.default_src ? videoHtml : globalThis.Server.iframeAutoplayClear(videoHtml, config.muted && config.muted.toString() === '1') 110 } 111 $el.addEventListener('click', this.videoPlayMothod2 = () => { 112 if ($el.querySelector('.base-video__preview').classList.value.indexOf('play') === -1) { 113 playVideo() 114 } 115 // if (this.isMp4 && window.app.utilts.checkScreenMobile()) { 116 // // ææºç«¯ 117 // $el.querySelector('video').requestFullscreen() 118 // } 119 }) 120 } 121 } else { 122 let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 123 $el.addEventListener('click', () => { 124 const href = $el.getAttribute('video-href') 125 const videothumb = $el.querySelector('.base-video__thumb img') 126 if (href && !/^javascript:;$/.test(href) && !/^#/.test(href)) { 127 const target = $el.getAttribute('video-target') || '_self' 128 if (target === '_self') window.location.href = globalThis.Server.getRinseHref(href, window.app.info.site) 129 else window.open(globalThis.Server.getRinseHref(href, window.app.info.site)) 130 } else { 131 let videoPopupNode = document.getElementById('video-popup') 132 function closeVideoPopupNode() { 133 videoPopupNode.classList.remove("show") 134 videoPopupNode.getElementsByTagName("video")[0].pause() 135 videoPopupNode.innerHTML = '' 136 } 137 if (!videoPopupNode || videoPopupNode.innerHTML === '') { 138 videoPopupNode = document.createElement('div') 139 videoPopupNode.innerHTML = ` 140 <div class="unit-video-popup__window"> 141 <div class="unit-video-popup__close">Ã</div> 142 <div class="unit-video-popup__content">${videoList.join('')}</div> 143 </div>` 144 videoPopupNode.setAttribute('id', 'video-popup') 145 videoPopupNode.className = "unit-video-popup__window-wrap" 146 videoPopupNode.getElementsByClassName("unit-video-popup__close")[0].addEventListener('click', closeVideoPopupNode) 147 document.body.appendChild(videoPopupNode) 148 } 149 150 let $popupVideo = videoPopupNode.getElementsByTagName("video")[0]; 151 if (isIframe || !this.isMp4) { 152 videoPopupNode.getElementsByTagName("iframe")[0].outerHTML = isIframe ? globalThis.Server.iframeAutoplay(url) : globalThis.Server.iframeAutoplay(videoList[1]) 153 $popupVideo.src = '' 154 $popupVideo.style.display = 'none' 155 } else if (this.isMp4) { 156 $popupVideo.src = url 157 $popupVideo.style.display = 'block' 158 if (videothumb && $popupVideo) $popupVideo.poster = videothumb.getAttribute('src') || videothumb.getAttribute('lazy-src') 159 videoPopupNode.getElementsByTagName("iframe")[0].src = '' 160 videoPopupNode.getElementsByTagName("iframe")[0].style.display = 'none' 161 if (window.app.utilts.checkScreenMobile()) { 162 const showPopupVideo = (show) => { 163 if (show) { 164 videoPopupNode.style.zIndex = '' 165 videoPopupNode.style.opacity = '' 166 } else { 167 videoPopupNode.style.zIndex = -1 168 videoPopupNode.style.opacity = 0 169 } 170 } 171 if (isiOS) { 172 $popupVideo.style['aspect-ratio'] = '16 / 9'; 173 $popupVideo.style['height'] = '56.25vw'; 174 $popupVideo.addEventListener('webkitendfullscreen', () => { 175 closeVideoPopupNode() 176 $popupVideo.style['aspect-ratio'] = ''; 177 $popupVideo.style['height'] = 'auto'; 178 }) 179 let hanlder = function() { 180 // è§é¢ç¼å²å®æ¯ 181 if (videoPopupNode.classList.contains('show')) { 182 $popupVideo.webkitEnterFullscreen() 183 } 184 $popupVideo.removeEventListener('canplaythrough', hanlder); 185 } 186 $popupVideo.addEventListener('canplaythrough', hanlder); 187 } else { 188 $popupVideo.requestFullscreen().then(() => { 189 // å ¨å±æå 190 showPopupVideo(0) 191 let tempScrollY = window.scrollY 192 function updateFullscreenStatus() { 193 if (document.fullscreenElement !== $popupVideo) { 194 window.scrollTo(0, tempScrollY); 195 closeVideoPopupNode() 196 showPopupVideo(1) 197 } 198 } 199 $popupVideo.addEventListener('fullscreenchange', updateFullscreenStatus); 200 }) 201 } 202 } 203 } 204 205 videoPopupNode.classList.add('show') 206 } 207 }) 208 } 209 210 } 211 } 212 /**æ£æ¥è§é¢é¾æ¥æ¯å¦ææ */ 213 _checkVideoUrl(url, callback, errBack) { 214 let fragment = document.createDocumentFragment() 215 let video = document.createElement('video') 216 video.src = url 217 fragment.append(video) 218 video.onloadedmetadata = () => { 219 if (callback) callback() 220 } 221 video.onerror = () => { 222 if (errBack) errBack() 223 } 224 } 225}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.