帶有YouTube的播放器體驗的多合一電影網絡應用
該項目是一個Web應用程序,可讓您在一個地方觀看電影,電視節目和動漫。它旨在成為一個簡單易用的平台,可提供類似YouTube的玩家體驗。 App通過在直觀和美學用戶界面中顯示來自第三方提供商的視頻文件來起作用。內容是從第三方獲取的,並且在客戶端上完全完成了刮擦。這意味著寄養者在其服務器上沒有文件或媒體。所有文件均直接從第三方流式傳輸。
您可以在tv.kurr.dev上找到該應用程序的實時版本。
類似YouTube的播放器體驗- 台式機上的鍵盤快捷鍵,基於手勢的移動性控件,圖片中的圖片,全屏模式,劇院模式,時間表尋求時間表,音量控制,縮略圖預覽,字幕,字幕,本地化的音軌等。
進度- 該應用程序跟踪您在觀看的系列和電影中的進度。您可以隨時繼續觀察您離開的地方。
連續播放- 該應用程序會在該系列的Cinematic Universe中自動播放下一集 /下一部電影。
探索- 通過類型,年級,評級,收藏,電影宇宙等發現新標題。
分享- 將視頻的確切時間發送給您的朋友。
個人資料- 將標題保存到您喜歡的,觀看,觀看,評分的列表中。
創建了項目:Typescript,React,RTK,Firebase(auth,Firestore,實時數據庫),ShadCN/UI,React-Player,Dexie,Cors Proxy等。
這些決策背後的主要目標是創建電影網絡應用程序,而無需任何費用。
出於我的目的,Firebase提供了一個免費的層,足以滿足我的需求。但是您可能會問“為什麼Firestore和實時數據庫?”公平的問題。
實時數據庫定價模型基於存儲的數據量和下載的數據量。對於經常更新且不太大的實體來說,這是一個不錯的選擇。因此,我使用它來存儲用戶的播放設置,例如最後觀看的標題,用戶關閉的位置,等等。
Firestore定價模型基於讀取,寫入和刪除的數量。對於不經常更新的實體來說,這是一個不錯的選擇。因此,我使用它來存儲主要數據,例如用戶保存,觀看,評分,喜歡的標題等。
我還使用Dexie將數據存儲在瀏覽器的索引中。這使我可以在客戶端緩存響應,以減少我的代理服務器上的負載並一般加快應用程序加載時間。我每24小時使緩存無效。這樣做是為了避免數據過時(如果發布新劇集等)的情況。
我使用自己的CORS代理服務器繞過瀏覽器的CORS限制。這是必要的,因為我從不提供API且沒有設置CORS標題的網站上刮擦數據。您可以在CORS代理存儲庫中找到有關服務器的更多信息。
# Clone git repository
git clone https://github.com/kurrx/tv.kurr.dev.git
cd tv.kurr.dev
# Install dependencies
npm install
# Create development .env from example, and edit it
cp .env.example .env.development.local
# Start development server
npm run start
首先,您需要在項目根部創建一個.env.development.local
文件。該文件將包含應用程序工作所需的所有環境變量。您可以將.env.example
文件用作模板。
...
VITE_PROVIDER_URL=https://example.com
VITE_PROXY_URL=https://example.com
VITE_FIREBASE_API_KEY=YOUR_API_KEY
VITE_FIREBASE_AUTH_DOMAIN=AUTH_DOMAIN_HOST
VITE_FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET=STORAGE_BUCKET_HOST
VITE_FIREBASE_MESSAGING_SENDER_ID=SENDER_ID
VITE_FIREBASE_APP_ID=APP_ID
VITE_FIREBASE_DB_URL=DB_URL
...
VITE_FIREBASE_*
- 要配置這些設置,您需要熟悉Firebase及其服務。您可以在官方文檔中找到有關火箱的更多信息。所有變量均可在您的項目設置中的Firebase控制台中找到。
VITE_PROVIDER_URL
提供數據的網站的URL。該項目旨在與一個特定網站合作,出於安全原因,我不會透露該網站。您可以使用其他提供類似數據的網站(否則您需要更改所有打字並自己調整)。請記住,您還需要在以下文件中更改從網站刮擦數據的代碼: api/ajax.ts
, api/parser.ts
。
VITE_PROXY_URL
代理服務器的URL。該服務器用於繞過瀏覽器的CORS限制。為此,您可以使用我的項目-CORS代理。
我明確地創建了此應用程序,目的是培訓和證明自己作為專業人員的技能。我不追求版權視頻內容的分發或銷售的目的。我沒有託管任何文件,它僅鏈接到第三方服務。文件主機和提供商應解決法律問題。我對視頻提供商顯示的任何媒體文件概不負責。
訪問我的應用程序受到高度限制,僅在僅閱讀模式下可用。未經我的允許,沒有人可以訪問受版權保護的視頻內容。即使授予對網站的訪問,也純粹是出於示範目的,此後不久將撤銷訪問。我沒有在服務器上存儲任何受版權保護的數據,也不會公開提供對內容的任何下載/流鏈接。
我使用Web刮擦從公共資源中獲取的所有材料和數據。如果您是版權持有人,並且想從應用程序中刪除內容,則必須在網站上提供數據(提供商的鏈接您可以在此處找到)。我尊重他人的知識產權。如果您認為您的作品已被構成侵犯版權的方式複制,請與我聯繫我網站上的鏈接,以方便您的方式與我聯繫。
麻省理工學院許可證
版權(C)2024 Kurbanali Ruslan [email protected]
特此免費授予任何獲得此軟件副本和相關文檔文件(“軟件”)的人,以無限制處理該軟件,包括無限制,使用,複製,修改,合併的權利,發布,分發,分佈和/或出售該軟件的副本,並允許提供該軟件的人,但要遵守以下條件:
上述版權通知和此許可通知應包含在軟件的所有副本或大量部分中。
該軟件是“原樣”提供的,沒有任何形式的明示或暗示保證,包括但不限於適銷性,特定目的的適用性和非侵權的保證。 IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE軟體.