Hugging Face's logo

Spaces:
datxy
/
txt
Running

App Files Community
datxy commited on
Commit
ebc96bb
·
verified ·
1 Parent(s): ec4e9fa

Update m3u8.html

Browse files
Files changed (1) hide show
  1. m3u8.html +2 -20
m3u8.html CHANGED
@@ -15,12 +15,12 @@
15
  font-family: Arial, sans-serif;
16
  background-color: #f4f5f7;
17
  padding: 20px;
18
-
19
  display: flex;
20
  flex-direction: column;
21
  align-items: center;
22
  gap: 20px;
23
- min-height: 200vh;
 
24
  position: relative;
25
  }
26
  /* === 1. 上半部分：左右布局 === */
@@ -50,7 +50,6 @@
50
  object-fit: contain;
51
  background-color: #000;
52
  }
53
-
54
  /* 右侧 iframe */
55
  .iframe-section {
56
  flex: 3; /* 占 30% */
@@ -65,7 +64,6 @@
65
  border: none;
66
  display: block;
67
  }
68
-
69
  /* === 2. 下半部分：输入框和按钮 === */
70
  .controls-container {
71
  display: flex;
@@ -79,7 +77,6 @@
79
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
80
  flex-wrap: wrap;
81
  }
82
-
83
  .controls-container input[type="text"] {
84
  flex: 1;
85
  min-width: 300px;
@@ -93,7 +90,6 @@
93
  .controls-container input[type="text"]:focus {
94
  border-color: #28a745;
95
  }
96
-
97
  .controls-container button {
98
  padding: 12px 24px;
99
  border: none;
@@ -127,7 +123,6 @@
127
  .controls-container button.home-btn:hover {
128
  background-color: #5a6268;
129
  }
130
-
131
  /* 录制闪烁状态 */
132
  .flashing {
133
  background-color: #dc3545 !important;
@@ -137,7 +132,6 @@
137
  0%, 100% { opacity: 1; }
138
  50% { opacity: 0.6; }
139
  }
140
-
141
  /* 响应式：屏幕较小时转为上下布局 */
142
  @media (max-width: 900px) {
143
  body { padding-top: 60px; }
@@ -163,9 +157,6 @@
163
  </style>
164
  </head>
165
  <body>
166
-
167
-
168
-
169
  <div class="main-layout">
170
  <div class="video-section">
171
  <video id="video" controls></video>
@@ -174,7 +165,6 @@
174
  <iframe id="iframe" scrolling="yes" src="base64.html"></iframe>
175
  </div>
176
  </div>
177
-
178
  <div class="controls-container">
179
  <input type="text" id="videoUrl" placeholder="输入 m3u8 或视频地址..." value="https://cn-sdqd-cu-01-19.bilivideo.com/live-bvc/681493/live_18200769_73809732/index.m3u8?expires=1742628833&len=0&oi=0x240882072463a0d0711566ed1e98277e&pt=web&qn=10000&trid=100714254ea634a55b603e35b2629b67de59&sigparams=cdn,expires,len,oi,pt,qn,trid&cdn=cn-gotcha01&sign=90fba980adc1f5f48af2bc98b5aaa00f&site=0285fb729986422f272841bef3deeab8&free_type=0&mid=10055177&sche=ban&bvchls=1&sid=cn-sdqd-cu-01-19&chash=1&bmt=1&sg=lr&trace=41&isp=cu&rg=North&pv=Beijing&info_source=origin&sk=2838788edf86108c945c76c1f4ff231a&p2p_type=1&score=1&deploy_env=prod&hot_cdn=0&suffix=origin&source=puv3_onetier&pp=rtmp&sl=1&flvsk=d72c2fc79035cad0f65ee3b59d8bbef0&origin_bitrate=476800&vd=nc&zoneid_l=151339010&sid_l=stream_name_cold&src=puv3&order=1">
180
 
@@ -185,18 +175,15 @@
185
 
186
  <button type="button" class="home-btn" onclick="window.location.href='/'">返回首页</button>
187
  </div>
188
-
189
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
190
  <script>
191
  let mediaRecorder;
192
  let recordedChunks = [];
193
  let flashInterval;
194
-
195
  // 播放视频流
196
  function playVideo() {
197
  const url = document.getElementById('videoUrl').value;
198
  const video = document.getElementById('video');
199
-
200
  if (Hls.isSupported()) {
201
  const hls = new Hls();
202
  hls.loadSource(url);
@@ -213,12 +200,10 @@
213
  alert('您的浏览器不支持 HLS 播放！');
214
  }
215
  }
216
-
217
  // 开始录制
218
  function startRecording() {
219
  const video = document.getElementById('video');
220
  const recordButton = document.getElementById('recordButton');
221
-
222
  try {
223
  const stream = video.captureStream();
224
  mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
@@ -239,7 +224,6 @@
239
  recordedChunks = [];
240
  URL.revokeObjectURL(url);
241
  };
242
-
243
  mediaRecorder.start();
244
  console.log('Recording started...');
245
 
@@ -249,7 +233,6 @@
249
  alert("无法启动录制，请确保视频正在播放且浏览器支持捕获流。");
250
  }
251
  }
252
-
253
  // 停止录制并保存
254
  function stopRecording() {
255
  const recordButton = document.getElementById('recordButton');
@@ -260,7 +243,6 @@
260
  recordButton.classList.remove('flashing');
261
  }
262
  </script>
263
-
264
  <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
265
  <script>LA.init({id:"JRHGRBPWC7lJIaXq",ck:"JRHGRBPWC7lJIaXq"})</script>
266
  </body>
 
15
  font-family: Arial, sans-serif;
16
  background-color: #f4f5f7;
17
  padding: 20px;
 
18
  display: flex;
19
  flex-direction: column;
20
  align-items: center;
21
  gap: 20px;
22
+ /* 👇 修复点：将 200vh 改回 100vh，消除底部多余空白 */
23
+ min-height: 100vh;
24
  position: relative;
25
  }
26
  /* === 1. 上半部分：左右布局 === */
 
50
  object-fit: contain;
51
  background-color: #000;
52
  }
 
