<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TVBox | Web版</title>
    <link rel="icon" href="https://cdn.statically.io/img/raw.githubusercontent.com/ERM073/TVBox/main/icon.ico" />
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        iframe {
            width: 600px;
            height: 500px;
            border: none;
        }
    </style>
</head>
<body class="bg-gray-100">
    <nav class="bg-gray-800 py-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a target="_blank" href="https://github.com/ERM073/TVBox" class="text-white text-lg font-semibold">
                <i class="fa-brands fa-github"></i> TVBox
            </a>
            <div>
                <script src="https://storage.ko-fi.com/cdn/widget/Widget_2.js"></script>
                <script>kofiwidget2.init('Support me on Ko-fi', '#72a4f2', 'L3L21D9JB9');kofiwidget2.draw();</script>
            </div>
        </div>
    </nav>

    <div class="container mx-auto px-4 py-8">
        <h1 class="text-3xl font-semibold mb-4">TVBox Web版</h1>

        <div class="flex flex-col lg:flex-row gap-6">
            <div class="w-full lg:w-1/2 space-y-4">
                <div id="video-container">
                    <video id='live-video' class='video-js vjs-default-skin vjs-live vjs-liveui' width="600" controls></video>
                </div>
                <small id="volumeDisplay" class="block text-black">ボリューム: 50%</small>

                <div class="flex flex-wrap gap-2">
                    <button id="prevChannel" class="p-2 bg-gray-700 text-white rounded hover:bg-gray-600"><i class="fa-solid fa-backward"></i> 前のチャンネル</button>
                    <button id="nextChannel" class="p-2 bg-gray-700 text-white rounded hover:bg-gray-600"><i class="fa-solid fa-forward"></i> 次のチャンネル</button>
                    <button id="volumeDown" class="p-2 bg-gray-700 text-white rounded hover:bg-gray-600"><i class="fas fa-volume-down"></i> 音量ダウン</button>
                    <button id="volumeUp" class="p-2 bg-gray-700 text-white rounded hover:bg-gray-600"><i class="fas fa-volume-up"></i> 音量アップ</button>
                </div>

                <div>
                    <label for="sourceSelect" class="block text-sm font-medium text-gray-700">チャンネル切り替え:</label>
                    <select id="sourceSelect" name="sourceSelect" class="mt-1 block py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
    <option value="https://new-api.us.jp.eu.org/memfs/d63e5366-3e8f-4524-a7e3-187f50bac826.m3u8" data-channel-id="td_1">NHK総合</option>
    <option value="https://new-api.us.jp.eu.org/memfs/da6dd894-010c-47df-be0e-1d8403bfb06a.m3u8" data-channel-id="td_2">NHK教育</option>
    <option value="https://new-api.us.jp.eu.org/memfs/273ece55-df89-4242-90fb-7940c2685ae1.m3u8" data-channel-id="td_3">日本テレビ</option>
    <option value="https://new-api.us.jp.eu.org/memfs/008eb7e6-a6eb-4380-8749-5e96bdeacc56.m3u8" data-channel-id="td_4">テレビ朝日</option>
    <option value="https://new-api.us.jp.eu.org/memfs/c89988a1-3fc4-4451-98a3-277b5b95c25d.m3u8" data-channel-id="td_5">TBS</option>
    <option value="https://new-api.us.jp.eu.org/memfs/7556cbb7-5c66-425c-87e3-379f689b6bbd.m3u8" data-channel-id="td_6">テレビ東京</option>
    <option value="https://new-api.us.jp.eu.org/memfs/ffb17f42-1a10-49d7-8318-bb88e75b97c0.m3u8" data-channel-id="td_7">フジテレビ</option>
    <option value="https://new-api.us.jp.eu.org/memfs/3301d6ac-bad4-40b1-81d2-afa797262f6d.m3u8" data-channel-id="td_8">東京MX1</option>

    <option value="https://new-api.us.jp.eu.org/memfs/6e3fdc1a-2e71-4b0a-bacf-00165fe400b8.m3u8" data-channel-id="not_found">NHK BS Premium</option>
    <option value="https://new-api.us.jp.eu.org/memfs/214643f2-4131-4201-a129-17f840392052.m3u8" data-channel-id="bs_1">NHK BS1</option>
    <option value="https://new-api.us.jp.eu.org/memfs/8409c29a-f5f6-4e75-ac22-b73bee7f17cd.m3u8" data-channel-id="bs_2">BS 日テレ</option>
    <option value="https://new-api.us.jp.eu.org/memfs/b1ac918f-f06b-4051-b58b-65f2908ae06c.m3u8" data-channel-id="bs_3">BS テレビ朝日</option>
    <option value="https://new-api.us.jp.eu.org/memfs/c0424a4e-b8f8-482e-915b-bf837792c520.m3u8" data-channel-id="bs_4">BS TBS</option>
    <option value="https://new-api.us.jp.eu.org/memfs/5e1d17d8-7783-49ae-ad41-26cebeb26138.m3u8" data-channel-id="bs_5">BS テレビ東京</option>
    <option value="https://new-api.us.jp.eu.org/memfs/0db41871-d25f-4a06-9963-ef7e46e06984.m3u8" data-channel-id="bs_6">BS フジテレビ</option>
    <option value="https://new-api.us.jp.eu.org/memfs/fa4179d8-d510-4755-b2e3-539d37f44611.m3u8" data-channel-id="bs_12">BS11</option>
    <option value="https://new-api.us.jp.eu.org/memfs/4839e7e3-bc2d-4ee5-9a43-85ee908c93e4.m3u8" data-channel-id="bs_17">Animax</option>
    <option value="https://new-api.us.jp.eu.org/memfs/8e6d6d7c-19cd-4f5a-95b0-5d3682a7e96c.m3u8" data-channel-id="cs_41">AT-X</option>
    <option value="https://new-api.us.jp.eu.org/memfs/49f11c8e-10e1-42f1-a400-4ba92d172e58.m3u8" data-channel-id="cs_39">キッズステーション</option>
    <option value="https://new-api.us.jp.eu.org/memfs/40e561a5-11c8-4cb0-a6a6-1241850bb9c2.m3u8" data-channel-id="cs_28">Dlife</option>
    <option value="https://new-api.us.jp.eu.org/memfs/6202a641-57a8-42c8-b20a-cb14b257f23e.m3u8" data-channel-id="bs_7">WOWOWプライム</option>
    <option value="https://new-api.us.jp.eu.org/memfs/7ecb5fa6-b16c-40db-bf83-08b51050b589.m3u8" data-channel-id="bs_8">WOWOWライブ</option>
    <option value="https://new-api.us.jp.eu.org/memfs/3ccfc934-936d-4bc4-b930-414cb96673ac.m3u8" data-channel-id="bs_9">WOWOWシネマ</option>
    <option value="https://new-api.us.jp.eu.org/memfs/5af8dfa0-6eac-45c1-916c-aadf3b549933.m3u8" data-channel-id="bs_11">スターチャンネル</option>
    <option value="https://new-api.us.jp.eu.org/memfs/8a6bf265-cfcd-4bcb-bfb5-0f386aec122c.m3u8" data-channel-id="cs_27">Actionチャンネル</option>
    <option value="https://new-api.us.jp.eu.org/memfs/619cbc0a-942d-44c2-bd4e-6203bfdb80de.m3u8" data-channel-id="cs_26">スーパー!ドラマTV</option>
    <option value="https://new-api.us.jp.eu.org/memfs/b152f369-82a9-47f5-ac07-71633d7ae93d.m3u8" data-channel-id="cs_16">TBSチャンネル1</option>
    <option value="https://new-api.us.jp.eu.org/memfs/bb0286a8-4b56-43ff-9eae-c6c6f84165ce.m3u8" data-channel-id="cs_17">TBSチャンネル2</option>
    <option value="https://new-api.us.jp.eu.org/memfs/1bf96c9f-287d-4333-95c2-7e61a970037f.m3u8" data-channel-id="cs_13">ファミリー劇場</option>
    <option value="https://new-api.us.jp.eu.org/memfs/22c98893-24a1-4d62-a150-fce4547e860a.m3u8" data-channel-id="cs_12">時代劇専門チャンネル</option>
    <option value="https://new-api.us.jp.eu.org/memfs/fcf4cede-442e-4197-9a28-dc6338ded3b9.m3u8" data-channel-id="cs_2">東映チャンネル</option>
    <option value="https://new-api.us.jp.eu.org/memfs/87cfc797-5947-4ac2-925b-7fefd3e6e3ef.m3u8" data-channel-id="cs_4">チャンネルNECO</option>
    <option value="https://new-api.us.jp.eu.org/memfs/d91ce543-1ac9-412a-9a87-cc7525d59eaa.m3u8" data-channel-id="cs_6">ムービープラス</option>
    <option value="https://new-api.us.jp.eu.org/memfs/e0078836-f95a-4370-9238-ef0791ab69a0.m3u8" data-channel-id="bs_24">日本映画専門チャンネル</option>
    <option value="https://new-api.us.jp.eu.org/memfs/684a887f-1273-48d1-ae93-76048012ad20.m3u8" data-channel-id="cs_38">歌謡ポップスチャンネル</option>
    <option value="https://new-api.us.jp.eu.org/memfs/9becca40-ea6a-4986-a488-518139f36c61.m3u8" data-channel-id="cs_22">チャンネル銀河</option>
    <option value="https://new-api.us.jp.eu.org/memfs/bae54e99-075f-4d84-abca-0849929d3bca.m3u8" data-channel-id="cs_29">LaLaTV</option>
    <option value="https://new-api.us.jp.eu.org/memfs/dd2d691a-e6f0-495e-ad22-c70044019364.m3u8" data-channel-id="cs_32">Mnet</option>
    <option value="https://new-api.us.jp.eu.org/memfs/12ef6d8d-aabd-4392-aaa1-2d4723109ee5.m3u8" data-channel-id="cs_37">Music ON! TV</option>

    <option value="https://new-api.us.jp.eu.org/memfs/92104802-2280-481a-8b2b-8a3e5f5cb3e0.m3u8" data-channel-id="cs_50">CNN J</option>
    <option value="https://new-api.us.jp.eu.org/memfs/18b78787-28e1-4f57-95a8-04765b02401a.m3u8" data-channel-id="cs_7">スカイA</option>
    <option value="https://new-api.us.jp.eu.org/memfs/1312bf2b-7d19-4217-8ae2-4296d1d847c4.m3u8" data-channel-id="cs_10">ゴルフネットワーク</option>
    <option value="https://new-api.us.jp.eu.org/memfs/bc9f6dc9-1848-45cc-b966-76ea4f21a8e8.m3u8" data-channel-id="cs_8">GAORA</option>
    <option value="https://new-api.us.jp.eu.org/memfs/596866ea-7fac-4210-8e72-646048d5ca21.m3u8" data-channel-id="cs_9">日テレジータス</option>    <option value="http://api-tvbox.us.jp.eu.org:8080/memfs/1d07a7c7-1a7a-43f6-bbb2-cd8d9f6f9513.m3u8">CNN J</option>
    <option value="https://new-api.us.jp.eu.org/memfs/457009d8-98b3-4b8d-8575-651adb8469be.m3u8" data-channel-id="bs_18">Jスポーツ1</option>
    <option value="https://new-api.us.jp.eu.org/memfs/a8b6a13e-a8bc-4e3a-8a1d-4fd7d434a4a1.m3u8" data-channel-id="bs_19">Jスポーツ2</option>
    <option value="https://new-api.us.jp.eu.org/memfs/f8669847-d2c9-467e-83c6-1eb988acb67b.m3u8" data-channel-id="bs_20">Jスポーツ3</option>
    <option value="https://new-api.us.jp.eu.org/memfs/ccd6d5bc-e8bf-43b7-980d-0278d174e55e.m3u8" data-channel-id="bs_21">Jスポーツ4</option>

    <option value="https://ssai-variants.streaks.jp/v5/tver-simul-ntv/3865af1a962349ceaa5efe46008030db/ed089bc4b7f342b3bc8a7a2567039442/manifest/13df2e5de86b5ff0c5c3522d82e73a5fbf55aac1/pro-mt-174-7969/2844ffba-a4ae-4a73-88d2-7ede53e7d32c/0.m3u8?pdt=-8968&session=2844ffba-a4ae-4a73-88d2-7ede53e7d32c&vt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGdlIjoibnR2LWxpdmUtY2RuLnR2ZXIuanAiLCJvZmZzZXQiOjksInBkdCI6Ii04OTY4In0.Ry9sKo7WVIctz239DxsjMQk731v8Bzk-IBrNpDxP3u0&_HLS_skip=YES">代替 日テレ系</option>
    <option value="https://ssai-variants.streaks.jp/v5/tver-simul-ex/498c4512f66846f1b0a5a3320ee035c3/ce98cb0b48994b50a76dba08ea894e24/manifest/13df2e5de86b5ff0c5c3522d82e73a5fbf55aac1/pro-mt-175-8158/b92b4043-6632-4d74-b9c7-d8444a4eb355/0.m3u8?pdt=-16847&session=b92b4043-6632-4d74-b9c7-d8444a4eb355&vt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGdlIjoiZXgtbGl2ZS1jZG4udHZlci5qcCIsIm9mZnNldCI6OSwicGR0IjoiLTE2ODQ3In0.LmScKQAVVQYt76GM-z64D8Py0KfYRz-3H5zc6GDcBj0">代替 テレ朝系</option>
    <option value="https://ssai-variants.streaks.jp/v5/tver-simul-tbs/8e4c80725b9842cdb0f6f91260945222/b72f7e116957436b824f95d5138ea7a3/manifest/13df2e5de86b5ff0c5c3522d82e73a5fbf55aac1/pro-mt-176-7925/2a38d855-a521-4d96-a6c7-933a0bf29754/0.m3u8?pdt=-9133&session=2a38d855-a521-4d96-a6c7-933a0bf29754&vt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGdlIjoidGJzLWxpdmUtY2RuLnR2ZXIuanAiLCJvZmZzZXQiOjksInBkdCI6Ii05MTMzIn0.wWY9OBF4yy2xGYlTx_N_eud7S1bwrGw7oXya1meGNFY">代替 TBS系</option>
    <option value="https://ssai-variants.streaks.jp/v5/tver-simul-tx/035622a82bcb46bc8e41ca5351f95a00/3887c96991ce4ae1bec43ea19f24c4d5/manifest/13df2e5de86b5ff0c5c3522d82e73a5fbf55aac1/pro-mt-177-8159/0f5f5883-a6c1-4cd1-a4c6-0f0a14c9e49b/0.m3u8?pdt=-11501&session=0f5f5883-a6c1-4cd1-a4c6-0f0a14c9e49b&vt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGdlIjoidHgtbGl2ZS1jZG4udHZlci5qcCIsIm9mZnNldCI6OSwicGR0IjoiLTExNTAxIn0.ENL1yqihdtixoLM2vqtt9oZ3caukXFFuLBwGeXXwUH0">代替 テレ東系</option>
    <option value="https://ssai-variants.streaks.jp/v5/tver-simul-cx/a78ebf1910144ba287907ec691bdc863/4817bf371f214463a3609e17a365f098/manifest/13df2e5de86b5ff0c5c3522d82e73a5fbf55aac1/pro-mt-178-7884/2d0e62ec-afcb-4689-a1f0-d17fb79b5562/0.m3u8?pdt=-6627&session=2d0e62ec-afcb-4689-a1f0-d17fb79b5562&vt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGdlIjoiY3gtbGl2ZS1jZG4udHZlci5qcCIsIm9mZnNldCI6OSwicGR0IjoiLTY2MjcifQ.rGchZoAv-VWLdrkowF0VYMb-geWaK_ZcFhYhXb5HolM">代替 フジテレビ系</option>

    <option value="https://new-api.us.jp.eu.org/memfs/cd62732d-3583-42cf-a498-f4c4bf22f9d7.m3u8">お笑い</option>
    <option value="https://new-api.us.jp.eu.org/memfs/6dcfdf11-e427-4f8d-9ae8-ae4c2283fdf5.m3u8">ウェザーニュース</option>
    <option value="https://new-api.us.jp.eu.org/memfs/e73e5f36-08c4-4662-abd5-6f9b0cab4edd.m3u8">日テレNews24</option>
                    </select> 
                </div>

                <small>TVBox Web版</small>
                <p>Windowsユーザーはインストール版をご利用いただけます</p>
                <a href="https://tvbox.us.jp.eu.org/DL/" target="_blank">
                    <img src="https://cdn.statically.io/img/i0.wp.com/www.librasol.com.br/wp-content/uploads/2018/09/windows-button-download.png" width="170"/>
                </a>
            </div>

            <div >
                <!--<h2 class="text-xl font-semibold text-center mb-2">番組表</h2>
                <div class="aspect-w-16 aspect-h-9 border border-gray-300">
                    <iframe src="https://www.tvkingdom.jp/sp/chart/23.action" title="番組表"></iframe>-->
                </div>
            </div>
        </div>
    </div>

    <script src="https://vjs.zencdn.net/8.17.4/video.min.js"></script>
    <link href="https://vjs.zencdn.net/8.17.4/video-js.css" rel="stylesheet" />
