diff --git a/themes/movie/index.js b/themes/movie/index.js index d7c08bb6..326781e1 100644 --- a/themes/movie/index.js +++ b/themes/movie/index.js @@ -194,10 +194,20 @@ const LayoutSlug = props => { const carouselItem = document.createElement('div') carouselItem.classList.add('notion-carousel') carouselItem.appendChild(wrapper) + + // 如有外链、保存在data-src中 + const iframe = wrapper.querySelector('iframe') + if (iframe) { + iframe.setAttribute('data-src', iframe.getAttribute('src')) + } + // 如果是第一个元素,设置为 active if (index === 0) { carouselItem.classList.add('active') + } else { + iframe.setAttribute('src', '') } + // 将元素添加到容器中 carouselWrapper.appendChild(carouselItem) // 从 DOM 中移除原始的 .notion-asset-wrapper 元素 @@ -215,15 +225,26 @@ const LayoutSlug = props => { div.addEventListener('click', function () { // 遍历所有的 carouselItem 元素 document.querySelectorAll('.notion-carousel').forEach(item => { + // 外链保存在data-src中 + const iframe = item.querySelector('iframe') + console.log('iframe', iframe.getAttribute('data-src'), iframe.getAttribute('src')) + // 判断当前元素是否包含该 figCaption 的文本内容,如果是则设置为 active,否则取消 active if (item.querySelector('figcaption').textContent.trim() === value) { item.classList.add('active') + if (iframe) { + iframe.setAttribute('src', iframe.getAttribute('data-src')) + } } else { item.classList.remove('active') // 不活跃窗口暂停播放,仅支持notion上传视频、不支持外链 item.querySelectorAll('video')?.forEach(video => { video.pause() }) + // 外链通过设置src来实现视频暂停播放 + if (iframe) { + iframe.setAttribute('src', '') + } } }) })