# [メタ情報]
# 識別子: 無音ループ動画パッケージphpと埋め込みコード_exe
# システム名: 無音ループ動画パッケージphpと埋め込みコード_exe
# 技術種別: Misc
# 機能名: Misc
# 使用言語: php　カスタムhtml
# 状態: 実行用
# [/メタ情報]
要約：高画質・無音オートループ・枠内字幕に特化した dr53 / dr53emd テンプレートの説明。videoct.json から動画・画像・字幕・説明文を取得し、ID 自動プローブで rd.php を優先的に使用して高画質を安定再生する。字幕はネイティブ軌道を隠し、JS により枠内オーバーレイ表示。PiP・フルスクリーン・AirPlay などの状態に応じて自動的にネイティブ表示へ切替える。動画は autoplay muted loop で自動再生し、クリックで一時停止／再開、タブ復帰時の再生再試行も行う。
字幕一覧（TXT）は <details> で展開し、クリックで動画内の該当秒へジャンプ。説明文は TXT/HTML に対応。dr53emd は埋め込み用で、ヘッダやフッタを除外し iframe 的に動作。dynamic3 コードは別画面リンクと埋め込み表示を組み合わせ、既存の再生メディアを自動停止して安全に画面遷移する。



dr53.php

<?php
/*
Template Name: Dropbox With Subtitle Template (dr53)
- High Quality Silent Loop / Inside Subtitles
- rd.php未変更 / 自動IDプローブ / 診断 / 直リンクフォールバック / ?id=対応
- 特徴: 高画質＋枠内字幕固定／無音オートループ／上段切替バーなし
*/
if (!defined('ABSPATH')) { exit; }

/* ========= ユーティリティ ========= */
function dr53_get_drid(): string {
    if (isset($_GET['drid'])) return trim((string)$_GET['drid']);
    $uri = $_SERVER['REQUEST_URI'] ?? '';
    if ($uri && preg_match('#/dr53/([^/?&]+)#', $uri, $m)) return $m[1];
    return '';
}
function dr53_http_get(string $url, int $timeout = 10): ?string {
    $res = wp_remote_get($url, [
        'timeout' => $timeout,
        'headers' => ['User-Agent' => 'dr53/1.0'],
    ]);
    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 dr53_fetch_videoct(): ?array {
    $json_url = 'https://xxxxxxxx.com/gd_proxy/?f=videoct.json';
    $body = dr53_http_get($json_url, 12);
    if ($body === null) return null;
    $data = json_decode($body, true);
    return is_array($data) ? $data : null;
}
function dr53_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 dr53_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 dr53_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 dr53_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 = dr53_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         = dr53_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="dr5-container" 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 = dr53_fetch_videoct();
if (!$rows) {
    echo '<p style="color:red;font-weight:bold">JSONデータの取得に失敗しました。（videoct.json）</p>';
    echo '</div>'; get_footer(); return;
}

$v = dr53_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']       ?? '');
$subtitle_list_url = (string)($v['subtitle_list']  ?? '');
$explain_line_url  = (string)($v['explain_line']   ?? '');

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

if ($rid_override !== '') {
    $chosen_id   = $rid_override;
    $chosen_code = dr53_try_rd($chosen_id);
    $diag_log[]  = sprintf('override id="%s" code=%d', $chosen_id, $chosen_code);
} else {
    $cands = [];
    $cands[] = dr53_extract_wpidex_from_url($video_url);     // 高画質を最優先
    $cands[] = dr53_extract_wpidex_from_url($subtitle_url);
    $cands[] = dr53_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 = dr53_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';
    }
}

/* ====== 診断 ====== */
if ($diag) {
    echo '<details style="margin:8px 0" open><summary>診断（dr53）</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> ／ ';
    echo '<a href="'.$href.'" target="_blank" rel="noopener">再生ソースの診断を新規タブで開く</a>';
    echo '</div>';
}

