|
|
| （未显示同一用户的1个中间版本） |
| 第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 class="pv-layout"> | | </div> |
| | |
| <!-- 左侧卡片区域 --> | |
| <div class="pv-left">
| |
|
| |
|
| <div class=" pv- item" data-yt="k1G8EvZg_BY" onclick="switchPV(this)"> | | <div style=" display:flex; gap:20px; flex- wrap:wrap;"> |
| <img src="https://img.youtube.com/vi/k1G8EvZg_BY/hqdefault.jpg" />
| | <div style="flex:1; min-width:180px;"> |
| <div class="pv-title">Fate/strange Fake ｜ 第1弾PV（测试用）</div> | | [[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> |
| | | <div style="flex:1; min-width:180px;"> |
| </div>
| | [[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>]] |
| | |
| <!-- 右侧播放器 -->
| |
| <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> | | </div> |
|
| |
| <!-- 样式区 -->
| |
| <style>
| |
| .pv-layout {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| 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) {
| |
| const videoId = el.getAttribute('data-yt');
| |
| const iframe = document.getElementById('pv-main-iframe');
| |
|
| |
| if (!videoId || !iframe) return;
| |
|
| |
| // 替换 iframe src
| |
| iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0&modestbranding=1`;
| |
|
| |
| // 设置卡片高亮
| |
| document.querySelectorAll('.pv-item').forEach(function(item) {
| |
| item.classList.remove('active');
| |
| });
| |
| el.classList.add('active');
| |
| }
| |
| </script>
| |