<script>
  var player = videojs('live-video', {
    liveui: true,
    techOrder: ['html5'],
    html5: {
            hls: {
            overrideNative: true,
            enableLowInitialPlaylist: true,
            withCredentials: false,
            useBandwidthFromBuffer: true,
            useDevicePixelRatio: true,
            enableLowLatencyMode: false,
        }
    }
  });

  // 3分ごとに音声同期を微調整する処理
  setInterval(() => {
    if (player && !player.paused()) { // 再生中のみ実行
      const currentTime = player.currentTime();
      player.currentTime(currentTime + 0.01); // ほんの少し進めることで同期を修正
      console.log("音声同期リセット:", currentTime);
    }
  }, 60000); // 3分ごとに実行

  // 初期ボリュームを半分に設定
  player.volume(0.5);
  var volumeDisplay = document.getElementById('volumeDisplay');
  volumeDisplay.innerText = 'ボリューム: ' + Math.round(player.volume() * 100) + '%'; // ボリューム表示を初期化

  // チャンネルリストを取得
  var select = document.getElementById('sourceSelect');
  var options = Array.from(select.options);
  var currentChannelIndex = 0;

  // 初期チャンネルを設定（初回再生は行わない）
  player.src({ src: options[currentChannelIndex].value, type: 'application/x-mpegurl' });

  // チャンネル変更時の処理
  select.addEventListener('change', function() {
    currentChannelIndex = select.selectedIndex; // 現在のインデックスを更新
    player.src({ src: options[currentChannelIndex].value, type: 'application/x-mpegurl' });
    player.play(); // チャンネル変更時に再生
  });

  // 前のチャンネルボタン
  document.getElementById('prevChannel').addEventListener('click', function() {
    currentChannelIndex = (currentChannelIndex - 1 + options.length) % options.length;
    player.src({ src: options[currentChannelIndex].value, type: 'application/x-mpegurl' });
    select.selectedIndex = currentChannelIndex; // セレクトボックスの表示を更新
    player.play(); // チャンネル変更時に再生
  });

  // 次のチャンネルボタン
  document.getElementById('nextChannel').addEventListener('click', function() {
    currentChannelIndex = (currentChannelIndex + 1) % options.length;
    player.src({ src: options[currentChannelIndex].value, type: 'application/x-mpegurl' });
    select.selectedIndex = currentChannelIndex; // セレクトボックスの表示を更新
    player.play(); // チャンネル変更時に再生
  });

  // ボリュームコントロール
  document.getElementById('volumeDown').addEventListener('click', function() {
    let volume = player.volume();
    if (volume > 0) {
      player.volume(Math.max(0, volume - 0.05)); // ボリュームを減少
      volumeDisplay.innerText = 'ボリューム: ' + Math.round(player.volume() * 100) + '%'; // ボリューム表示を更新
    }
  });

  document.getElementById('volumeUp').addEventListener('click', function() {
    let volume = player.volume();
    if (volume < 1) {
      player.volume(Math.min(1, volume + 0.05)); // ボリュームを増加
      volumeDisplay.innerText = 'ボリューム: ' + Math.round(player.volume() * 100) + '%'; // ボリューム表示を更新
    }
  });


</script>

<script>
  // 画面幅が768px以下（モバイルサイズ）の場合
  if (window.innerWidth <= 768) {
    // /mobile にリダイレクト
    window.location.href = "/mobile";
  }
</script>
</body>
</html>
