# [メタ情報]
# 識別子: ダウンロード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/17lDLTw_0HnOsDB1LiD9Y5jY27fqZrV_O?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{ display: none; }

            .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;
            }
            
            .imk-line {
                display: inline-block;
                width: 100%;
                border-radius: 2px;
                transition: background-color 0.1s;
            }
            </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">';
                
                // ★修正箇所： `default` を追加し、ブラウザに字幕ファイルの事前読み込みを強制する
                if (!empty($subtitle_url)) {
                    echo '  <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles" default>';
                }
                
                echo '</video>';
                echo '<div id="subtitleOverlay" aria-hidden="true"></div>';
                echo '</div>';

                // ★修正箇所：全ブラウザ対応の画面検知 ＆ 字幕コントロール
                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) return;

  video.addEventListener("contextmenu", function(e){ e.preventDefault(); return false; }, false);

  var currentMode = "hidden"; // 現在の状態を記憶

  function setNative(mode){
    currentMode = 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){}
  }

  // default属性により読み込み完了時に表示されてしまうのを防ぐ
  if(trackEl) {
      trackEl.addEventListener("load", function() { setNative(currentMode); });
  }

  function useNormalMode(){
    if(overlay) overlay.style.display="none";
    setNative("hidden");
  }
  function useSpecialMode(){
    if(overlay) overlay.style.display="none";
    setNative("showing");
  }

  useNormalMode(); // 初期状態は非表示

  // ★ここを追加：画面状態の判定（PiPか全画面か）
  function isSpecialMode() {
    var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
    var isIOSFs = !!(video.webkitDisplayingFullscreen); // iOS Safari独自の全画面プロパティ
    var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
    var isWireless = !!(video.webkitCurrentPlaybackTargetIsWireless);
    return isFs || isIOSFs || isPiP || isWireless;
  }

  // ★最強ガード：今の状態をチェックして、ネイティブ字幕のON/OFFを自動切り替え（iOS対応）
  video.addEventListener("timeupdate", function(){
    var desiredMode = isSpecialMode() ? "showing" : "hidden";
    if (currentMode !== desiredMode) {
        desiredMode === "showing" ? useSpecialMode() : useNormalMode();
    }
  });

  // PiP（ピクチャー・イン・ピクチャー）等の検知（既存維持）
  function handleWebkitMode(){ var m = video.webkitPresentationMode || "inline"; (m==="picture-in-picture"||m==="fullscreen") ? useSpecialMode() : useNormalMode(); }
  if("webkitPresentationMode" in video){ video.addEventListener("webkitpresentationmodechanged", handleWebkitMode); handleWebkitMode(); }
  if("webkitCurrentPlaybackTargetIsWireless" in video){
    video.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", function(){
      video.webkitCurrentPlaybackTargetIsWireless ? useSpecialMode() : useNormalMode();
    });
  }
  if("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useSpecialMode);
    video.addEventListener("leavepictureinpicture", useNormalMode);
  }

  // 全画面表示の検知（全ブラウザ対応版）
  function handleFs(){
    var fs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
    if(!fs) return useNormalMode();
    (fs===video || (fs && fs.contains && fs.contains(video))) ? useSpecialMode() : useNormalMode();
  }
  document.addEventListener("fullscreenchange", handleFs);
  document.addEventListener("webkitfullscreenchange", handleFs);
  document.addEventListener("mozfullscreenchange", handleFs);
  document.addEventListener("MSFullscreenChange", handleFs);
});
</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;

  var detailsEl = root.querySelector("details");
  if (detailsEl) {
      detailsEl.open = true; 
      var summaryEl = detailsEl.querySelector("summary");
      if (summaryEl) {
          summaryEl.textContent = "字幕はここをクリックしてご覧ください。"; 
      }
  }

  var listContainer = root.querySelector("details > p");
  if (listContainer && !listContainer.dataset.formatted) {
      var html = listContainer.innerHTML;
      var lines = html.split(/<br\s*\/?>/i);
      var newHtml = "";
      for(var j=0; j<lines.length; j++) {
          if(lines[j].trim() === "") continue;
          newHtml += "<span class=\'imk-line\'>" + lines[j] + "</span><br>";
      }
      listContainer.innerHTML = newHtml;
      listContainer.dataset.formatted = "true";
  }

  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;
  }

  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(_){}
  });

  video.addEventListener("timeupdate", function(){
    if(!listContainer) return;
    
    var cues = listContainer.querySelectorAll("a.imk-cue");
    if(cues.length === 0) return;

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

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

    if(activeA){
        var activeLine = activeA.closest(".imk-line");
        if(!activeLine) activeLine = activeA; 

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

        var oldLines = listContainer.querySelectorAll(".active-hl");
        for(var k=0; k<oldLines.length; k++) {
            oldLines[k].classList.remove("active-hl");
            oldLines[k].style.removeProperty("background-color");
            oldLines[k].style.removeProperty("color");
            oldLines[k].style.removeProperty("font-weight");
            var oldLinks = oldLines[k].querySelectorAll("a");
            for(var m=0; m<oldLinks.length; m++) {
                oldLinks[m].style.removeProperty("color");
            }
        }

        activeLine.classList.add("active-hl");
        activeLine.style.setProperty("background-color", "#ffff00", "important");
        activeLine.style.setProperty("color", "red", "important");
        activeLine.style.setProperty("font-weight", "normal", "important");
        
        var newLinks = activeLine.querySelectorAll("a");
        for(var n=0; n<newLinks.length; n++) {
            newLinks[n].style.setProperty("color", "red", "important");
            newLinks[n].style.setProperty("text-decoration", "none", "important");
        }

        if(listContainer.offsetParent !== null){
            var containerRect = listContainer.getBoundingClientRect();
            var activeRect = activeLine.getBoundingClientRect();
            var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (activeLine.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>'; 
        } 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/17lDLTw_0HnOsDB1LiD9Y5jY27fqZrV_O?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;
            }

            #subtitleOverlay{ display: none; }

            .dr6-sublist details > p{
              height:200px;
              overflow:auto;
              background-color:#EDF7FF;
              padding:2px 6px; margin:0;
              box-shadow:3px 3px 4px black;
              position: relative; 
            }
            .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;
            }
            
            .imk-line {
                display: inline-block;
                width: 100%;
                border-radius: 2px;
                transition: background-color 0.1s;
            }
            </style>';

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

            // ---- 切替リンク ----
            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>';

            // ---- 動画 ----
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video2_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($video2_url) . '" type="video/mp4">';
                
                // ★ブラウザに字幕ファイルの事前読み込みを強制する default 属性
                if (!empty($subtitle_url)) {
                    echo '  <track src="' . esc_url($subtitle_url) . '" label="日本語" srclang="ja" kind="subtitles" default>';
                }
                
                echo '</video>';
                echo '<div id="subtitleOverlay" aria-hidden="true"></div>';
                echo '</div>';

                // ★全ブラウザ対応の画面検知 ＆ 字幕コントロール
                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) return;

  video.addEventListener("contextmenu", function(e){ e.preventDefault(); return false; }, false);

  var currentMode = "hidden"; // 現在の状態を記憶

  function setNative(mode){
    currentMode = 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){}
  }

  // default属性により読み込み完了時に表示されてしまうのを防ぐ
  if(trackEl) {
      trackEl.addEventListener("load", function() { setNative(currentMode); });
  }

  function useNormalMode(){
    if(overlay) overlay.style.display="none";
    setNative("hidden");
  }
  function useSpecialMode(){
    if(overlay) overlay.style.display="none";
    setNative("showing");
  }

  useNormalMode(); // 初期状態は非表示

  // 画面状態の判定（PiPか全画面か）
  function isSpecialMode() {
    var isFs = !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
    var isIOSFs = !!(video.webkitDisplayingFullscreen); // iOS Safari独自の全画面プロパティ
    var isPiP = !!(document.pictureInPictureElement && document.pictureInPictureElement === video) || (video.webkitPresentationMode === "picture-in-picture");
    var isWireless = !!(video.webkitCurrentPlaybackTargetIsWireless);
    return isFs || isIOSFs || isPiP || isWireless;
  }

  // ★最強ガード：今の状態をチェックして、ネイティブ字幕のON/OFFを自動切り替え（iOS対応）
  video.addEventListener("timeupdate", function(){
    var desiredMode = isSpecialMode() ? "showing" : "hidden";
    if (currentMode !== desiredMode) {
        desiredMode === "showing" ? useSpecialMode() : useNormalMode();
    }
  });

  // PiP（ピクチャー・イン・ピクチャー）等の検知
  function handleWebkitMode(){ var m = video.webkitPresentationMode || "inline"; (m==="picture-in-picture"||m==="fullscreen") ? useSpecialMode() : useNormalMode(); }
  if("webkitPresentationMode" in video){ video.addEventListener("webkitpresentationmodechanged", handleWebkitMode); handleWebkitMode(); }
  if("webkitCurrentPlaybackTargetIsWireless" in video){
    video.addEventListener("webkitcurrentplaybacktargetiswirelesschanged", function(){
      video.webkitCurrentPlaybackTargetIsWireless ? useSpecialMode() : useNormalMode();
    });
  }
  if("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useSpecialMode);
    video.addEventListener("leavepictureinpicture", useNormalMode);
  }

  // 全画面表示の検知（全ブラウザ対応版）
  function handleFs(){
    var fs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
    if(!fs) return useNormalMode();
    (fs===video || (fs && fs.contains && fs.contains(video))) ? useSpecialMode() : useNormalMode();
  }
  document.addEventListener("fullscreenchange", handleFs);
  document.addEventListener("webkitfullscreenchange", handleFs);
  document.addEventListener("mozfullscreenchange", handleFs);
  document.addEventListener("MSFullscreenChange", handleFs);
});
</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="dr6-sublist">';
                echo get_custom_data($subtitle_list_url); 
                echo '</div>';

                // 行の自動梱包 ＆ 色の直接書き込み ＆ スクロール
                echo '<script>