53
  /* 右侧 iframe */
54
  .iframe-section {
55
  flex: 3; /* 占 30% */
 
64
  border: none;
65
  display: block;
66
  }
 
67
  /* === 2. 下半部分：输入框和按钮 === */
68
  .controls-container {
69
  display: flex;
 
77
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
78
  flex-wrap: wrap;
79
  }
 
80
  .controls-container input[type="text"] {
81
  flex: 1;
82
  min-width: 300px;
 
90
  .controls-container input[type="text"]:focus {
91
  border-color: #28a745;
92
  }
 
93
  .controls-container button {
94
  padding: 12px 24px;
95
  border: none;
 
123
  .controls-container button.home-btn:hover {
124
  background-color: #5a6268;
125
  }
 
126
  /* 录制闪烁状态 */
127
  .flashing {
128
  background-color: #dc3545 !important;
 
132
  0%, 100% { opacity: 1; }
133
  50% { opacity: 0.6; }
134
  }
 
135
  /* 响应式：屏幕较小时转为上下布局 */
136
  @media (max-width: 900px) {
137
  body { padding-top: 60px; }
 
157
  </style>
158
  </head>
159
  <body>
 
 
 
160
  <div class="main-layout">
161
  <div class="video-section">
162
  <video id="video" controls></video>
 
165
  <iframe id="iframe" scrolling="yes" src="base64.html"></iframe>
166
  </div>
167
  </div>
 
168
  <div class="controls-container">
169
  <input type="text" id="videoUrl" placeholder="输入 m3u8 或视频地址..." value="https://cn-sdqd-cu-01-19.bilivideo.com/live-bvc/681493/live_18200769_73809732/index.m3u8?expires=1742628833&len=0&oi=0x240882072463a0d0711566ed1e98277e&pt=web&qn=10000&trid=100714254ea634a55b603e35b2629b67de59&sigparams=cdn,expires,len,oi,pt,qn,trid&cdn=cn-gotcha01&sign=90fba980adc1f5f48af2bc98b5aaa00f&site=0285fb729986422f272841bef3deeab8&free_type=0&mid=10055177&sche=ban&bvchls=1&sid=cn-sdqd-cu-01-19&chash=1&bmt=1&sg=lr&trace=41&isp=cu&rg=North&pv=Beijing&info_source=origin&sk=2838788edf86108c945c76c1f4ff231a&p2p_type=1&score=1&deploy_env=prod&hot_cdn=0&suffix=origin&source=puv3_onetier&pp=rtmp&sl=1&flvsk=d72c2fc79035cad0f65ee3b59d8bbef0&origin_bitrate=476800&vd=nc&zoneid_l=151339010&sid_l=stream_name_cold&src=puv3&order=1">
170
 
 
175
 
176
  <button type="button" class="home-btn" onclick="window.location.href='/'">返回首页</button>
177
  </div>
 
178
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
179
  <script>
180
  let mediaRecorder;
181
  let recordedChunks = [];
182
  let flashInterval;
 
183
  // 播放视频流
184
  function playVideo() {
185
  const url = document.getElementById('videoUrl').value;
186
  const video = document.getElementById('video');
 
187
  if (Hls.isSupported()) {
188
  const hls = new Hls();
189
  hls.loadSource(url);
 
200
  alert('您的浏览器不支持 HLS 播放！');
201
  }
202
  }
 
203
  // 开始录制
204
  function startRecording() {
205
  const video = document.getElementById('video');
206
  const recordButton = document.getElementById('recordButton');
 
207
  try {
208
  const stream = video.captureStream();
209
  mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
 
224
  recordedChunks = [];
225
  URL.revokeObjectURL(url);
226
  };
 
227
  mediaRecorder.start();
228
  console.log('Recording started...');
229
 
 
233
  alert("无法启动录制，请确保视频正在播放且浏览器支持捕获流。");
234
  }
235
  }
 
236
  // 停止录制并保存
237
  function stopRecording() {
238
  const recordButton = document.getElementById('recordButton');
 
243
  recordButton.classList.remove('flashing');
244
  }
245
  </script>
 
246
  <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
247
  <script>LA.init({id:"JRHGRBPWC7lJIaXq",ck:"JRHGRBPWC7lJIaXq"})</script>
248
  </body>