/* ====== スタイル ====== */
?>
<style>
:root{ --dr5-max: 1920px; }
.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;
}
#myVideo{
  width:100%;height:auto;min-height:200px;display:block;background:#000;
}
#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);
}
.dr5-sublist details > p{
  height:200px; overflow:auto; background-color:#EDF7FF;
  padding:2px 6px; margin:0; box-shadow:3px 3px 4px black;
}
.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;
}
</style>
<?php

/* ====== 動画（高画質＋枠内字幕／無音オートループ・自動再生） ====== */
echo '<figure class="wp-block-video aligncenter">';
if (!empty($video_url)) {
    echo '<div class="video-wrap">';
    echo '<video id="myVideo"'
       // ★ 自動開始用：autoplay + muted + loop
       . ' autoplay muted loop playsinline preload="metadata"'
       . ' poster="' . esc_url($image_url) . '"'
       . ' oncontextmenu="return false;"'
       . ' controlsList="nodownload noplaybackrate"'
       . ' disablePictureInPicture draggable="false"'
       . ' style="user-select:none;-webkit-user-select:none;touch-action:none;width:100%;height:auto;">';
    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 '<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;

  // ★ 自動再生を強制的にトライ（ポリシーを満たすため muted を再度保証）
  function tryAutoPlay(){
    try{
      video.muted = true;
      var p = video.play();
      if (p && typeof p.then === "function") {
        p.then(function(){ /* OK */ }).catch(function(e){ /* ブロックされた場合は黙って諦める */ });
      }
    }catch(e){}
  }
  // 初期ロード時に何度か試す
  tryAutoPlay();
  video.addEventListener('loadeddata', tryAutoPlay);
  video.addEventListener('canplay', tryAutoPlay);

  // ページ表示に戻ったときも再トライ（iOSでタブ復帰時に止まっていることがある）
  document.addEventListener("visibilitychange", function(){
    if (!document.hidden) {
      tryAutoPlay();
    }
  });

  // クリックで一時停止／再開（ユーザー制御は残す）
  video.addEventListener('click', function(){
    try{
      if (video.paused){ video.play(); }
      else { video.pause(); }
    }catch(e){}
  });

  // ページ離脱時は確実に停止
  window.addEventListener('pagehide', function(){
    try{ video.pause(); }catch(e){}
  });

  function setNative(mode){
    try{
      if(video.textTracks && video.textTracks.length){
        for(var i=0;i<video.textTracks.length;i++){
          var k=video.textTracks[i].kind;
          if (k==="subtitles" || k==="captions") 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("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>
    <?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="dr5-sublist">';
    $html = dr53_http_get($subtitle_list_url, 10);
    echo $html ? $html : '<p style="color:#999">字幕一覧の取得に失敗しました。</p>';
    echo '</div>';
    ?>
<script>
(function(){
  var root=document.querySelector(".dr5-container");
  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(_){}
  });
})();
</script>
    <?php
}

/* ====== 説明文 ====== */
if (!empty($explain_line_url)) {
    $txt = dr53_http_get($explain_line_url, 8);
    if ($txt !== null) {
        $txt = trim($txt);
        echo '<div class="dr5-explain" style="text-align:left;">';
        if (strpos($txt, '<') !== false && strpos($txt, '>') !== false) {
            echo wp_kses_post($txt);
        } else {
            echo '<p>' . nl2br(esc_html($txt)) . '</p>';
        }
        echo '</div>';
    }
}

echo '</div>'; // .dr5-container

if (have_posts()) : while (have_posts()) : the_post();
    echo '<div class="entry-content">';
    the_content();
    echo '</div>';
endwhile; endif;

get_footer();




dr53emd.php

<?php
/*
Template Name: dr53emd (rd.php経由/高画質・枠内字幕・無音ループ・単体埋め込み)
Usage:
  - 単体表示: https://xxxxxxxx.com/dr53emd/VIDEOID
  - 埋め込み: [dynamic_external_html url="https://xxxxxxxx.com/dr53emd/?drid=VIDEOID&frag=1"]
*/
if (!defined('ABSPATH')) exit;

/* ========= ユーティリティ ========= */
function dr53emd_get_drid(): string {
  if (isset($_GET['drid'])) return trim((string)$_GET['drid']);
  $uri = $_SERVER['REQUEST_URI'] ?? '';
  if ($uri && preg_match('#/dr53emd/([^/?&]+)#', $uri, $m)) return $m[1];
  return '';
}
function dr53emd_http_get(string $url, int $timeout = 8): ?string {
  $res = wp_remote_get($url, ['timeout'=>$timeout, 'headers'=>['Cache-Control'=>'no-cache']]);
  if (is_wp_error($res)) return null;
  if (wp_remote_retrieve_response_code($res) !== 200) return null;
  return wp_remote_retrieve_body($res);
}
function dr53emd_find_by_videoid(array $rows, string $vid): ?array {
  foreach ($rows as $r) if (is_array($r) && (string)($r['videoid'] ?? '') === $vid) return $r;
  return null;
}

/* ========= 本体 ========= */
$drid = dr53emd_get_drid();
$as_fragment = isset($_GET['frag']) || isset($_GET['embed']); // 埋め込みはヘッダ/フッタ無し

if (!$as_fragment) get_header();

if (!$drid) {
  echo $as_fragment ? '<p>drid が未指定です。</p>'
                    : '<main class="content"><p>動画ID(drid)が指定されていません。</p></main>';
  if (!$as_fragment) get_footer(); exit;
}

$json_url  = 'https://xxxxxxxx.com/gd_proxy/?f=videoct.json';
$json_text = dr53emd_http_get($json_url);
if (!$json_text) {
  echo $as_fragment ? '<p>動画情報の取得に失敗しました。</p>'
                    : '<main class="content"><p>動画情報の取得に失敗しました。</p></main>';
  if (!$as_fragment) get_footer(); exit;
}
$data = json_decode($json_text, true);
if (!is_array($data)) {
  echo $as_fragment ? '<p>動画情報が不正です。</p>'
                    : '<main class="content"><p>動画情報が不正です。</p></main>';
  if (!$as_fragment) get_footer(); exit;
}

$info = dr53emd_find_by_videoid($data, $drid);
if (!$info) {
  $msg = '<p>指定の動画が見つかりません: '.esc_html($drid).'</p>';
  echo $as_fragment ? $msg : '<main class="content">'.$msg.'</main>';
  if (!$as_fragment) get_footer(); exit;
}

$poster  = (string)($info['image']         ?? '');
$track   = (string)($info['subtitle']      ?? '');
$listurl = (string)($info['subtitle_list'] ?? '');
$explain = (string)($info['explain_line']  ?? '');
$src     = !empty($info['video']) ? (string)$info['video']
                                  : ('https://xxxxxxxx.com/rd.php?id=' . rawurlencode($drid));

if (!$as_fragment) echo '<main class="content">';
?>
<div class="sc-embed sc-embed-dr53">
  <figure class="wp-block-video aligncenter">
    <div class="video-wrap">
      <video id="scVideo"
        autoplay muted loop playsinline preload="metadata"
        poster="<?php echo esc_url($poster); ?>"
        src="<?php echo esc_url($src); ?>"
        style="width:100%;height:auto;"
        controlsList="nodownload noplaybackrate"
        disablePictureInPicture oncontextmenu="return false">
        <?php if ($track): ?>
          <track src="<?php echo esc_url($track); ?>" label="日本語" srclang="ja" kind="subtitles">
        <?php endif; ?>
      </video>
      <div id="scSubtitleOverlay" aria-hidden="true"></div>
    </div>
  </figure>

  <?php
  // ▼ 字幕一覧（TXT側が<details>を内包）
  if ($listurl) echo do_shortcode('[dynamic_external_html url="' . esc_url($listurl) . '"]');

  // ▼ 説明文（TXT/HTMLどちらでもOK）
  if ($explain) {
    $body = dr53emd_http_get($explain);
    if (is_string($body) && trim($body) !== '') {
      $trimmed = trim($body);
      if (stripos($trimmed, '<') !== false) {
        echo '<div class="sc-explain" translate="yes">' .
             wp_kses(
               $trimmed,
               [
                 'br'     => [],
                 'p'      => [],
                 'strong' => [],
                 'em'     => [],
                 'b'      => [],
                 'i'      => [],
                 'span'   => ['style'=>[]],
                 // ★ リンクを許可（説明TXT内の<a>をそのまま出したい）
                 'a'      => [
                   'href'   => [],
                   'target' => [],
                   'rel'    => [],
                 ],
               ]
             ) .
             '</div>';
      } else {
        echo '<div class="sc-explain" translate="yes"><p>' . nl2br(esc_html($trimmed)) . '</p></div>';
      }
    }
  }
  ?>
</div>

<script>
/* ---- 枠内字幕オーバーレイ＋無音ループ ---- */
(function(){
  var me=document.currentScript;
  function findRootFromScript(s){
    var n=s.previousElementSibling;
    while(n){ if(n.classList && n.classList.contains('sc-embed-dr53')) return n; n=n.previousElementSibling; }
    n=s.parentElement;
    while(n){ if(n.classList && n.classList.contains('sc-embed-dr53')) return n; n=n.parentElement; }
    return null;
  }
  var root=findRootFromScript(me); if(!root) return;

  var video   = root.querySelector('#scVideo');
  var trackEl = video ? video.querySelector('track[kind="subtitles"], track[kind="captions"]') : null;
  var overlay = root.querySelector('#scSubtitleOverlay');
  if (!video || !overlay) return;

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

  // 自動再生をできるだけ試みる
  function tryAutoPlay(){
    try{
      video.muted = true;
      video.playsInline = true;
      var p = video.play();
      if (p && typeof p.then === 'function') {
        p.then(function(){}).catch(function(){});
      }
    }catch(e){}
  }
  tryAutoPlay();
  video.addEventListener('loadeddata', tryAutoPlay);
  video.addEventListener('canplay',    tryAutoPlay);
  document.addEventListener('visibilitychange', function(){
    if (!document.hidden) tryAutoPlay();
  });

  // クリックで一時停止／再開
  video.addEventListener('click', function(){
    try{
      if (video.paused) video.play();
      else              video.pause();
    }catch(e){}
  });

  // ページ離脱時は止める
  window.addEventListener('pagehide', function(){
    try{ video.pause(); }catch(e){}
  });

  // ---- オーバーレイ字幕 ----
  function sig(active){ if(!active||!active.length) 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 cueDiv(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; }

  var isOverlay=true, lastSig="";
  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) 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(cueDiv(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){
    trackEl.addEventListener('load', function(){
      try{ if(trackEl.track) trackEl.track.addEventListener('cuechange', render); }catch(e){}
      render();
    });
    if (trackEl.track){
      try{ trackEl.track.addEventListener('cuechange', render); }catch(e){}
    }
  }
  video.addEventListener('loadedmetadata',render);

  function handleFullscreenMode(){
    var fs = document.fullscreenElement || document.webkitFullscreenElement || null;
    if (!fs) { useOverlay(); return; }
    (fs===video || (fs.contains && fs.contains(video))) ? useNative() : useOverlay();
  }
  document.addEventListener('fullscreenchange', handleFullscreenMode);
  document.addEventListener('webkitfullscreenchange', handleFullscreenMode);

  if ("webkitPresentationMode" in video){
    video.addEventListener("webkitpresentationmodechanged", function(){
      var m = video.webkitPresentationMode || "inline";
      if (m==="picture-in-picture" || m==="fullscreen"){ useNative(); }
      else { useOverlay(); }
    });
  }
  if ("pictureInPictureEnabled" in document){
    video.addEventListener("enterpictureinpicture", useNative);
    video.addEventListener("leavepictureinpicture", useOverlay);
  }

  // 字幕一覧クリックでジャンプ
  function parseTs(ts){
    if(!ts) return null;
    ts=ts.trim();
    var m=ts.match(/^(\d{1,2}):([0-5]?\d)(?::([0-5]?\d))?$/);
    if(!m) return null;
    var h=m[3]?parseInt(m[1],10):0, mm=parseInt(m[3]?m[2]:m[1],10), ss=parseInt(m[3]?m[3]:m[2],10);
    return h*3600+mm*60+ss;
  }
  root.addEventListener('click', function(e){
    var a = e.target.closest && e.target.closest('a'); if(!a || !root.contains(a)) return;
    var ts = a.getAttribute('data-seek');
    if(!ts){
      var txt = a.getAttribute('data-ts') || a.textContent || a.innerText || '';
      var m = txt.match(/\b(\d{1,2}:[0-5]?\d(?::[0-5]?\d)?)\b/);
      if(!m && a.href){ var dec=decodeURIComponent(a.href); m = dec.match(/\b(\d{1,2}:[0-5]?\d(?::[0-5]?\d)?)\b/); }
      ts = m ? m[1] : null;
    }
    var sec = parseTs(ts); if(sec==null) return;
    e.preventDefault();
    try{ video.currentTime = sec; if (video.paused) video.play(); }catch(err){}
  });

})();
</script>

<style>
.sc-embed-dr53, .sc-embed-dr53 .wp-block-video,
.sc-embed-dr53 .video-wrap, .sc-embed-dr53 video{
  width:100% !important; max-width:100% !important;
}
.sc-embed-dr53 .video-wrap{ position:relative; }
#scSubtitleOverlay{
  position:absolute; left:0; right:0; bottom:6%;
  padding:0 2%; text-align:center; pointer-events:none; z-index:2;
}
#scSubtitleOverlay .band{
  display:inline-block; background:rgba(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,.15);
}
#scSubtitleOverlay .overlay-cue{
  color:#fff; font-weight:600; font-size:clamp(16px,3.8vw,28px);
  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);
}
.sc-embed-dr53 details > p{
  font-size:14px; line-height:1.6;
  height:auto; max-height:200px; overflow:auto;
  background:#EDF7FF; padding:2px 6px; margin:0;
  box-shadow:3px 3px 4px black;
}
.sc-embed-dr53 details > summary{
  font-size:16px; padding:2px 6px; width:100%;
  background:#ddd; border:none; box-shadow:3px 3px 4px black;
  cursor:pointer; list-style:none;
}
.sc-embed-dr53 .sc-explain p{
  font-size:16px; line-height:1.8; margin:12px 0; white-space:pre-wrap;
}
</style>
<?php
if (!$as_fragment) echo '</main>';
if (!$as_fragment) get_footer();




dynamic3埋め込みコード

<p class="sc-link">
  <a href="https://xxxxxxxx.com/dr53/?drid=@@VIDEOID@@" target="_blank" rel="noopener"
     onclick="return scStopAndGo(event, this);">
    👉別画面表示
  </a>
</p>

[dynamic_external_html url="https://xxxxxxxx.com/dr53emd/?drid=@@VIDEOID@@&frag=1"]

<script>
(function(){
  if (window.scStopAndGo) return;
  window.scStopAndGo = function(event, link){
    try{
      var mediaEls = document.querySelectorAll('video, audio');
      mediaEls.forEach(function(m){
        try{
          if (!m.paused) m.pause();
          if (document.pictureInPictureElement === m && document.exitPictureInPicture) {
            document.exitPictureInPicture().catch(function(){});
          }
        }catch(e){}
      });
    }finally{
      event.preventDefault();
      setTimeout(function(){
        if (link.target === '_blank') {
          window.open(link.href, '_blank');
        } else {
          window.location.href = link.href;
        }
      }, 50);
    }
    return false;
  };
})();
</script>