# [メタ情報]
# 識別子: dr52emd.php
# システム名: 未分類
# 技術種別: Misc
# 機能名: Misc
# 使用言語: php
# 状態: 公開用
# [/メタ情報]
# [/メタ情報]
要約：このスクリプトは、WordPressサイト用の動画埋め込みPHPテンプレートです。URLパラメータ「drid」から特定の動画データ（Dropbox等）を取得し、カスタム字幕オーバーレイや、クリックでシーク可能な字幕リスト（自動スクロール・ハイライト機能付き）を提供します。また、フラグメントモード（frag=1）により、外部サイトからのiframe埋め込み用にも最適化されています。



dr52emd.php

```

<?php
/*
Template Name: DR52EMD - Embed / Fragment Mode (InternalScroll + PiP-safe + NoContext + NormalFont)
*/

// URLパラメータ取得
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);
}

// frag=1 の場合はヘッダー・フッターを出さない
$is_fragment = (isset($_GET['frag']) && $_GET['frag'] == '1');

if (!$is_fragment) {
    get_header();
}

$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'] ?? '';

            // ---- Styles ----
            echo '<style>
            :root{ --dr5emd-max: 1920px; }
            .video-wrap{position:relative;width:100%;margin:0 auto}
            figure.wp-block-video.aligncenter{
              width:100%;
              max-width:min(var(--dr5emd-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); }
            }
            .dr5emd-sublist details > p{
              height:200px; overflow:auto; background-color:#EDF7FF;
              padding:2px 6px; margin:0; box-shadow:3px 3px 4px black;
              position: relative;
            }
            .dr5emd-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="dr5emd-container">';

            // ---- 動画 ----
            echo '<figure class="wp-block-video aligncenter">';
            if (!empty($video_url)) {
                echo '<div class="video-wrap">';
                echo '<video id="myVideo" controls controlsList="nodownload" poster="' . esc_url($image_url) . '" playsinline preload="metadata" 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>';
                ?>
<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(c){var d=document.createElement("div");d.className="overlay-cue";d.setAttribute("translate","yes");if(typeof c.getCueAsHTML==="function")d.appendChild(c.getCueAsHTML());else d.textContent=c.text;return d;}
  function render(){
    if(!isOverlay || !trackEl || !trackEl.track) return;
    var ac=trackEl.track.activeCues,s=sig(ac); if(s===lastSig) return; lastSig=s;
    overlay.innerHTML=""; if(!ac || ac.length===0) return;
    var b=document.createElement("div"); b.className="band"; b.setAttribute("translate","yes");
    Array.from(ac).sort(function(a,b){return a.startTime-b.startTime;}).forEach(function(c){b.appendChild(cueLine(c));});
    overlay.appendChild(b);
  }
  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("<固有のランダム文字列>",handleWebkitMode); handleWebkitMode(); }
  if("<固有のランダム文字列>" in video){
    video.addEventListener("<固有のランダム文字列>", 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>
                <?php
            } 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="dr5emd-sublist">';
                echo get_custom_data($subtitle_list_url); 
                echo '</div>';
                ?>
<script>
(function(){
  var root=document.querySelector(".dr5emd-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;
  }
  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(){
    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>
                <?php
            }
            echo '</div>';
        } else {
            echo '<p>動画はまだ準備中です。</p>';
        }
    } else {
        echo '<p>JSONデータの取得に失敗しました。</p>';
    }
} else {
    echo '<p>dridが指定されていません。</p>';
}

if (!$is_fragment) {
    if (have_posts()) : while (have_posts()) : the_post();
        the_content();
    endwhile; endif;
    get_footer();
}
?>
```