Add README.md, index2.html, and wach2.html for FreeTube API example

2025-09-15 16:11:29 +00:00
parent 556278dcdc
commit 811b90c479
3 changed files with 107 additions and 0 deletions
@@ -0,0 +1,26 @@
+# Add-Free YouTube (FreeTube API Example)
+
+This project demonstrates how to use the FreeTube API to search and watch YouTube videos without ads or tracking, using simple HTML pages.
+
+## Files
+
+- `index2.html`: Search for YouTube videos using the FreeTube API. Results link to the video page.
+- `wach2.html`: Watch a selected video by loading its details from the FreeTube API.
+- `index.html` and `wach.html`: (Original files, not using FreeTube API)
+
+## How it Works
+
+1. Open `index2.html` in your browser.
+2. Enter a search query and submit.
+3. Click a video title to open `wach2.html` and watch the video.
+
+## API Reference
+- [FreeTube API](https://github.com/FreeTubeApp/FreeTube)
+
+## Notes
+- This is a demo and may require a working FreeTube API endpoint.
+- For privacy and ad-free viewing.
+
+---
+
+Feel free to modify or extend this project!
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index2 - FreeTube API Example</title>
+</head>
+<body>
+    <h1>Welcome to Index2 (FreeTube API Example)</h1>
+    <form id="searchForm">
+        <input type="text" id="searchQuery" placeholder="Search YouTube...">
+        <button type="submit">Search</button>
+    </form>
+    <div id="results"></div>
+    <script>
+        document.getElementById('searchForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const query = document.getElementById('searchQuery').value;
+            const resultsDiv = document.getElementById('results');
+            resultsDiv.innerHTML = 'Searching...';
+            // Example FreeTube API endpoint (replace with actual endpoint if needed)
+            const apiUrl = `https://api.freetubeapp.io/api/v1/search?q=${encodeURIComponent(query)}`;
+            try {
+                const res = await fetch(apiUrl);
+                const data = await res.json();
+                if (Array.isArray(data)) {
+                    resultsDiv.innerHTML = data.map(video => `
+                        <div>
+                            <a href="wach2.html?id=${video.id}">${video.title}</a>
+                        </div>
+                    `).join('');
+                } else {
+                    resultsDiv.innerHTML = 'No results found.';
+                }
+            } catch (err) {
+                resultsDiv.innerHTML = 'Error fetching results.';
+            }
+        });
+    </script>
+</body>
+</html>
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wach2 - FreeTube API Example</title>
+</head>
+<body>
+    <h1>Wach2 (FreeTube API Example)</h1>
+    <div id="video"></div>
+    <script>
+        // Get video ID from URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const videoId = urlParams.get('id');
+        const videoDiv = document.getElementById('video');
+        if (!videoId) {
+            videoDiv.innerHTML = 'No video ID provided.';
+        } else {
+            // Example FreeTube API endpoint (replace with actual endpoint if needed)
+            const apiUrl = `https://api.freetubeapp.io/api/v1/videos/${videoId}`;
+            fetch(apiUrl)
+                .then(res => res.json())
+                .then(data => {
+                    if (data && data.id) {
+                        videoDiv.innerHTML = `
+                            <h2>${data.title}</h2>
+                            <video width="640" controls src="${data.url}"></video>
+                            <p>${data.description || ''}</p>
+                        `;
+                    } else {
+                        videoDiv.innerHTML = 'Video not found.';
+                    }
+                })
+                .catch(() => {
+                    videoDiv.innerHTML = 'Error loading video.';
+                });
+        }
+    </script>
+</body>
+</html>