# [メタ情報]
# 識別子: ダウンロードOK動画パッケージphp_exe
# システム名: 
# 技術種別: Misc
# 機能名: Misc
# 使用言語: php
# 状態: 実行用
# [/メタ情報]
要約：
このテキストは、WordPressで動画を埋め込むための4種類のPHPテンプレートファイル（dr5, dr6, ds52, ds62）について記述しています。これらは、URLの`drid`パラメータを基に`videoct.json`から動画情報を取得・表示します。
共通機能として、Google翻訳への対応（ただし翻訳UIはCSSで非表示）、動画のダウンロード防止、右クリック禁止、Picture-in-Picture対応を強化しています。また、高画質/低画質、枠内/枠外字幕の切り替えリンクを提供します。
`dr5.php`と`dr6.php`は、それぞれ高画質と低画質の動画を、動画枠内に字幕をオーバーレイ表示します。字幕リストが付属し、クリックで動画シーク、動画再生に合わせてリストが自動スクロール・ハイライトされる機能があります。
一方、`ds52.php`と`ds62.php`は、それぞれ高画質と低画質の動画を、動画の下に「枠外字幕」として表示します。特にGoogle翻訳時の表示安定性（“パカパカ”抑止）を重視した差分描画ロジックが特徴です。これらのテンプレートには、`rd.php`を利用した動的コンテンツ配信や直リンクへのフォールバックを自動決定するIDプローブ機能、および診断機能が組み込まれています。



dr5.php

