使用flutter編寫一款視訊應用

NCER發表於2020-12-29

先上原始碼地址:github.com/Mockingbird1234/skapp

開源不易,喜歡的朋友可以給個star支援一下。

軟體介紹

skapp是一款視訊播放軟體,它既能播放電影,同時也可以切換音樂助手來播放主流站點的音樂,這個軟體依賴介面服務端(服務端使用koajs編寫,暫未開源),原理是使用蘋果cms採集資源入庫,使用服務端讀取資料庫資料進行整合,app端呼叫介面展示資料。所以這款軟體可以實現無縫對接其他站長的資料資源。

軟體介面

下面通過一些截圖來簡單介紹下軟體的功能。

歡迎介面

  • 這是軟體的歡迎介面,可以在服務端動態配置是否顯示

首頁

  • 這是軟體的首頁,之所以這樣設計是因為當時只是想簡單的做一款分類播放軟體,流程不必太複雜,所以底部是蘋果cms的一級分類,頭部是蘋果cms的二級分類,底部的圖使用的是iconfont裡的圖示,關於如何在flutter中使用這種多色圖示,打算以後出個教程詳細介紹下。

預覽介面

  • 這是軟體的預覽介面,它的底色會根據電影圖片的主色調進行改變,原理是使用一個叫做colorpick的包進行拾色動態渲染,主要是模仿豆瓣電影做的這種效果。這個頁面實現起來還是比較複雜的,有很多動畫效果,感興趣的可以下載軟體的release版本體驗下。

播放介面

  • 這是軟體的播放介面,使用tencent_player進行視訊播放,目前支援.m3u8、.mp4以及網頁形式的播放源,可以在這個介面選擇視訊播放源以及清晰度。這裡以後想加入投屏的功能,但是目前還沒有思路,知道如何加投屏的小夥伴可以在評論區給我留言。

主要功能區

  • 這是軟體的主要功能區,因為軟體功能不多,所以沒有單獨整個介面來進行軟體設定,而是直接把功能都放到了slider裡面。在這裡面可以更換皮膚,更換皮膚原理是定義一個全域性變數儲存起來顏色,點選小圓點來修改全域性變數就可以了,暗黑模式和換膚原理一樣,flutter天生支援這種功能,還是非常方便的。點選音樂助手就可以切換到音樂播放介面,稍後會做介紹。直播按鈕會使用主流直播源進行播放,目前可能不能使用,自定義片源功能的初衷是由於本人伺服器配置較低,資源較少,使用這個功能可以在使用者本地或線上搭建自己的服務端進行無縫對接,這樣可以減輕我自己伺服器的壓力。

音樂助手

  • 這是點選音樂助手後切換的介面,和電影是一樣的介面,實現原理是整合了另一款開源專案-洛雪音樂助手,服務端統一進行整合開放api。

音樂播放

  • 這是音樂播放介面,可以切換到歌詞介面(截圖未提供),這裡提供加入歌單,上下歌曲切換,下載音樂等功能。

以上介紹了軟體的大體功能,此外還有以下小功能:

  1. 搜尋

  2. 廣告位,分別在軟體啟動、電影播放以及電影暫停處增加了廣告位,可以在服務端進行動態配置

3.友盟統計,可以使用友盟統計功能

以上功能可能站長比較需要。


如果你是普通使用者,可以到github下載專案的release版本進行體驗,對軟體的使用方式有哪些不習慣的歡迎提issue;

如果你對flutter比較感興趣,可以下載本專案原始碼進行研究,個人認為對學習flutter還是比較有幫助的,主要使用mobx對狀態進行管理,使用fluro進行路由管理

如果你是蘋果cms的使用者,也可以使用此專案對接自己的資源,打造一款屬於你自己的APP


如果大家對這種軟體感興趣,以後打算出幾個教程介紹下軟體安裝方式以及如何進行flutter開發,flutter的上手難度個人覺得要比RN以及原生簡單點。

最後還是那句話,開源不易,歡迎大家到github給個star支援一下。

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章