(function(){
  var root = document.querySelector(".dr6-sublist");
  var video = document.getElementById("myVideo");
  if(!root || !video) return;

  var detailsEl = root.querySelector("details");
  if (detailsEl) {
      detailsEl.open = true; 
      var summaryEl = detailsEl.querySelector("summary");
      if (summaryEl) {
          summaryEl.textContent = "字幕はここをクリックしてご覧ください。"; 
      }
  }

  var listContainer = root.querySelector("details > p");
  if (listContainer && !listContainer.dataset.formatted) {
      var html = listContainer.innerHTML;
      var lines = html.split(/<br\s*\/?>/i);
      var newHtml = "";
      for(var j=0; j<lines.length; j++) {
          if(lines[j].trim() === "") continue;
          newHtml += "<span class=\'imk-line\'>" + lines[j] + "</span><br>";
      }
      listContainer.innerHTML = newHtml;
      listContainer.dataset.formatted = "true";
  }

  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;
  }

  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(_){}
  });

  video.addEventListener("timeupdate", function(){
    if(!listContainer) return;
    
    var cues = listContainer.querySelectorAll("a.imk-cue");
    if(cues.length === 0) return;

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

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

    if(activeA){
        var activeLine = activeA.closest(".imk-line");
        if(!activeLine) activeLine = activeA; 

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

        var oldLines = listContainer.querySelectorAll(".active-hl");
        for(var k=0; k<oldLines.length; k++) {
            oldLines[k].classList.remove("active-hl");
            oldLines[k].style.removeProperty("background-color");
            oldLines[k].style.removeProperty("color");
            oldLines[k].style.removeProperty("font-weight");
            var oldLinks = oldLines[k].querySelectorAll("a");
            for(var m=0; m<oldLinks.length; m++) {
                oldLinks[m].style.removeProperty("color");
            }
        }

        activeLine.classList.add("active-hl");
        activeLine.style.setProperty("background-color", "#ffff00", "important");
        activeLine.style.setProperty("color", "red", "important");
        activeLine.style.setProperty("font-weight", "normal", "important");
        
        var newLinks = activeLine.querySelectorAll("a");
        for(var n=0; n<newLinks.length; n++) {
            newLinks[n].style.setProperty("color", "red", "important");
            newLinks[n].style.setProperty("text-decoration", "none", "important");
        }

        if(listContainer.offsetParent !== null){
            var containerRect = listContainer.getBoundingClientRect();
            var activeRect = activeLine.getBoundingClientRect();
            var targetScroll = listContainer.scrollTop + (activeRect.top - containerRect.top) - (listContainer.clientHeight / 2) + (activeLine.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>'; // .dr6-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();
?>
```

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();
```