1class ScriptVideoPopup extends Script { 2 constructor(params) { 3 super(params) 4 this.$dom = document.querySelector(`#${this.attrId}`) 5 this.utils = Utilts.ins() 6 this.config = JSON.parse(this.utilts.htmlDecode(params.config)) 7 this.isIframe = /^\s*<iframe[^>]*>[\s\S]*?<\/iframe>\s*$/.test(this.$dom.querySelector('[video-src]')?.getAttribute('video-src')||'') 8 this.useXgVideo = parseInt(params.useXgVideo) 9 10 // è§é¢ææ¾æ¹å¼ 11 let methodMap = { 12 default: this.config.method, 13 md: this.config.method_md, 14 xl: this.config.method_xl 15 } 16 this.method = methodMap[this.utilts.getScreen()] 17 if (params.gifData) { 18 const gifData = JSON.parse(this.utilts.htmlDecode(params.gifData)) 19 this.video_gif = gifData.video_gif 20 this.is_allow_gif = gifData.is_allow_gif 21 } 22 } 23 /** åå§åï¼æ¯æå¼æ¥ */ 24 async init() { 25 this.initBackgroundVideo() 26 this.initNodeEvent() 27 // iframe没å°é¢ï¼ç´æ¥æ¾ç¤º 28 if (!this.config.default_src && this.method === '2' && this.config.autoplay.toString() !== '1' && this.isIframe) { 29 this.videoPlayMothod2() 30 } 31 // if (this.config.autoplay.toString() !== '1' && this.config.default_src) { 32 if (this.config.default_src) { 33 if (this.is_allow_gif && this.video_gif) this.initHoverImg() 34 this.initPrevClick() 35 } 36 }
37 initBackgroundVideo() { 38 if (this.$dom.classList.contains('breadcrumb-background-video__wrapper')) { 39 const ancestor = this.$dom.closest('[package-item="module"]') 40 if (!ancestor) return 41 ancestor.style.position = 'relative' 42 const $backgroundVideo = this.$dom 43 const isDesignMode = Utilts.ins().checkDesign(); 44 const videoSrc = $backgroundVideo.querySelector('[video-src]'); 45 const hasVideo = videoSrc && videoSrc.getAttribute('video-src'); 46 $backgroundVideo.style.pointerEvents = 'none'; 47 ancestor.prepend($backgroundVideo) 48 if (hasVideo) { 49 setTimeout(() => { 50 const style = window.getComputedStyle(ancestor) 51 const hasImage = /url\(/i.test(style.backgroundImage) 52 const isGradient = /gradient/i.test(style.backgroundImage) 53 // console.log('hasImage', hasImage) 54 // console.log('isGradient', isGradient) 55 if (isGradient && hasImage) { 56 // å»æå¾ç 57 try { 58 const list = style.backgroundImage.split(',') 59 if (list.length > 1) { 60 const str = style.backgroundImage 61 ancestor.style.backgroundImage = str.replace(list[0] + ',', '') 62 } 63 } catch (e) {} 64 } else if (!isGradient) { 65 ancestor.style.backgroundImage = 'none' 66 } 67 }, isDesignMode ? 1000: 0) 68 } else { 69 if (!isDesignMode) { 70 $backgroundVideo.remove() 71 } 72 } 73 } 74 75 } 76 /** ç»å®ææ¾äºä»¶ */ 77 initNodeEvent() {
78 let config = JSON.parse(JSON.stringify(this.config)) 79 let $el = this.$dom.querySelector('[video-src]') 80 let url = $el?.getAttribute('video-src') || '' 81 const isIframe = this.isIframe 82 const isMp4 = /\.(mp4|m3u8)(\?|$)/i.test(url || '') 83 const showMask = config.show_mask * 1 84 const opacity = showMask?`filter:brightness(${config.opacity});`:'' 85 const showControls = config.controls && config.controls.toString() === '1' || false 86 87 if (this.utils.checkDesign()) document.getElementById('video-popup')?.remove() // å é¤è§é¢éæ°æ¸²æï¼å»ææ£å¨ææ¾çè§é¢å¼¹çª 88 89 if (url) { 90 // éæ 91 const replayWrap = 92 `<div class="base-video__wrap--replay"> 93 <div class="replay-icon"> 94 <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%"> 95 <path class="ytp-svg-fill" d="M 18,11 V 7 l -5,5 5,5 v -4 c 3.3,0 6,2.7 6,6 0,3.3 -2.7,6 -6,6 -3.3,0 -6,-2.7 -6,-6 h -2 c 0,4.4 3.6,8 8,8 4.4,0 8,-3.6 8,-8 0,-4.4 -3.6,-8 -8,-8 z" id="ytp-id-125"></path> 96 </svg> 97 </div> 98 </div>` 99 let videoList = [ 100 `<div class="base-video__wrap"> 101 ${showControls && this.method=== '2' ? '<div class="base-video__wrap--close">Ã</div>': ''} 102 ${showControls && this.method=== '2' ? replayWrap : replayWrap} 103 <video 104 style="display:block;height:auto;margin:0 auto;max-width:100%;${opacity}" 105 autoplay 106 controlsList="nodownload" 107 webkit-playsinline="true" 108 playsinline="true" 109 preload="metadata" 110 src="${url}" 111 ${config.loop && config.loop.toString() === '1' ? ' loop' : ''} 112 ${config.muted && config.muted.toString() === '1' ? ' muted' : ''} 113 ${showControls ? ' controls' : ''} 114 /> 115 </div>`, 116 '<div class="base-video__wrap">' + 117 '<iframe frameborder="0" allow="autoplay" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" src="' + url + '"></iframe>' 118 + '</div>' 119 ] 120 121 if (this.method === '2') { 122 let videoHtml; 123 let iframeUrl = [] 124 if (isIframe) { 125 iframeUrl = globalThis.Server.iframeAutoplay(url).split('<iframe') 126 videoHtml = `<iframe style="filter:brightness(${showMask?config.opacity:'1'})"`+iframeUrl[1] 127 } else if (isMp4) { 128 if (this.useXgVideo) { 129 const videothumbDom = $el.querySelector('.base-video__thumb img') 130 const videothumb = videothumbDom.getAttribute('src') || videothumbDom.getAttribute('lazy-src') 131 new VideoPlayer($el.querySelector('.video-container'), url, { 132 ...config, 133 trigger: 'backgroundAutoPlay', 134 playerConfig: { 135 poster: videothumb, 136 fitVideoSize: 'fixWidth' 137 } 138 }) 139 return 140 } else { 141 videoHtml = videoList[0] 142 } 143 } else { 144 videoHtml = globalThis.Server.iframeAutoplay(videoList[1]) 145 } 146 const resetVideo = $el.resetVideo = () => { 147 $el.classList.remove('play') 148 const $preview = $el.querySelector('.base-video__preview') 149 if ($preview) { 150 const videoWrapDom = $preview.querySelector('.base-video__wrap') 151 if (videoWrapDom) { 152 videoWrapDom.remove() 153 } 154 $preview.classList.remove('play') 155 } 156 } 157 const playVideo = $el.playVideo = () => { 158 setTimeout(() => { 159 $el.querySelector('.unit-list-hover__image')?.classList.add('d-none') 160 }, 100) 161 $el.querySelector('.base-video__preview').innerHTML += videoHtml 162 $el.querySelector('.base-video__preview').classList.add('play') 163 $el.classList.add('play') 164 const closeBtn = $el.querySelector('.base-video__preview').querySelector('.base-video__wrap--close') 165 const replayBtn = $el.querySelector('.base-video__preview').querySelector('.replay-icon') 166 if (showControls && closeBtn) { 167 const closeVideo = (event) => { 168 event.stopPropagation() 169 event.preventDefault() 170 const videoWrapDom = $el.querySelector('.base-video__preview').querySelector('.base-video__wrap') 171 if (videoWrapDom) { 172 videoWrapDom?.remove() 173 $el.querySelector('.base-video__preview').classList.remove('play') 174 $el.classList.remove('play') 175 } 176 $el.querySelector('.unit-list-hover__image')?.classList.remove('d-none') 177 $el.children[0].querySelector('.base-image__item')?.classList.remove('opacity0') 178 $el.querySelectorAll('img[lazy-src][src=""], img[lazy-src]:not([src])').forEach(img => { 179 const imgSrc = img.getAttribute('data-src') || img.getAttribute('lazy-src'); 180 if (imgSrc) { 181 // 设置å¼å¸¸å¾ççsrc 182 img.setAttribute('src', imgSrc); 183 } 184 }); 185 } 186 closeBtn.addEventListener('click', closeVideo, { once: true }) 187 } 188 if (showControls && replayBtn) { 189 const videoDom = $el.querySelector('.base-video__wrap video') 190 const replayWrapDom = $el.querySelector('.base-video__preview').querySelector('.base-video__wrap--replay') 191 const showReplayBtn = (event) => { 192 event.stopPropagation() 193 event.preventDefault() 194 console.log('replayWrapDom', replayWrapDom) 195 196 if (config.loop.toString() !== '1') { 197 // console.log('ä¸æ¯å¾ªç¯ææ¾'); 198 // let elementToRemove = $el.querySelector('.base-video__wrap') 199 // let parentElement = elementToRemove.parentNode 200 // parentElement.removeChild(elementToRemove) 201 // $el.querySelector('.base-video__preview').classList.remove('play') 202 } else if(replayWrapDom) { 203 replayWrapDom.style.display = 'flex' 204 videoDom.controls = false 205 } 206 } 207 videoDom?.addEventListener('ended', showReplayBtn) 208 const replay = (event) => { 209 event.stopPropagation() 210 event.preventDefault() 211 videoDom.currentTime = 0 212 videoDom.play() 213 replayWrapDom.style.display = 'none' 214 videoDom.controls = true 215 } 216 replayBtn?.addEventListener('click', replay) 217 } 218 const videothumb = $el.querySelector('.base-video__thumb img') 219 const videoDom = $el.querySelector('.base-video__preview video') 220 if (videothumb && videoDom) videoDom.poster = videothumb.getAttribute('src') || videothumb.getAttribute('lazy-src') 221 // å½ä¸è®¾ç½®å¾ªç¯ææ¾ï¼è§é¢éæåå°å°é¢å¾é¡µé¢ã并ä¸å¾æ 使ç¨ææ°è®¾è®¡çå¾æ 222 if (videoDom && config.loop.toString() !== '1') { 223 const backToCover = () =>{ 224 let elementToRemove = $el.querySelector('.base-video__wrap') 225 let parentElement = elementToRemove.parentNode 226 parentElement.removeChild(elementToRemove) 227 $el.querySelector('.base-video__preview').classList.remove('play') 228 } 229 videoDom.addEventListener('ended', backToCover) 230 } 231 } 232 // å½åææ¾
233 if (config.autoplay.toString() === '1' && $el.querySelector('.base-video__preview').classList.value.indexOf('play') === -1) { 234 // èªå¨ææ¾ 235 playVideo() 236 } else { 237 // æå¨ææ¾ 238 if (isIframe) { 239 videoHtml = this.config.default_src ? videoHtml : globalThis.Server.iframeAutoplayClear(videoHtml, config.muted && config.muted.toString() === '1') 240 } 241 } 242 $el.addEventListener('click', this.videoPlayMothod2 = () => { 243 if ($el.querySelector('.base-video__preview').classList.value.indexOf('play') === -1) { 244 playVideo() 245 } 246 247 // if (/\.mp4(\?|$)/i.test(url) && window.app.utilts.checkScreenMobile()) { 248 // // ææºç«¯ 249 // $el.querySelector('video').requestFullscreen() 250 // } 251 }) 252 } else { 253 let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 254 $el.addEventListener('click', () => { 255 const href = $el.getAttribute('video-href') 256 const videothumb = $el.querySelector('.base-video__thumb img') 257 if (href && !/^javascript:;$/.test(href) && !/^#/.test(href)) { 258 const target = $el.getAttribute('video-target') || '_self' 259 if (target === '_self') window.location.href = globalThis.Server.getRinseHref(href, window.app.info.site) 260 else window.open(globalThis.Server.getRinseHref(href, window.app.info.site)) 261 } else { 262 let videoPopupNode = document.getElementById('video-popup') 263 function closeVideoPopupNode() { 264 videoPopupNode.classList.remove("show") 265 videoPopupNode.getElementsByTagName("video")[0].pause() 266 videoPopupNode.innerHTML = '' 267 videoPopupNode.remove() 268 } 269 if (!videoPopupNode || videoPopupNode.innerHTML === '') { 270 videoPopupNode = document.createElement('div') 271 videoPopupNode.innerHTML = ` 272 <div class="unit-video-popup__window"> 273 <div class="unit-video-popup__close">Ã</div> 274 <div class="unit-video-popup__content">${videoList.join('')}</div> 275 </div>` 276 videoPopupNode.setAttribute('id', 'video-popup') 277 videoPopupNode.className = "unit-video-popup__window-wrap" 278 videoPopupNode.getElementsByClassName("unit-video-popup__close")[0].addEventListener('click', closeVideoPopupNode) 279 document.body.appendChild(videoPopupNode) 280 } 281 let $popupVideo = videoPopupNode.getElementsByTagName("video")[0]; 282 if (isIframe) { 283 videoPopupNode.getElementsByTagName("iframe")[0].outerHTML = globalThis.Server.iframeAutoplay(url) 284 $popupVideo.src = '' 285 $popupVideo.style.display = 'none' 286 } else if (isMp4) { 287 $popupVideo.src = url 288 $popupVideo.style.display = 'block' 289 if (videothumb && $popupVideo) $popupVideo.poster = videothumb.getAttribute('src') || videothumb.getAttribute('lazy-src') 290 videoPopupNode.getElementsByTagName("iframe")[0].src = '' 291 videoPopupNode.getElementsByTagName("iframe")[0].style.display = 'none' 292 if (window.app.utilts.checkScreenMobile()) { 293 // if (isiOS) { 294 // setTimeout(() => { $popupVideo.webkitEnterFullscreen() }, 500) 295 // } else { 296 // $popupVideo.requestFullscreen() 297 // } 298 const showPopupVideo = (show) => { 299 if (show) { 300 videoPopupNode.style.zIndex = '' 301 videoPopupNode.style.opacity = '' 302 } else { 303 videoPopupNode.style.zIndex = -1 304 videoPopupNode.style.opacity = 0 305 } 306 } 307 if (isiOS) { 308 $popupVideo.style['aspect-ratio'] = '16 / 9'; 309 $popupVideo.style['height'] = '56.25vw'; 310 $popupVideo.addEventListener('webkitendfullscreen', () => { 311 closeVideoPopupNode() 312 $popupVideo.style['aspect-ratio'] = ''; 313 $popupVideo.style['height'] = 'auto'; 314 }) 315 let hanlder = function() { 316 // è§é¢ç¼å²å®æ¯ 317 if (videoPopupNode.classList.contains('show')) { 318 $popupVideo.webkitEnterFullscreen() 319 } 320 $popupVideo.removeEventListener('canplaythrough', hanlder); 321 } 322 $popupVideo.addEventListener('canplaythrough', hanlder); 323 } else { 324 $popupVideo.requestFullscreen().then(() => { 325 // å ¨å±æå 326 showPopupVideo(0) 327 let tempScrollY = window.scrollY 328 function updateFullscreenStatus() { 329 if (document.fullscreenElement !== $popupVideo) { 330 window.scrollTo(0, tempScrollY); 331 closeVideoPopupNode() 332 showPopupVideo(1) 333 } 334 } 335 $popupVideo.addEventListener('fullscreenchange', updateFullscreenStatus); 336 }) 337 } 338 } 339 } else { 340 videoPopupNode.getElementsByTagName("iframe")[0].src = url 341 videoPopupNode.getElementsByTagName("iframe")[0].style.display = 'block' 342 $popupVideo.src = '' 343 $popupVideo.style.display = 'none' 344 } 345 videoPopupNode.classList.add('show') 346 const $replay = videoPopupNode.querySelector('.base-video__wrap--replay') 347 if (showControls && $replay) { 348 const showReplayBtn = (event) => { 349 event.stopPropagation() 350 event.preventDefault() 351 if($replay) { 352 $replay.style.display = 'flex' 353 $popupVideo.controls = false 354 } 355 } 356 $popupVideo?.addEventListener('ended', showReplayBtn) 357 const replay = (event) => { 358 event.stopPropagation() 359 event.preventDefault() 360 $popupVideo.currentTime = 0 361 $popupVideo.play() 362 $replay.style.display = 'none' 363 $popupVideo.controls = true 364 } 365 $replay?.addEventListener('click', replay) 366 } 367 } 368 }) 369 } 370 } 371 372 }
373 initPrevClick() { 374 const gifHoverImages = this.$dom.querySelectorAll('.unit-list-hover__image') 375 if (gifHoverImages.length) { 376 gifHoverImages.forEach(val => { 377 val.addEventListener('click', () => { 378 if (this.method === '2') val.classList.add('d-none') 379 val.parentNode?.parentNode.click() 380 }) 381 }) 382 } 383 } 384 initHoverImg() { 385 const videoDom = this.$dom.querySelector('.base-video') 386 setTimeout(() => { 387 this.renderHoverImg(videoDom) 388 videoDom.parentNode.onmouseover = e => { 389 const originImg = videoDom.children[0].children[1].querySelector('.base-image__item') // hoveråå¾çææ 390 const h_dom = videoDom.querySelector('.unit-list-hover__image') 391 if (h_dom && h_dom.classList.contains('hover_img_before_load')) { 392 h_dom.classList.remove('hover_img_before_load') 393 } 394 if (originImg) originImg.classList.add('opacity0') 395 videoDom.querySelector('.base-video__play')?.classList.add('d-none') 396 } 397 videoDom.parentNode.onmouseout = e => { 398 const originImg = videoDom.children[0].children[1].querySelector('.base-image__item') // hoveråå¾çææ 399 const h_dom = videoDom.querySelector('.unit-list-hover__image') 400 if (originImg) originImg.classList.remove('opacity0') 401 if (h_dom) { 402 h_dom.classList.add('hover_img_before_load') 403 } 404 videoDom.querySelector('.base-video__play')?.classList.remove('d-none') 405 } 406 }, 0) 407 } 408 renderHoverImg(node) { 409 node.setAttribute('hover-img', true) 410 node.setAttribute('video-gif', this.video_gif) 411 let hoverImgEl = '' 412 if (node.querySelector('.unit-list-hover__image img')) { 413 hoverImgEl = node.querySelector('.unit-list-hover__image img') 414 hoverImgEl.setAttribute('lazy-src', this.video_gif) 415 const wrapper = node.children[0].querySelector('.base-video__thumb').cloneNode(true) 416 console.log('wrapper', wrapper); 417 if (wrapper.querySelector('.base-image__item')) { 418 wrapper.querySelector('.base-image__item').innerHTML = hoverImgEl.outerHTML 419 } else { 420 wrapper.querySelector('.base-image').innerHTML = ` 421 <div class="base-image__item base-image__item--default "> 422 ${hoverImgEl.outerHTML} 423 </div> 424 ` 425 } 426 node.querySelector('.unit-list-hover__image').innerHTML = wrapper.outerHTML 427 const hoverImg = node.querySelector('.unit-list-hover__image img') 428 new LazyImg(hoverImg) 429 // node.querySelector('.unit-list-hover__image img').setAttribute('lazy-type', '') 430 } else { 431 hoverImgEl = document.createElement('div') 432 // unit-list-hover__image animate__animated hover_img_before_load 433 hoverImgEl.classList.add('unit-list-hover__image', 'hover_img_before_load') 434 const wrapper = node.children[0].querySelector('.base-video__thumb').cloneNode(true) 435 if (wrapper.querySelector('.base-image__item')) { 436 wrapper.querySelector('.base-image__item').innerHTML = `<img class="base-image__img img-fluid" lazy-src="${this.video_gif}" alt="">` 437 } else { 438 wrapper.querySelector('.base-image').innerHTML = ` 439 <div class="base-image__item base-image__item--default "> 440 <img class="base-image__img img-fluid" lazy-src="${this.video_gif}" src="${this.video_gif}" alt=""> 441 </div> 442 ` 443 } 444 hoverImgEl.innerHTML = wrapper.outerHTML 445 console.log('hoverImgEl', hoverImgEl); 446 const hoverImg = hoverImgEl.querySelector('.unit-list-hover__image img') 447 new LazyImg(hoverImg) 448 node.querySelector('.base-video__preview').appendChild(hoverImgEl) 449 } 450 } 451}
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.