```
<?php
/*
Template Name: Dropbox With Subtitle Template (dr5) - High Quality / Inside Subtitles (Overlay + PiP-safe + InternalScroll + Protection + NormalFont)
*/

function get_dropbox_data() {
    $url = $_SERVER['REQUEST_URI'];
    if (strpos($url, 'drid=') !== false) {
        $parts  = explode('drid=', $url);
        $params = explode('&', end($parts));
        return $params[0];
    }
    return false;
}

function get_custom_data($url) {
    return file_get_contents($url);
}

get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gk-topbar-video" style="display:flex; gap:8px; align-items:center; justify-content:flex-start; width:100%; padding:6px 10px; background:#f9f9f9; border-bottom:1px solid #e5e5e5; box-sizing:border-box; font-family:sans-serif; position:relative; z-index:100;">
    <div id="google_translate_element_video"></div>
    <a href="https://gemini.google.com/gem/1yilwupQm0LXm0iIqjU66YfaMlrHJTULi?usp=sharing" target="_blank" rel="noopener noreferrer" style="margin-left:auto; text-decoration:none; line-height:0;">
        <img src="https://XXXXXX.com/rd.php?id=tVo8al62.png" alt="Gemini Q&A" style="height:30px; width:auto; border-radius:4px;">
    </a>
</div>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

$drid = get_dropbox_data();

if ($drid) {
    $json_url  = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $json_data = file_get_contents($json_url);

    if ($json_data !== false) {
        $videos     = json_decode($json_data, true);
        $video_info = array_filter($videos, function ($video) use ($drid) {
            return (string)$video['videoid'] === (string)$drid;
        });

        if (!empty($video_info)) {
            $video_info        = reset($video_info);
            $image_url         = $video_info['image']         ?? '';
            $video_url         = $video_info['video']         ?? '';
            $subtitle_url      = $video_info['subtitle']      ?? '';
            $subtitle_list_url = $video_info['subtitle_list'] ?? '';
            $explain_line_url  = $video_info['explain_line']  ?? '';

            // ---- Styles ----
            echo '<style>
            :root{ --dr5-max: 1920px; }

            .radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline}
            .radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

            .video-wrap{position:relative;width:100%;margin:0 auto}
            figure.wp-block-video.aligncenter{
              width:100%;
              max-width:min(var(--dr5-max, 1920px), 98vw);
              margin:0 auto;
            }

            /* 枠内オーバーレイ */
            #subtitleOverlay{
              position:absolute; left:0; right:0; bottom:6%;
              padding:0 2%; text-align:center; pointer-events:none; z-index:2;
            }
            #subtitleOverlay .band{
              display:inline-block; background:rgba(0,0,0,0.35);
              padding:6px 10px; border-radius:8px; max-width:96%;
              margin:0 auto; box-shadow:0 1px 2px rgba(0,0,0,0.15);
            }
            #subtitleOverlay .overlay-cue{
              color:#fff; font-weight:600;
              font-size:clamp(16px, 3.6vw, 32px);
              line-height:1.32; white-space:pre-wrap; margin:2px 0;
              -webkit-text-stroke:.6px rgba(0,0,0,.7);
              text-shadow:-1px -1px 0 rgba(0,0,0,.6), 1px -1px 0 rgba(0,0,0,.6),
                          -1px  1px 0 rgba(0,0,0,.6), 1px  1px 0 rgba(0,0,0,.6);
            }
            @media (max-width:430px){
              #subtitleOverlay .overlay-cue{ font-size:clamp(16px, 4.2vw, 22px); }
            }
            @media (orientation:landscape) and (max-width:920px){
              #subtitleOverlay{ bottom:8%; }
              #subtitleOverlay .overlay-cue{ font-size:clamp(18px, 4.8vh, 36px); }
            }

            /* ▼ 字幕一覧（details） */
            .dr5-sublist details > p{
              height:200px;
              overflow:auto;
              background-color:#EDF7FF;
              padding:2px 6px; margin:0;
              box-shadow:3px 3px 4px black;
              position: relative; /* 座標計算のために必要 */
            }
            .dr5-sublist details > summary{
              padding:2px 6px; width:100%;
              background-color:#ddd; border:none;
              box-shadow:3px 3px 4px black;
              cursor:pointer; list-style:none;
            }
            
            /* ▼ 自動スクロール時のハイライト（文字の太さを標準へ変更） */
            .active-hl {
                background-color: #ffff00 !important;
                color: #ff0000 !important;
                font-weight: normal; /* 標準の太さ */
                border-bottom: 2px solid red;
                display: inline-block;
                border-radius: 2px;
            }
            </style>';

            echo '<div class="dr5-container">';

            // ---- 切替リンク ----
            echo '<div style="text-align:left;margin:10px 0 5px 0;">';
            echo '<span class="radio-label selected">高画質</span> ';
            echo '<a href="https://XXXXXX.com/dr6/?drid=' . esc_attr($drid) . '" class="radio-label">低画質</a>';
            echo '<span style="margin:0 10px;">｜</span>';
            echo '<span class="radio-label selected">枠内字幕</span> ';
            echo '<a href="https://XXXXXX.com/ds5/?drid=' . esc_attr($drid) . '" class="radio-label">枠外字幕</a>';
            echo '</div>';

            // ---- 動画 ----
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video_url)) {
                echo '<div class="video-wrap">';
                // ダウンロード防止・右クリック防止属性を追加
                echo '<video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="metadata"'
                   . ' oncontextmenu="return false;" controlsList="nodownload noplaybackrate" disablePictureInPicture draggable="false"'
                   . ' style="width:100%;height:auto;">';
                echo '  <source src="' . esc_url($video_url) . '" type="video/mp4">';
                if (!empty($subtitle_url)) {
                    echo '  <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles">';
                }
                echo '</video>';
                echo '<div id="subtitleOverlay" aria-hidden="true"></div>';
                echo '</div>';

                // ---- JS：字幕オーバーレイ ＋ 右クリック完全禁止 ----
                echo '<script>
document.addEventListener("DOMContentLoaded", function(){
  var video   = document.getElementById("myVideo");
  var trackEl = video ? video.querySelector("track[kind=\'subtitles\'], track[kind=\'captions\']") : null;
  var overlay = document.getElementById("subtitleOverlay");
  if(!video || !overlay) return;

  // 右クリックメニューを強制的に無効化
  video.addEventListener("contextmenu", function(e){ e.preventDefault(); return false; }, false);

  function setNative(mode){
    try{
      if(video.textTracks && video.textTracks.length){
        for(var i=0;i<video.textTracks.length;i++){ video.textTracks[i].mode = mode; }
      }
      if(trackEl && trackEl.track) trackEl.track.mode = mode;
    }catch(e){}
  }

  var isOverlay = true, lastSig = "";
  function sig(active){
    if(!active || active.length===0) return "";
    var a=[]; for(var i=0;i<active.length;i++){ var c=active[i]; a.push([c.startTime,c.endTime,c.text].join("|")); }
    return a.join("||");
  }
  function cueLine(cue){
    var div=document.createElement("div");
    div.className="overlay-cue"; div.setAttribute("translate","yes");
    if(typeof cue.getCueAsHTML === "function") div.appendChild(cue.getCueAsHTML()); else div.textContent = cue.text;
    return div;
  }
  function render(){
    if(!isOverlay || !trackEl || !trackEl.track) return;
    var active = trackEl.track.activeCues, s = sig(active);
    if(s===lastSig) return; lastSig = s;
    overlay.innerHTML=""; if(!active || active.length===0) return;
    var band=document.createElement("div"); band.className="band"; band.setAttribute("translate","yes");
    Array.from(active).sort(function(a,b){return a.startTime-b.startTime;})
      .forEach(function(c){ band.appendChild(cueLine(c)); });
    overlay.appendChild(band);
  }
  function useOverlay(){ isOverlay=true; overlay.style.display=""; setNative("hidden"); lastSig=""; render(); }
  function useNative(){ isOverlay=false; overlay.style.display="none"; setNative("showing"); lastSig=""; }

  useOverlay();
  if(trackEl){
    if(trackEl.track){ try{ trackEl.track.addEventListener("cuechange", render); }catch(e){} }
    trackEl.addEventListener("load", function(){ try{ if(trackEl.track) trackEl.track.addEventListener("cuechange", render); }catch(e){} render(); });
  }
  video.addEventListener("loadedmetadata", render);

  function handleWebkitMode(){ var m = video.webkitPresentationMode || "inline"; (m==="picture-in-picture"||m==="fullscreen") ? useNative() : useOverlay(); }
  if("webkitPresentationMode" in video){ video.addEventListener("webkitpresentationmodechanged", handleWebkitMode); handleWebkitMode(); }
  if("webkitCurrentPlaybackTargetIsWireless" in video){
    video.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", function(){
      video.webkitCurrentPlaybackTargetIsWireless ? useNative() : useOverlay();
    });
  }
  if("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useNative);
    video.addEventListener("leavepictureinpicture", useOverlay);
  }
  document.addEventListener("fullscreenchange", function(){
    var fs = document.fullscreenElement;
    if(!fs) return useOverlay();
    (fs===video || (fs && fs.contains && fs.contains(video))) ? useNative() : useOverlay();
  });
});
</script>';
            } else {
                echo '<p style="text-align:center;color:red;font-weight:bold;margin-top:20px;">（この動画の高画質版は準備中です）</p>';
            }
            echo '<figcaption></figcaption>';
            echo '</figure>';

            // ---- 字幕一覧（スクロールボックス）----
            if (!empty($subtitle_list_url)) {
                echo '<div class="dr5-sublist">';
                echo get_custom_data($subtitle_list_url); 
                echo '</div>';

                // ★クリックシーク ＆ 自動スクロール（箱の中だけスクロール版）
                echo '<script>
(function(){
  var root = document.querySelector(".dr5-sublist");
  var video = document.getElementById("myVideo");
  if(!root || !video) return;

  // 時間変換関数
  function parseTs(ts){
    if(!ts) return null;
    var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
    if(p.length===2) return p[0]*60 + p[1];
    if(p.length===3) return p[0]*3600 + p[1]*60 + p[2];
    return null;
  }

  // 1. クリックでシーク
  root.addEventListener("click", function(e){
    var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
    if(!a || !root.contains(a)) return;
    e.preventDefault();
    var sec = parseTs(a.getAttribute("data-seek"));
    if(sec==null) return;
    try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
  });

  // 2. 自動スクロール（ページ全体を動かさず、リスト内だけ回す）
  video.addEventListener("timeupdate", function(){
    var listContainer = root.querySelector("details > p");
    if(!listContainer) return;
    
    var cues = listContainer.querySelectorAll("a.imk-cue");
    if(cues.length === 0) return;

    var cur = video.currentTime;
    var active = null;

    // 現在の時間に合う行を探す
    for(var i=0; i<cues.length; i++){
        var t = parseTs(cues[i].getAttribute("data-seek"));
        if(t !== null && cur >= t - 0.5){
            active = cues[i];
        } else if(t > cur){
            break;
        }
    }

    // ハイライトとスクロール実行
    if(active){
        if(active.classList.contains("active-hl")) return;

        // ハイライト切替
        var old = listContainer.querySelectorAll(".active-hl");
        for(var k=0; k<old.length; k++) old[k].classList.remove("active-hl");
        active.classList.add("active-hl");

        // 自動スクロール（detailsが開いている時のみ）
        if(listContainer.offsetParent !== null){
            // 座標計算してスクロール位置を指定
            var containerRect = listContainer.getBoundingClientRect();
            var activeRect = active.getBoundingClientRect();
            
            // 現在のスクロール位置 + (要素の画面位置 - コンテナの画面位置) - (コンテナの高さ半分) + (要素の高さ半分)
            var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (active.clientHeight / 2);
            
            listContainer.scrollTo({
                top: targetScroll,
                behavior: "smooth"
            });
        }
    }
  });

})();
</script>';
            }

            // ---- 説明文 ----
            if (!empty($explain_line_url)) {
                echo '<div style="text-align:left;">';
                echo '<p>' . nl2br(get_custom_data($explain_line_url)) . '</p>';
                echo '</div>';
            }

            echo '</div>'; // .dr5-container
        } else {
            echo '<p>動画はまだ準備中です。</p>';
        }
    } else {
        echo '<p>JSONデータの取得に失敗しました。</p>';
    }
} else {
    echo '<p>dridが指定されていません。</p>';
}

if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;

get_footer();
?>
```



