index.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Video Parser by 道长</title>
  7. <link rel="icon" href="/public/icon.svg" type="image/x-icon">
  8. <style>
  9. * {
  10. box-sizing: border-box;
  11. }
  12. body {
  13. display: flex;
  14. justify-content: center;
  15. align-items: center;
  16. min-height: 100vh;
  17. margin: 0;
  18. font-family: Arial, sans-serif;
  19. background-color: #f4f7fa;
  20. }
  21. .container {
  22. width: 100%;
  23. max-width: 600px;
  24. padding: 30px;
  25. background-color: #fff;
  26. border-radius: 8px;
  27. box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  28. text-align: center;
  29. }
  30. .container h2 {
  31. margin-bottom: 10px;
  32. font-size: 22px;
  33. color: #333;
  34. }
  35. .container p {
  36. font-size: 16px;
  37. color: #666;
  38. margin-bottom: 20px;
  39. }
  40. .input-group {
  41. position: relative;
  42. display: flex;
  43. align-items: center;
  44. margin-bottom: 15px;
  45. }
  46. textarea {
  47. width: 100%;
  48. min-height: 60px;
  49. padding: 12px;
  50. font-size: 16px;
  51. border: 1px solid #ddd;
  52. border-radius: 4px;
  53. outline: none;
  54. resize: none;
  55. line-height: 1.5;
  56. overflow-y: auto;
  57. }
  58. .clear-button {
  59. position: absolute;
  60. bottom: 8px;
  61. right: 8px;
  62. background: #ff6b6b;
  63. border: none;
  64. border-radius: 50%;
  65. width: 24px;
  66. height: 24px;
  67. cursor: pointer;
  68. font-weight: bold;
  69. color: #fff;
  70. display: flex;
  71. align-items: center;
  72. justify-content: center;
  73. transition: background-color 0.3s;
  74. opacity: 0.8;
  75. }
  76. .clear-button:hover {
  77. background-color: #ff4949;
  78. }
  79. .button-group {
  80. display: flex;
  81. justify-content: center;
  82. gap: 10px;
  83. margin-top: 10px;
  84. }
  85. button {
  86. padding: 10px 24px;
  87. font-size: 16px;
  88. color: #fff;
  89. background-color: #007bff;
  90. border: none;
  91. border-radius: 4px;
  92. cursor: pointer;
  93. transition: background-color 0.3s;
  94. }
  95. button:hover {
  96. background-color: #0056b3;
  97. }
  98. .example-button {
  99. font-size: 16px;
  100. color: #333;
  101. background-color: #f1f1f1;
  102. border: 1px solid #ddd;
  103. border-radius: 4px;
  104. padding: 10px 20px;
  105. cursor: pointer;
  106. transition: background-color 0.3s;
  107. }
  108. .example-button:hover {
  109. background-color: #e2e2e2;
  110. }
  111. .result {
  112. margin-top: 20px;
  113. padding: 15px;
  114. font-size: 16px;
  115. color: #333;
  116. background-color: #f9f9f9;
  117. border: 1px solid #ddd;
  118. border-radius: 4px;
  119. position: relative;
  120. word-break: break-all;
  121. text-align: left;
  122. }
  123. .copy-button {
  124. position: absolute;
  125. bottom: 8px;
  126. right: 8px;
  127. padding: 6px 12px;
  128. font-size: 14px;
  129. color: #333;
  130. background-color: #e6e6e6;
  131. border: none;
  132. border-radius: 4px;
  133. cursor: pointer;
  134. opacity: 0.8;
  135. }
  136. .copy-button:hover {
  137. background-color: #d4d4d4;
  138. }
  139. </style>
  140. </head>
  141. <body>
  142. <div class="container">
  143. <h2>视频直链解析器 v1.0.2 2024/11/26</h2>
  144. <p>请输入抓包获取的央视网点播视频直链</p>
  145. <div class="input-group">
  146. <textarea id="urlInput" placeholder="输入网页链接"></textarea>
  147. <button class="clear-button" onclick="clearInput()">×</button>
  148. </div>
  149. <div class="button-group">
  150. <button onclick="parseUrl()">解析</button>
  151. <button class="example-button" onclick="fillExample1()">示例地址1</button>
  152. <button class="example-button" onclick="fillExample2()">示例地址2</button>
  153. </div>
  154. <div id="result" class="result" style="display: none;">
  155. <span id="parsedUrl"></span>
  156. <button class="copy-button" onclick="copyToClipboard()">复制</button>
  157. </div>
  158. </div>
  159. <script>
  160. function parseUrl() {
  161. const inputUrl = document.getElementById("urlInput").value.trim();
  162. const resultDiv = document.getElementById("result");
  163. const parsedUrlSpan = document.getElementById("parsedUrl");
  164. if (!inputUrl) {
  165. resultDiv.style.display = 'none';
  166. alert("请输入有效的链接");
  167. return;
  168. }
  169. try {
  170. const baseUrl = `${location.origin}/proxy/央视大全[官]/asp/h5e/hls`;
  171. const regex = /\/asp\/(?:h5e\/)?hls\/(.+)/;
  172. const match = inputUrl.match(regex);
  173. if (match) {
  174. const proxyUrl = `${baseUrl}/${match[1]}`;
  175. parsedUrlSpan.textContent = proxyUrl;
  176. resultDiv.style.display = 'block';
  177. } else {
  178. resultDiv.style.display = 'none';
  179. alert("链接格式无效,请输入包含 /asp/h5e 或 /asp/hls 的链接");
  180. }
  181. } catch (error) {
  182. resultDiv.style.display = 'none';
  183. alert("处理链接时出错,请检查输入格式");
  184. }
  185. }
  186. function copyToClipboard() {
  187. const parsedUrl = document.getElementById("parsedUrl").textContent;
  188. copyText(parsedUrl);
  189. }
  190. function copyText(str) {
  191. if (navigator.clipboard && window.isSecureContext) {
  192. navigator.clipboard.writeText(str).then(() => {
  193. alert("链接已通过第1种方式复制到剪贴板");
  194. }, () => {
  195. alert("复制失败,请手动复制");
  196. });
  197. } else {
  198. let textArea = document.createElement("textarea");
  199. textArea.value = str;
  200. textArea.style.position = "absolute";
  201. textArea.style.opacity = 0;
  202. textArea.style.left = "-999999px";
  203. textArea.style.top = "-999999px";
  204. document.body.appendChild(textArea);
  205. textArea.focus();
  206. textArea.select();
  207. let res = new Promise((res, rej) => {
  208. res(() => {
  209. document.execCommand('copy');
  210. textArea.remove();
  211. });
  212. rej(false);
  213. });
  214. res.then((res) => {
  215. res();
  216. alert("链接已通过第2种方式复制到剪贴板");
  217. })
  218. }
  219. }
  220. function fillExample1() {
  221. document.getElementById("urlInput").value = "https://dh5.cntv.myalicdn.com/asp/h5e/hls/2000/0303000a/3/default/7048673ae21f4929a30701318754497b/2000.m3u8";
  222. }
  223. function fillExample2() {
  224. document.getElementById("urlInput").value = "https://hls09.cntv.myhwcdn.cn/asp/hls/2000/0303000a/3/default/d9b0eaa065934f25abd193d391f731b6/2000.m3u8";
  225. }
  226. function clearInput() {
  227. document.getElementById("urlInput").value = "";
  228. document.getElementById("result").style.display = "none";
  229. }
  230. </script>
  231. </body>
  232. </html>