feat(index.html): Support more playback video formats

fix(index.html): Player adaptation issues
feat(api): Add self-built api method
fix(readme): change docs

Author: levywang

README.md

@@ -1,9 +1,10 @@
 # Random Web Player
-配合接口实现类似抖音效果的随机在线播放器，内置接口提供了 20W+ 随机地址播放
+配合接口实现类似抖音效果的随机在线播放器，内置接口提供了 50W+ 随机地址播放
+
+
+Cloudflare Page: https://random-web-player.pages.dev/
 
-Demo 地址: http://43.154.146.172/
 
-Cloudflare Pages: https://fuli.wwlww.org/
 
 [![GitHub license](https://img.shields.io/github/license/levywang/random_web_player?label=License&logo=github)](https://github.com/levywang/random_web_player "Click to view the repo on Github")
 [![Release Version](https://img.shields.io/github/release/levywang/random_web_player?include_prereleases&label=Release&logo=github)](https://github.com/levywang/random_web_player/releases/latest "Click to view the repo on Github")
@@ -22,7 +23,7 @@ Cloudflare Pages: https://fuli.wwlww.org/
 ## 使用方法
 直接下载 `index.html` 文件，复制到网站根目录，配置好域名即可访问
 
-你也可以设置自己的接口地址，默认接口地址为：`https://api.imwlw.com/v1/get_video`
+你也可以设置自己的接口地址，默认接口地址为：`https://api.wwlww.org/v1/get_video`
 直接查找 `index.html` 文件替换默认接口关键字替换即可
 
 支持以下两种返回格式：
@@ -43,6 +44,21 @@ https://txmov2.a.yximgs.com/upic/2021/07/06/11/BMjAyMTA3MDYxMTIxNDZfMjM2MzkyOTY3
 
 **PS：请确保请求地址支持跨域，否则无法正常播放**
 
+## 自建API教程
+**注意：Python Version >= 3.7**
+
+拷贝项目中的 `random_api.py` 到本地，新建目录，修改为 `main.py`
+
+注意 `random_api.py` 文件中的路径地址，为爬取到的播放源地址，参考 `video_urls.txt`
+
+```bash
+pip3 install fastapi uvicorn
+uvicorn main:app --host 0.0.0.0 --reload
+```
+
+默认运行的API地址：`http://127.0.0.1:8000/`
+
+可以配置反代和域名，替换 `index.html` 中的 `https://api.wwlww.org/v1/get_video`
 
 
 ## 爬虫说明
@@ -67,5 +83,6 @@ pip install requests beautifulsoup4
 ![zoomeye](./zoomeye.png)
 
 
+
 ## License
 This project is provided under a GNU Affero General Public License v3.0 license that can be found in the [LICENSE](LICENSE) file. By using, distributing, or contributing to this project, you agree to the terms and conditions of this license.

index.html

@@ -6,8 +6,8 @@
     <title>视频播放器</title>
     <script src="https://s2.pstatp.com/cdn/expire-1-M/jquery/1.7.1/jquery.min.js"></script>
     <script src="https://s0.pstatp.com/cdn/expire-1-M/hls.js/0.10.1/hls.min.js"></script>
-    <script src="https://s2.pstatp.com/cdn/expire-1-M/dplayer/1.26.0/DPlayer.min.js"></script>
-    <link href="https://s0.pstatp.com/cdn/expire-1-M/dplayer/1.26.0/DPlayer.min.css" rel="stylesheet" />
+    <script src="https://s2.pstatp.com/cdn/expire-1-M/dplayer/1.25.0/DPlayer.min.js"></script>
+    <link href="https://s0.pstatp.com/cdn/expire-1-M/dplayer/1.25.0/DPlayer.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <style>
         * {
@@ -39,7 +39,7 @@
         }
 
         video {
-            object-fit: cover !important;
+            object-fit: cover;
         }
 
         .right-controls {
@@ -223,7 +223,7 @@
     <div class="bottom-controls">
         <button class="next-button" onclick="debounceNext()">
             <i class="fas fa-forward"></i>
-            下一个视频
+            下一个
         </button>
     </div>
     <div class="progress-bar">
@@ -259,7 +259,7 @@
         // 获取视频地址
         async function getVideoUrl() {
             try {
-                const response = await fetch('https://api.imwlw.com/v1/get_video', {
+                const response = await fetch('https://api.wwlww.org/v1/get_video', {
                     method: 'GET',
                     mode: 'cors'
                 });
@@ -297,13 +297,26 @@
                     dp.destroy();
                 }
 
+                // 检查 URL 的格式
+                let videoType;
+                if (url.endsWith('.mp4')) {
+                    videoType = 'auto'; // MP4 格式
+                } else if (url.endsWith('.flv')) {
+                    videoType = 'flv'; // FLV 格式
+                } else if (url.endsWith('.m3u8')) {
+                    videoType = 'hls'; // HLS 格式
+                } else {
+                    console.error('不支持的视频格式');
+                    return;
+                }
+
                 dp = new DPlayer({
                     container: document.getElementById('player'),
                     autoplay: true,
                     theme: '#FADFA3',
                     video: {
                         url: url,
-                        type: 'hls',
+                        type: videoType, // 根据视频类型设置
                         customType: {
                             'hls': function (video, player) {
                                 const hls = new Hls({
@@ -323,17 +336,27 @@
                                         console.log("播放失败:", e);
                                     });
                                 });
+                            },
+                            'flv': function (video, player) {
+                                // FLV 播放逻辑（需要引入 flv.js）
+                                if (flvjs.isSupported()) {
+                                    const flvPlayer = flvjs.createPlayer({
+                                        type: 'flv',
+                                        url: url
+                                    });
+                                    flvPlayer.attachMediaElement(video);
+                                    flvPlayer.load();
+                                    flvPlayer.play();
+                                } else {
+                                    console.error('FLV 不被支持');
+                                }
                             }
                         }
                     },
                     preload: 'auto',
                     volume: 1
                 });
 
-                // 重置点赞数
-                likeCount = 0;
-                document.querySelector('.like span').textContent = '0';
-
                 // 更新进度条
                 dp.on('timeupdate', () => {
                     const percent = (dp.video.currentTime / dp.video.duration) * 100;
@@ -345,6 +368,10 @@
                     debounceNext();
                 });
 
+                // 重置点赞数
+                likeCount = 0;
+                document.querySelector('.like span').textContent = '0';
+
                 // 移除之前的事件监听器
                 const playerElement = document.getElementById('player');
                 playerElement.removeEventListener('touchstart', handleTouchStart);

random_api.py

@@ -0,0 +1,45 @@
+import sys
+import os
+from typing import Union
+from fastapi import FastAPI
+from fastapi.responses import JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi import FastAPI, HTTPException
+import random
+
+
+app = FastAPI()
+
+# 跨域处理
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"], 
+    allow_credentials=True,
+    allow_methods=["*"],  
+    allow_headers=["*"],
+)
+
+def read_random_line(file_path: str) -> str:
+    """Reads a random line from a given file."""
+    if not os.path.isfile(file_path):
+        raise HTTPException(status_code=404, detail="File not found")
+
+    with open(file_path, 'r') as file:
+        lines = file.readlines()
+
+    if not lines:
+        raise HTTPException(status_code=400, detail="File is empty")
+
+    return random.choice(lines).strip()
+
+
+@app.get("/")
+async def get_random_video_url():
+    """Returns a random video URL from the video.txt file."""
+    try:
+        file_path = "./video_urls.txt"
+        random_line = read_random_line(file_path)
+        # Assuming each line contains only one URL
+        return {"url": random_line}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))