dr6.php

```
<?php
/*
Template Name: Dropbox With Subtitle Template (dr6) - Low Quality / Inside Subtitles (Overlay + PiP-safe + InternalScroll + Protection + NormalFont)
*/

function get_dropbox_data() {
    $url = $_SERVER['REQUEST_URI'];
    if (strpos($url, 'drid=') !== false) {
        $parts  = explode('drid=', $url);
        $params = explode('&', end($parts));
        return $params[0];
    }
    return false;
}

function get_custom_data($url) {
    return file_get_contents($url);
}

get_header();

?>
<style>
/* Google翻訳のポップアップ（原文吹き出し）を隠す */
.goog-te-balloon-frame, 
.goog-tooltip, 
#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
/* 翻訳箇所のハイライト（背景色・影）を消す */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* 翻訳ツールバー（上部の帯）を消す */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}
body {
    top: 0px !important;
}
</style>

<div id="gk-topbar-video" style="display:flex; gap:8px; align-items:center; justify-content:flex-start; width:100%; padding:6px 10px; background:#f9f9f9; border-bottom:1px solid #e5e5e5; box-sizing:border-box; font-family:sans-serif; position:relative; z-index:100;">
    <div id="google_translate_element_video"></div>
    <a href="https://gemini.google.com/gem/1yilwupQm0LXm0iIqjU66YfaMlrHJTULi?usp=sharing" target="_blank" rel="noopener noreferrer" style="margin-left:auto; text-decoration:none; line-height:0;">
        <img src="https://XXXXXX.com/rd.php?id=tVo8al62.png" alt="Gemini Q&A" style="height:30px; width:auto; border-radius:4px;">
    </a>
</div>

<script>
function initVideoTranslate() {
    if (window.google && google.translate && google.translate.TranslateElement) {
        new google.translate.TranslateElement({
            pageLanguage: 'ja',
            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            autoDisplay: false,
            includedLanguages: 'ja,en,zh-CN,id,ko,hi,pt,es,de,fr,it,ru'
        }, 'google_translate_element_video');
    }
}
if (!window.google || !google.translate) {
    var gtScript = document.createElement('script');
    gtScript.src = 'https://translate.google.com/translate_a/element.js?cb=initVideoTranslate';
    gtScript.async = true;
    document.head.appendChild(gtScript);
} else { setTimeout(initVideoTranslate, 500); }
</script>
<?php

$drid = get_dropbox_data();

if ($drid) {
    $json_url  = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $json_data = file_get_contents($json_url);

    if ($json_data !== false) {
        $videos     = json_decode($json_data, true);
        $video_info = array_filter($videos, function ($video) use ($drid) {
            return (string)$video['videoid'] === (string)$drid;
        });

        if (!empty($video_info)) {
            $video_info        = reset($video_info);
            $image_url         = $video_info['image']         ?? '';
            $video_url         = $video_info['video']         ?? '';   // High quality (unused here)
            $video2_url        = $video_info['video2']        ?? '';   // Low quality (used here)
            $subtitle_url      = $video_info['subtitle']      ?? '';
            $subtitle_list_url = $video_info['subtitle_list'] ?? '';
            $explain_line_url  = $video_info['explain_line']  ?? '';

            // ---- Styles ----
            echo '<style>
            :root{ --dr6-max: 1920px; }

            .radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline}
            .radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

            .video-wrap{position:relative;width:100%;margin:0 auto}
            figure.wp-block-video.aligncenter{
              width:100%;
              max-width:min(var(--dr6-max, 1920px), 98vw);
              margin:0 auto;
            }

            /* Overlay Subtitles */
            #subtitleOverlay{
              position:absolute; left:0; right:0; bottom:6%;
              padding:0 2%; text-align:center; pointer-events:none; z-index:2;
            }
            #subtitleOverlay .band{
              display:inline-block; background:rgba(0,0,0,0.35);
              padding:6px 10px; border-radius:8px; max-width:96%;
              margin:0 auto; box-shadow:0 1px 2px rgba(0,0,0,0.15);
            }
            #subtitleOverlay .overlay-cue{
              color:#fff; font-weight:600;
              font-size:clamp(16px, 3.6vw, 32px);
              line-height:1.32; white-space:pre-wrap; margin:2px 0;
              -webkit-text-stroke:.6px rgba(0,0,0,.7);
              text-shadow:-1px -1px 0 rgba(0,0,0,.6), 1px -1px 0 rgba(0,0,0,.6),
                          -1px  1px 0 rgba(0,0,0,.6), 1px  1px 0 rgba(0,0,0,.6);
            }
            @media (max-width:430px){
              #subtitleOverlay .overlay-cue{ font-size:clamp(16px, 4.2vw, 22px); }
            }
            @media (orientation:landscape) and (max-width:920px){
              #subtitleOverlay{ bottom:8%; }
              #subtitleOverlay .overlay-cue{ font-size:clamp(18px, 4.8vh, 36px); }
            }

            /* Subtitle List (Details) */
            .dr6-sublist details > p{
              height:200px;
              overflow:auto;
              background-color:#EDF7FF;
              padding:2px 6px; margin:0;
              box-shadow:3px 3px 4px black;
              position: relative; /* Necessary for scroll calculation */
            }
            .dr6-sublist details > summary{
              padding:2px 6px; width:100%;
              background-color:#ddd; border:none;
              box-shadow:3px 3px 4px black;
              cursor:pointer; list-style:none;
            }
            
            /* Auto-scroll Highlight (Normal Font Weight) */
            .active-hl {
                background-color: #ffff00 !important;
                color: #ff0000 !important;
                font-weight: normal; /* Standard font weight */
                border-bottom: 2px solid red;
                display: inline-block;
                border-radius: 2px;
            }
            </style>';

            echo '<div class="dr6-container">';

            // ---- Switch Links ----
            echo '<div style="text-align:left;margin:10px 0 5px 0;">';
            echo '<a href="https://XXXXXX.com/dr5/?drid=' . esc_attr($drid) . '" class="radio-label">高画質</a> ';
            echo '<span class="radio-label selected">低画質</span>';
            echo '<span style="margin:0 10px;">｜</span>';
            echo '<span class="radio-label selected">枠内字幕</span> ';
            echo '<a href="https://XXXXXX.com/ds6/?drid=' . esc_attr($drid) . '" class="radio-label">枠外字幕</a>';
            echo '</div>';

            // ---- Video Player ----
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video2_url)) {
                echo '<div class="video-wrap">';
                // Added controlsList="nodownload", disablePictureInPicture, draggable="false" and oncontextmenu="return false;"
                echo '<video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="metadata"'
                   . ' oncontextmenu="return false;" controlsList="nodownload noplaybackrate" disablePictureInPicture draggable="false"'
                   . ' style="width:100%;height:auto;">';
                echo '  <source src="' . esc_url($video2_url) . '" type="video/mp4">'; // Low quality source
                if (!empty($subtitle_url)) {
                    echo '  <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles">';
                }
                echo '</video>';
                echo '<div id="subtitleOverlay" aria-hidden="true"></div>';
                echo '</div>';

                // ---- JS: Subtitle Overlay + Right Click Protection ----
                echo '<script>
document.addEventListener("DOMContentLoaded", function(){
  var video   = document.getElementById("myVideo");
  var trackEl = video ? video.querySelector("track[kind=\'subtitles\'], track[kind=\'captions\']") : null;
  var overlay = document.getElementById("subtitleOverlay");
  if(!video || !overlay) return;

  // Force disable context menu via JS
  video.addEventListener("contextmenu", function(e){ e.preventDefault(); return false; }, false);

  function setNative(mode){
    try{
      if(video.textTracks && video.textTracks.length){
        for(var i=0;i<video.textTracks.length;i++){ video.textTracks[i].mode = mode; }
      }
      if(trackEl && trackEl.track) trackEl.track.mode = mode;
    }catch(e){}
  }

  var isOverlay = true, lastSig = "";
  function sig(active){
    if(!active || active.length===0) return "";
    var a=[]; for(var i=0;i<active.length;i++){ var c=active[i]; a.push([c.startTime,c.endTime,c.text].join("|")); }
    return a.join("||");
  }
  function cueLine(cue){
    var div=document.createElement("div");
    div.className="overlay-cue"; div.setAttribute("translate","yes");
    if(typeof cue.getCueAsHTML === "function") div.appendChild(cue.getCueAsHTML()); else div.textContent = cue.text;
    return div;
  }
  function render(){
    if(!isOverlay || !trackEl || !trackEl.track) return;
    var active = trackEl.track.activeCues, s = sig(active);
    if(s===lastSig) return; lastSig = s;
    overlay.innerHTML=""; if(!active || active.length===0) return;
    var band=document.createElement("div"); band.className="band"; band.setAttribute("translate","yes");
    Array.from(active).sort(function(a,b){return a.startTime-b.startTime;})
      .forEach(function(c){ band.appendChild(cueLine(c)); });
    overlay.appendChild(band);
  }
  function useOverlay(){ isOverlay=true; overlay.style.display=""; setNative("hidden"); lastSig=""; render(); }
  function useNative(){ isOverlay=false; overlay.style.display="none"; setNative("showing"); lastSig=""; }

  useOverlay();
  if(trackEl){
    if(trackEl.track){ try{ trackEl.track.addEventListener("cuechange", render); }catch(e){} }
    trackEl.addEventListener("load", function(){ try{ if(trackEl.track) trackEl.track.addEventListener("cuechange", render); }catch(e){} render(); });
  }
  video.addEventListener("loadedmetadata", render);

  function handleWebkitMode(){ var m = video.webkitPresentationMode || "inline"; (m==="picture-in-picture"||m==="fullscreen") ? useNative() : useOverlay(); }
  if("webkitPresentationMode" in video){ video.addEventListener("webkitpresentationmodechanged", handleWebkitMode); handleWebkitMode(); }
  if("webkitCurrentPlaybackTargetIsWireless" in video){
    video.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", function(){
      video.webkitCurrentPlaybackTargetIsWireless ? useNative() : useOverlay();
    });
  }
  if("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useNative);
    video.addEventListener("leavepictureinpicture", useOverlay);
  }
  document.addEventListener("fullscreenchange", function(){
    var fs = document.fullscreenElement;
    if(!fs) return useOverlay();
    (fs===video || (fs && fs.contains && fs.contains(video))) ? useNative() : useOverlay();
  });
});
</script>';
            } else {
                echo '<p style="text-align:center;color:red;font-weight:bold;margin-top:20px;">（この動画の低画質版は準備中です）</p>';
            }
            echo '<figcaption></figcaption>';
            echo '</figure>';

            // ---- Subtitle List (Scroll Box) ----
            if (!empty($subtitle_list_url)) {
                echo '<div class="dr6-sublist">';
                echo get_custom_data($subtitle_list_url); 
                echo '</div>';

                // JS: Click Seek & Auto-Scroll (Internal Scroll)
                echo '<script>
(function(){
  var root = document.querySelector(".dr6-sublist");
  var video = document.getElementById("myVideo");
  if(!root || !video) return;

  function parseTs(ts){
    if(!ts) return null;
    var p = ts.trim().split(":").map(function(x){return parseInt(x,10)||0;});
    if(p.length===2) return p[0]*60 + p[1];
    if(p.length===3) return p[0]*3600 + p[1]*60 + p[2];
    return null;
  }

  // 1. Click to Seek
  root.addEventListener("click", function(e){
    var a = e.target.closest && e.target.closest("a.imk-cue[data-seek]");
    if(!a || !root.contains(a)) return;
    e.preventDefault();
    var sec = parseTs(a.getAttribute("data-seek"));
    if(sec==null) return;
    try{ video.currentTime = sec; if(video.paused) video.play(); }catch(_){}
  });

  // 2. Auto-Scroll (Internal Scroll)
  video.addEventListener("timeupdate", function(){
    var listContainer = root.querySelector("details > p");
    if(!listContainer) return;
    
    var cues = listContainer.querySelectorAll("a.imk-cue");
    if(cues.length === 0) return;

    var cur = video.currentTime;
    var active = null;

    for(var i=0; i<cues.length; i++){
        var t = parseTs(cues[i].getAttribute("data-seek"));
        if(t !== null && cur >= t - 0.5){
            active = cues[i];
        } else if(t > cur){
            break;
        }
    }

    if(active){
        if(active.classList.contains("active-hl")) return;

        var old = listContainer.querySelectorAll(".active-hl");
        for(var k=0; k<old.length; k++) old[k].classList.remove("active-hl");
        active.classList.add("active-hl");

        if(listContainer.offsetParent !== null){
            var containerRect = listContainer.getBoundingClientRect();
            var activeRect = active.getBoundingClientRect();
            var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (active.clientHeight / 2);
            listContainer.scrollTo({ top: targetScroll, behavior: "smooth" });
        }
    }
  });

})();
</script>';
            }

            // ---- Explanation ----
            if (!empty($explain_line_url)) {
                echo '<div style="text-align:left;">';
                echo '<p>' . nl2br(get_custom_data($explain_line_url)) . '</p>';
                echo '</div>';
            }

            echo '</div>'; // .dr6-container
        } else {
            echo '<p>動画はまだ準備中です。</p>';
        }
    } else {
        echo '<p>JSONデータの取得に失敗しました。</p>';
    }
} else {
    echo '<p>dridが指定されていません。</p>';
}

// Fixed Page Content
if (have_posts()) : while (have_posts()) : the_post();
    the_content();
endwhile; endif;

get_footer();
?>
```

