|
|
| （未显示同一用户的2个中间版本） |
| 第1行： |
第1行： |
| = PV 测试（单视频） = | | <!-- ============================= |
| | 🎬 PV导视 · TV / 剧场版切换区块 |
| | ============================= --> |
|
| |
|
| 我们先测试一个视频，确认 JS 能在页面内执行。
| | <div style="border:1px solid #d9e6f2; background:linear-gradient(180deg,#f7fbff 0%,#ffffff 100%); padding:20px 22px; border-radius:12px; margin-bottom:25px; box-shadow:0 2px 6px rgba(0,0,0,0.06);"> |
|
| |
|
| == PV 区 == | | <div style="font-size:20px; font-weight:bold; margin-bottom:12px;"> |
| | 🎥 2026年动画 PV 导视 |
| | </div> |
|
| |
|
| <div class="pv-layout"> | | <div style=" display:flex; gap:20px; flex- wrap:wrap;"> |
| | | <div style="flex:1; min-width:180px;"> |
| <!-- 左侧卡片 -->
| | [[2026年冬季新番/PV导视（生肉版）|<div style=" background:#e6f3ff; border:1px solid #8ac4f9; padding:12px 16px; border- radius:10px; text-align:center; font-weight:bold; color:#1a73e8; transition:.2s;"> 📺 TV动画 PV</div>]] |
| | | </div> |
| | | <div style="flex:1; min-width:180px;"> |
| <div class="pv-item" data-yt="k1G8EvZg_BY" onclick="switchPV(this)"> | | [[2026年剧场版动画/PV导视（生肉版）|<div style=" background:#fcefe8; border:1px solid #f4aa8b; padding:12px 16px; border-radius:10px; text- align:center; font-weight:bold; color:#e86c3a; transition:.2s;"> 🎬 剧场版 PV</div> ]] |
| <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
| |
| <div class="pv-title">Fate/strange Fake ｜ 第1弾PV（测试用）</div> | |
| </div> | | </div> |
|
| |
| </div>
| |
|
| |
| <!-- 右侧播放器 -->
| |
| <div class="pv-right">
| |
| <div class="pv-player-box">
| |
| <iframe
| |
| id="pv-main-iframe"
| |
| src="https://www.youtube.com/embed/k1G8EvZg_BY?rel=0&modestbranding=1"
| |
| title="PV 播放器"
| |
| frameborder="0"
| |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
| |
| referrerpolicy="strict-origin-when-cross-origin"
| |
| allowfullscreen>
| |
| </iframe>
| |
| </div>
| |
| </div> | | </div> |
|
| |
|
| </div> | | </div> |
|
| |
| <style>
| |
| .pv-layout {
| |
| display: flex;
| |
| gap: 32px;
| |
| margin: 20px 0 40px;
| |
| }
| |
| .pv-left {
| |
| width: 300px;
| |
| }
| |
| .pv-item {
| |
| cursor: pointer;
| |
| background: #fff;
| |
| padding: 8px;
| |
| border-radius: 12px;
| |
| box-shadow: 0 4px 12px rgba(0,0,0,.1);
| |
| transition: .2s;
| |
| }
| |
| .pv-item img { width: 100%; border-radius: 10px; }
| |
| .pv-title { font-size: 14px; font-weight: bold; margin-top: 6px; }
| |
| .pv-item.active {
| |
| box-shadow: 0 0 0 2px #3b82f6;
| |
| }
| |
| .pv-right { flex: 1; min-width: 400px; }
| |
| .pv-player-box iframe {
| |
| width: 100%;
| |
| aspect-ratio: 16/9;
| |
| border-radius: 12px;
| |
| }
| |
| </style>
| |
|
| |
| <script>
| |
| function switchPV(el) {
| |
| var videoId = el.getAttribute('data-yt');
| |
| var iframe = document.getElementById('pv-main-iframe');
| |
| iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1&rel=0&modestbranding=1';
| |
|
| |
| // 高亮
| |
| document.querySelectorAll('.pv-item').forEach(function(n){
| |
| n.classList.remove('active');
| |
| });
| |
| el.classList.add('active');
| |
| }
| |
| </script>
| |