ds52.php

```
<?php
/*
Template Name: Dropbox Without Subtitle Template (ds52)
- High Quality / Outside Subtitle (wide, stable)
- rd.php未変更 / 自動IDプローブ / 診断 / 直リンクフォールバック / ?id=対応
*/
if (!defined('ABSPATH')) { exit; }

/* ========= ユーティリティ ========= */
function ds52_get_drid(): string {
    if (isset($_GET['drid'])) return trim((string)$_GET['drid']);
    $uri = $_SERVER['REQUEST_URI'] ?? '';
    if ($uri && preg_match('#/ds52/([^/?&]+)#', $uri, $m)) return $m[1];
    return '';
}
function ds52_http_get(string $url, int $timeout = 10): ?string {
    $res = wp_remote_get($url, [
        'timeout' => $timeout,
        'headers' => ['User-Agent' => 'ds52/1.4'],
    ]);
    if (is_wp_error($res)) return null;
    $code = (int) wp_remote_retrieve_response_code($res);
    if ($code < 200 || $code >= 300) return null;
    $body = wp_remote_retrieve_body($res);
    return ($body !== '') ? $body : null;
}
function ds52_fetch_videoct(): ?array {
    $json_url = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $body = ds52_http_get($json_url, 12);
    if ($body === null) return null;
    $data = json_decode($body, true);
    return is_array($data) ? $data : null;
}
function ds52_find_video(array $rows, string $drid): ?array {
    foreach ($rows as $r) {
        if (isset($r['videoid']) && (string)$r['videoid'] === (string)$drid) return $r;
    }
    return null;
}
/** URL→wpidex 抽出（rd.php?id=... / 直リンク両対応） */
function ds52_extract_wpidex_from_url(?string $u): string {
    if (!$u) return '';
    $p = parse_url($u);
    if (!empty($p['query'])) {
        parse_str($p['query'], $qs);
        if (!empty($qs['id'])) {
            $id = (string)$qs['id'];
            $id = preg_replace('/\.(mp4|m4v|mov|mp3|m4a|wav|jpg|jpeg|png|gif|webp|vtt|srt|txt)$/i', '', $id);
            return $id ?: '';
        }
    }
    $path = $p['path'] ?? '';
    if ($path === '') return '';
    $base = basename($path);
    $id = preg_replace('/\.(mp4|m4v|mov|mp3|m4a|wav|jpg|jpeg|png|gif|webp|vtt|srt|txt|php)$/i', '', $base);
    return $id ?: '';
}
/* rd.php へのHEADで到達性チェック（200/206/302ならOK） */
function ds52_try_rd(string $id): int {
    if ($id === '') return -1;
    $rd_abs = rtrim(home_url('/rd.php'), '/');
    $url    = $rd_abs . '?id=' . rawurlencode($id) . '&mode=dynamic';
    $head   = wp_remote_head($url, ['timeout'=>8, 'headers'=>['Range'=>'bytes=0-1']]);
    if (is_wp_error($head)) return -1;
    return (int) wp_remote_retrieve_response_code($head);
}
/* 候補IDを順に試し、最初に2xx/3xxのidを返す */
function ds52_probe_id(array $candidates, array &$diag_log): ?array {
    $seen = [];
    foreach ($candidates as $cand) {
        $cand = trim((string)$cand);
        if ($cand === '') continue;
        $key = strtolower($cand);
        if (isset($seen[$key])) continue;
        $seen[$key] = true;
        $code = ds52_try_rd($cand);
        $diag_log[] = sprintf('probe id="%s" -> %d', $cand, $code);
        if ($code >= 200 && $code < 400) return ['id' => $cand, 'code' => $code];
    }
    return null;
}

/* ========= 本体 ========= */
get_header();

$drid         = ds52_get_drid();
$diag         = isset($_GET['diag']) ? 1 : 0;
$rid_override = isset($_GET['rid']) ? trim((string)$_GET['rid']) : ''; // rd.php id を強制上書き
$force_direct = (!empty($_GET['force']) && $_GET['force'] === 'direct'); // 直リンク再生

echo '<div class="ds5-shell" style="width:100%;max-width:min(1920px,98vw);margin:0 auto;">';

if ($drid === '') {
    echo '<p style="color:red;font-weight:bold">drid が指定されていません。（例：?drid=XXXX）</p>';
    echo '</div>'; get_footer(); return;
}

$rows = ds52_fetch_videoct();
if (!$rows) {
    echo '<p style="color:red;font-weight:bold">JSONデータの取得に失敗しました。（videoct.json）</p>';
    echo '</div>'; get_footer(); return;
}

$v = ds52_find_video($rows, $drid);
if (!$v) {
    echo '<p style="color:red;font-weight:bold">該当IDが見つかりません：' . esc_html($drid) . '</p>';
    echo '</div>'; get_footer(); return;
}

$image_url    = (string)($v['image']    ?? '');
$video_url    = (string)($v['video']    ?? '');   // ★高画質（使用）
$video2_url   = (string)($v['video2']   ?? '');   // 低画質（リンク先で使用）
$subtitle_url = (string)($v['subtitle'] ?? '');

/* ====== rd.phpに渡す id を自動決定（高画質優先） ====== */
$rd_abs   = rtrim(home_url('/rd.php'), '/');
$diag_log = [];

if ($rid_override !== '') {
    $chosen_id   = $rid_override;
    $chosen_code = ds52_try_rd($chosen_id);
    $diag_log[]  = sprintf('override id="%s" code=%d', $chosen_id, $chosen_code);
} else {
    $cands = [];
    $cands[] = ds52_extract_wpidex_from_url($video_url);     // 高画質を最優先
    $cands[] = ds52_extract_wpidex_from_url($subtitle_url);
    $cands[] = ds52_extract_wpidex_from_url($image_url);
    $cands[] = $drid;                                        // 保険
    $more = [];
    foreach ($cands as $c) { if (!$c) continue; $more[] = strtolower($c); $more[] = strtoupper($c); }
    $cands = array_merge($cands, $more);

    $picked = ds52_probe_id($cands, $diag_log);
    if ($picked) { $chosen_id = $picked['id']; $chosen_code = $picked['code']; }
    else { $chosen_id = ''; $chosen_code = -1; }
}

/* 再生ソース決定：通常は rd.php（dynamic）／?force=direct=1 なら直リンク(video) */
$stream_src = '';
if ($force_direct && !empty($video_url)) {
    $stream_src = $video_url; // 直リンク
    $diag_log[] = 'force_direct=1 → stream_src = direct high-quality URL';
} else {
    if ($chosen_id !== '') {
        $stream_src = $rd_abs . '?id=' . rawurlencode($chosen_id) . '&mode=dynamic';
        $diag_log[] = 'stream_src via rd.php (mode=dynamic)';
    } else {
        $stream_src = $video_url; // 黒画面回避の保険
        $diag_log[] = 'chosen_id empty → fallback to direct high-quality URL';
    }
}

/* ====== スタイル（dr52/dr62と統一） ====== */
?>
<style>
:root{ --ds5-max: 1920px; }
.radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline;white-space:nowrap}
.radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

/* 動画と枠外字幕を同じ幅で束ねる外枠 */
.ds5-shell{
  width:100%;
  max-width:min(var(--ds5-max, 1920px), 98vw);
  margin:0 auto;
}
/* Gutenberg の既定 max-width の影響対策 */
figure.wp-block-video.aligncenter{
  width:100%;
  max-width:min(var(--ds5-max, 1920px), 98vw);
  margin:0 auto;
}
#myVideo{ width:100%; height:auto; display:block; background:#000; min-height:200px; }

/* 枠外字幕（動画の外＝下に出す） */
#subtitleData{
  color: blue;             /* ご要望の青 */
  margin-top: 8px;
  line-height: 1.4;
  white-space: pre-wrap;
  font-size: clamp(16px, 2.0vw, 22px);
}
#subtitleData .ext-subcue{ margin: 2px 0; }

/* 小さい画面は少し字を大きめに */
@media (max-width:430px){
  #subtitleData{ font-size: clamp(16px, 4.2vw, 22px); }
}
</style>
<?php

/* ====== 切替リンク（4項目：高画質／低画質｜枠内字幕／枠外字幕） ====== */
echo '<div style="text-align:left;margin:10px 0 8px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center">';
echo '  <span class="radio-label selected">高画質</span> ';
echo '  <a class="radio-label" href="' . esc_url(home_url('/dr62/?drid=' . $drid)) . '">低画質</a>';
echo '  <span style="opacity:.4;">｜</span>';
echo '  <a class="radio-label" href="' . esc_url(home_url('/dr52/?drid=' . $drid)) . '">枠内字幕</a>';
echo '  <span class="radio-label selected">枠外字幕</span>';
echo '</div>';

/* ====== 診断（必要時のみ） ====== */
if ($diag) {
    echo '<details style="margin:6px 0" open><summary>診断（ds52）</summary><pre style="white-space:pre-wrap;font-size:12px;background:#f7f7f7;padding:8px;border:1px solid #ddd;">';
    $diag_txt =
        "drid={$drid}\n".
        "video_url={$video_url}\n".
        "subtitle_url={$subtitle_url}\n".
        "image_url={$image_url}\n".
        "chosen_id={$chosen_id}\n".
        "chosen_code={$chosen_code}\n".
        "force_direct=" . ($force_direct ? '1' : '0') . "\n".
        "stream_src={$stream_src}\n".
        "--- probe log ---\n".implode("\n", $diag_log)."\n";
    echo esc_html($diag_txt);
    echo "</pre></details>";

    $head = wp_remote_head($stream_src, ['timeout'=>8,'headers'=>['Range'=>'bytes=0-1']]);
    $code = is_wp_error($head) ? -1 : (int)wp_remote_retrieve_response_code($head);
    $href = esc_url(add_query_arg('diag','1',$stream_src));
    echo '<div style="margin:6px 0 12px 0;font-size:13px">';
    echo 'HEADチェックコード：<b>'.$code.'</b> ／ <a href="'.$href.'" target="_blank" rel="noopener">再生ソースの診断を新規タブで開く</a>';
    echo '</div>';
}

/* ====== 動画（枠外字幕：ネイティブ字幕は非表示にして下に描画） ====== */
echo '<figure class="wp-block-video aligncenter">';
echo '  <video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="metadata"'
   . ' oncontextmenu="return false;" controlsList="nodownload noplaybackrate" disablePictureInPicture draggable="false"'
   . ' style="user-select:none;-webkit-user-select:none;touch-action:none;">';
if (!empty($video_url)) {
    echo '    <source src="' . esc_url($stream_src) . '" type="video/mp4">';
}
if (!empty($subtitle_url)) {
    echo '    <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles">';
}
echo '  </video>';
echo '  <figcaption></figcaption>';
echo '</figure>';

/* ====== 枠外字幕（動画と同じ幅） ====== */
echo '<div id="subtitleData" translate="yes" class="ds5-shell"></div>';

/* ====== JS：cuechangeのみ差分描画（翻訳の“パカパカ”抑止） ====== */
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
  var video = document.getElementById("myVideo"); if (!video) return;
  var trackEl = video.querySelector("track[kind='subtitles'], track[kind='captions']");
  var container = document.getElementById("subtitleData"); if (!container) return;

  var lastSig = "";
  function buildSignature(activeList){
    if (!activeList || activeList.length === 0) return "";
    var arr = [];
    for (var i = 0; i < activeList.length; i++){
      var c = activeList[i];
      arr.push([c.startTime, c.endTime, c.text].join("|"));
    }
    return arr.join("||");
  }
  function renderCue(cue){
    var wrap = document.createElement("div");
    wrap.className = "ext-subcue";
    wrap.setAttribute("translate", "yes");
    if (typeof cue.getCueAsHTML === "function") wrap.appendChild(cue.getCueAsHTML());
    else wrap.textContent = cue.text;
    return wrap;
  }
  function renderActive(){
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch(e){}
    var active = trackEl.track.activeCues;
    var sig = buildSignature(active);
    if (sig === lastSig) return;  // 差分のみ更新 → 翻訳が安定
    lastSig = sig;
    container.innerHTML = "";
    if (!active || active.length === 0) return;
    Array.from(active).sort(function(a,b){return a.startTime - b.startTime;})
      .forEach(function(cue){ container.appendChild(renderCue(cue)); });
  }
  function hook(){
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch(e){}
    trackEl.track.addEventListener("cuechange", renderActive);
    renderActive();
  }
  if (trackEl) trackEl.addEventListener("load", hook);
  video.addEventListener("loadedmetadata", hook);

  // ピクチャインピクチャや全画面でも再描画して維持
  document.addEventListener("fullscreenchange", function(){ requestAnimationFrame(renderActive); });
  if ("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", function(){ requestAnimationFrame(renderActive); });
    video.addEventListener("leavepictureinpicture", function(){ requestAnimationFrame(renderActive); });
  }
  window.addEventListener("orientationchange", function(){ requestAnimationFrame(renderActive); });
});
</script>
<?php

// 固定ページ本文（任意）
if (have_posts()) : while (have_posts()) : the_post();
    echo '<div class="entry-content">';
    the_content();
    echo '</div>';
endwhile; endif;

echo '</div>'; // .ds5-shell
get_footer();
```

ds62.php

```
<?php
/*
Template Name: Dropbox Without Subtitle Template (ds62)
- Low Quality / Outside Subtitle (wide, stable)
- rd.php未変更 / 自動IDプローブ / 診断 / 直リンクフォールバック / ?id=対応
*/
if (!defined('ABSPATH')) { exit; }

/* ========= ユーティリティ ========= */
function ds62_get_drid(): string {
    if (isset($_GET['drid'])) return trim((string)$_GET['drid']);
    $uri = $_SERVER['REQUEST_URI'] ?? '';
    if ($uri && preg_match('#/ds62/([^/?&]+)#', $uri, $m)) return $m[1];
    return '';
}
function ds62_http_get(string $url, int $timeout = 10): ?string {
    $res = wp_remote_get($url, [
        'timeout' => $timeout,
        'headers' => ['User-Agent' => 'ds62/1.4'],
    ]);
    if (is_wp_error($res)) return null;
    $code = (int) wp_remote_retrieve_response_code($res);
    if ($code < 200 || $code >= 300) return null;
    $body = wp_remote_retrieve_body($res);
    return ($body !== '') ? $body : null;
}
function ds62_fetch_videoct(): ?array {
    $json_url = 'https://XXXXXX.com/gd_proxy/?f=videoct.json';
    $body = ds62_http_get($json_url, 12);
    if ($body === null) return null;
    $data = json_decode($body, true);
    return is_array($data) ? $data : null;
}
function ds62_find_video(array $rows, string $drid): ?array {
    foreach ($rows as $r) {
        if (isset($r['videoid']) && (string)$r['videoid'] === (string)$drid) return $r;
    }
    return null;
}
/** URL→wpidex 抽出（rd.php?id=... / 直リンク両対応） */
function ds62_extract_wpidex_from_url(?string $u): string {
    if (!$u) return '';
    $p = parse_url($u);
    if (!empty($p['query'])) {
        parse_str($p['query'], $qs);
        if (!empty($qs['id'])) {
            $id = (string)$qs['id'];
            $id = preg_replace('/\.(mp4|m4v|mov|mp3|m4a|wav|jpg|jpeg|png|gif|webp|vtt|srt|txt)$/i', '', $id);
            return $id ?: '';
        }
    }
    $path = $p['path'] ?? '';
    if ($path === '') return '';
    $base = basename($path);
    $id = preg_replace('/\.(mp4|m4v|mov|mp3|m4a|wav|jpg|jpeg|png|gif|webp|vtt|srt|txt|php)$/i', '', $base);
    return $id ?: '';
}
/* rd.php へのHEADで到達性チェック（200/206/302ならOK） */
function ds62_try_rd(string $id): int {
    if ($id === '') return -1;
    $rd_abs = rtrim(home_url('/rd.php'), '/');
    $url    = $rd_abs . '?id=' . rawurlencode($id) . '&mode=dynamic';
    $head   = wp_remote_head($url, ['timeout'=>8, 'headers'=>['Range'=>'bytes=0-1']]);
    if (is_wp_error($head)) return -1;
    return (int) wp_remote_retrieve_response_code($head);
}
/* 候補IDを順に試し、最初に2xx/3xxのidを返す */
function ds62_probe_id(array $candidates, array &$diag_log): ?array {
    $seen = [];
    foreach ($candidates as $cand) {
        $cand = trim((string)$cand);
        if ($cand === '') continue;
        $key = strtolower($cand);
        if (isset($seen[$key])) continue;
        $seen[$key] = true;
        $code = ds62_try_rd($cand);
        $diag_log[] = sprintf('probe id="%s" -> %d', $cand, $code);
        if ($code >= 200 && $code < 400) return ['id' => $cand, 'code' => $code];
    }
    return null;
}

/* ========= 本体 ========= */
get_header();

$drid         = ds62_get_drid();
$diag         = isset($_GET['diag']) ? 1 : 0;
$rid_override = isset($_GET['rid']) ? trim((string)$_GET['rid']) : ''; // rd.php id を強制上書き
$force_direct = (!empty($_GET['force']) && $_GET['force'] === 'direct'); // 直リンク再生

echo '<div class="ds6-shell" style="width:100%;max-width:min(1920px,98vw);margin:0 auto;">';

if ($drid === '') {
    echo '<p style="color:red;font-weight:bold">drid が指定されていません。（例：?drid=XXXX）</p>';
    echo '</div>'; get_footer(); return;
}

$rows = ds62_fetch_videoct();
if (!$rows) {
    echo '<p style="color:red;font-weight:bold">JSONデータの取得に失敗しました。（videoct.json）</p>';
    echo '</div>'; get_footer(); return;
}

$v = ds62_find_video($rows, $drid);
if (!$v) {
    echo '<p style="color:red;font-weight:bold">該当IDが見つかりません：' . esc_html($drid) . '</p>';
    echo '</div>'; get_footer(); return;
}

$image_url    = (string)($v['image']    ?? '');
$video_url    = (string)($v['video']    ?? '');   // 高画質（リンク先で利用）
$video2_url   = (string)($v['video2']   ?? '');   // ★低画質（使用）
$subtitle_url = (string)($v['subtitle'] ?? '');

/* ====== rd.phpに渡す id を自動決定（低画質優先） ====== */
$rd_abs   = rtrim(home_url('/rd.php'), '/');
$diag_log = [];

if ($rid_override !== '') {
    $chosen_id   = $rid_override;
    $chosen_code = ds62_try_rd($chosen_id);
    $diag_log[]  = sprintf('override id="%s" code=%d', $chosen_id, $chosen_code);
} else {
    $cands = [];
    $cands[] = ds62_extract_wpidex_from_url($video2_url);    // ★低画質を最優先
    $cands[] = ds62_extract_wpidex_from_url($subtitle_url);
    $cands[] = ds62_extract_wpidex_from_url($image_url);
    $cands[] = $drid;                                        // 保険
    $more = [];
    foreach ($cands as $c) { if (!$c) continue; $more[] = strtolower($c); $more[] = strtoupper($c); }
    $cands = array_merge($cands, $more);

    $picked = ds62_probe_id($cands, $diag_log);
    if ($picked) { $chosen_id = $picked['id']; $chosen_code = $picked['code']; }
    else { $chosen_id = ''; $chosen_code = -1; }
}

/* 再生ソース決定：通常は rd.php（dynamic）／?force=direct=1 なら直リンク(video2) */
$stream_src = '';
if ($force_direct && !empty($video2_url)) {
    $stream_src = $video2_url; // 直リンク
    $diag_log[] = 'force_direct=1 → stream_src = direct low-quality URL';
} else {
    if ($chosen_id !== '') {
        $stream_src = $rd_abs . '?id=' . rawurlencode($chosen_id) . '&mode=dynamic';
        $diag_log[] = 'stream_src via rd.php (mode=dynamic)';
    } else {
        $stream_src = $video2_url; // 黒画面回避の保険
        $diag_log[] = 'chosen_id empty → fallback to direct low-quality URL';
    }
}

/* ====== スタイル（dr52/dr62/ds52と統一） ====== */
?>
<style>
:root{ --ds6-max: 1920px; }
.radio-label{margin-right:10px;font-size:16px;color:#0073aa;text-decoration:underline;white-space:nowrap}
.radio-label.selected{font-weight:bold;color:#000;text-decoration:none;cursor:default}

/* コンテンツ枠：動画も字幕もこの幅に揃える */
.ds6-shell{
  width:100%;
  max-width:min(var(--ds6-max, 1920px), 98vw);
  margin:0 auto;
}
/* Gutenberg の既定 max-width の影響対策 */
figure.wp-block-video.aligncenter{
  width:100%;
  max-width:min(var(--ds6-max, 1920px), 98vw);
  margin:0 auto;
}
#myVideo{ width:100%; height:auto; display:block; background:#000; min-height:200px; }

/* 枠外字幕（青） */
#subtitleData{
  color: blue;
  margin-top: 8px;
  line-height: 1.4;
  white-space: pre-wrap;
  font-size: clamp(16px, 2.0vw, 22px);
}
#subtitleData .ext-subcue{ margin: 2px 0; }

@media (max-width: 430px){
  #subtitleData{ font-size: clamp(16px, 4.2vw, 22px); }
}
</style>
<?php

/* ====== 切替リンク（4項目：高/低｜枠内/枠外） ====== */
echo '<div style="text-align:left;margin:10px 0 8px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center">';
echo '  <a class="radio-label" href="' . esc_url(home_url('/dr52/?drid=' . $drid)) . '">高画質</a>';
echo '  <span class="radio-label selected">低画質</span>';
echo '  <span style="opacity:.4;">｜</span>';
echo '  <a class="radio-label" href="' . esc_url(home_url('/dr62/?drid=' . $drid)) . '">枠内字幕</a>';
echo '  <span class="radio-label selected">枠外字幕</span>';
echo '</div>';

/* ====== 診断（必要時のみ） ====== */
if ($diag) {
    echo '<details style="margin:6px 0" open><summary>診断（ds62）</summary><pre style="white-space:pre-wrap;font-size:12px;background:#f7f7f7;padding:8px;border:1px solid #ddd;">';
    $diag_txt =
        "drid={$drid}\n".
        "video_url={$video_url}\n".
        "video2_url={$video2_url}\n".
        "subtitle_url={$subtitle_url}\n".
        "image_url={$image_url}\n".
        "chosen_id={$chosen_id}\n".
        "chosen_code={$chosen_code}\n".
        "force_direct=" . ($force_direct ? '1' : '0') . "\n".
        "stream_src={$stream_src}\n".
        "--- probe log ---\n".implode("\n", $diag_log)."\n";
    echo esc_html($diag_txt);
    echo "</pre></details>";

    $head = wp_remote_head($stream_src, ['timeout'=>8,'headers'=>['Range'=>'bytes=0-1']]);
    $code = is_wp_error($head) ? -1 : (int)wp_remote_retrieve_response_code($head);
    $href = esc_url(add_query_arg('diag','1',$stream_src));
    echo '<div style="margin:6px 0 12px 0;font-size:13px">';
    echo 'HEADチェックコード：<b>'.$code.'</b> ／ <a href="'.$href.'" target="_blank" rel="noopener">再生ソースの診断を新規タブで開く</a>';
    echo '</div>';
}

/* ====== 動画（枠外字幕：ネイティブ字幕は非表示にして下に描画） ====== */
echo '<figure class="wp-block-video aligncenter">';
echo '  <video id="myVideo" controls poster="' . esc_url($image_url) . '" playsinline preload="metadata"'
   . ' oncontextmenu="return false;" controlsList="nodownload noplaybackrate" disablePictureInPicture draggable="false"'
   . ' style="user-select:none;-webkit-user-select:none;touch-action:none;">';
if (!empty($video2_url)) {
    echo '    <source src="' . esc_url($stream_src) . '" type="video/mp4">'; // 低画質
}
if (!empty($subtitle_url)) {
    echo '    <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles">';
}
echo '  </video>';
echo '  <figcaption></figcaption>';
echo '</figure>';

/* ====== 枠外字幕（動画と同じ幅） ====== */
echo '<div id="subtitleData" translate="yes" class="ds6-shell"></div>';

/* ====== JS：cuechangeのみ差分描画（翻訳の“パカパカ”抑止） ====== */
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
  var video = document.getElementById("myVideo"); if (!video) return;
  var trackEl = video.querySelector("track[kind='subtitles'], track[kind='captions']");
  var container = document.getElementById("subtitleData"); if (!container) return;

  var lastSig = "";
  function buildSignature(activeList){
    if (!activeList || activeList.length === 0) return "";
    var arr = [];
    for (var i = 0; i < activeList.length; i++){
      var c = activeList[i];
      arr.push([c.startTime, c.endTime, c.text].join("|"));
    }
    return arr.join("||");
  }
  function renderCue(cue){
    var wrap = document.createElement("div");
    wrap.className = "ext-subcue";
    wrap.setAttribute("translate", "yes");
    if (typeof cue.getCueAsHTML === "function") wrap.appendChild(cue.getCueAsHTML());
    else wrap.textContent = cue.text;
    return wrap;
  }
  function renderActive(){
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch(e){}
    var active = trackEl.track.activeCues;
    var sig = buildSignature(active);
    if (sig === lastSig) return;  // 差分のみ更新 → 翻訳が安定
    lastSig = sig;
    container.innerHTML = "";
    if (!active || active.length === 0) return;
    Array.from(active).sort(function(a,b){return a.startTime - b.startTime;})
      .forEach(function(cue){ container.appendChild(renderCue(cue)); });
  }
  function hook(){
    if (!trackEl || !trackEl.track) return;
    try { trackEl.track.mode = "hidden"; } catch(e){}
    trackEl.track.addEventListener("cuechange", renderActive);
    renderActive();
  }
  if (trackEl) trackEl.addEventListener("load", hook);
  video.addEventListener("loadedmetadata", hook);

  // ピクチャインピクチャや全画面でも再描画して維持
  document.addEventListener("fullscreenchange", function(){ requestAnimationFrame(renderActive); });
  if ("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", function(){ requestAnimationFrame(renderActive); });
    video.addEventListener("leavepictureinpicture", function(){ requestAnimationFrame(renderActive); });
  }
  window.addEventListener("orientationchange", function(){ requestAnimationFrame(renderActive); });
});
</script>
<?php

// 固定ページ本文（任意）
if (have_posts()) : while (have_posts()) : the_post();
    echo '<div class="entry-content">';
    the_content();
    echo '</div>';
endwhile; endif;

echo '</div>'; // .ds6-shell
get_footer();
```