1. 程式人生 > >全球首款短視訊聚合應用「醬爆視訊」開發技術介紹

全球首款短視訊聚合應用「醬爆視訊」開發技術介紹

一、前言

之前已經介紹了醬爆視訊的開發原理,本文就來介紹整個專案的開發流程以及用到的技術點,在之前文章也說到了醬爆視訊主要是把當前的某音,某手,某山,某拍短視內容整合到一個app中,前面通過一些手段已經可以拿到他們的視訊資料,那麼我們現在需要做的就是把資料包裝出來進行展示即可,而為什麼我要做這個應用,原因在之前也說了,不瞭解的同學可以點選檢視詳情:為什麼我要死磕這四家短視訊,因為我窮!

二、頁面介紹

首先我們來看應用的大致功能,醬爆視訊功能主要包括主頁的四個tab切換,然後就是視訊播放詳情頁,視訊支援下載,設定頁面中也是可以管理下載視訊,刪除視訊等操作。而應用中也包括了之前介紹的今日頭條視訊下載器功能;

第一頁:閃屏頁


每個應用都會有閃屏頁,作用一般就兩個,一個是接入閃屏頁廣告,就好比上面的封面圖可以換成廣告圖的,一個是為了載入程式前置資源,有的應用啟動會初始化很多事情,所以閃屏頁就相當於延遲,但是對於使用者來說無感知的!

第二頁:主頁


主頁主要採用了ViewPager+Fragment實現四個短視訊內容切換功能,標題欄中包括左滑選單功能和使用者登入功能,而在主頁中也多了一個右下角底部彈出選單,這個選單當向下滑動就隱藏,向上滑動就彈出,包括兩個子選單一個是重新整理最新資料,還有一個是進入設定頁面!

第三頁:視訊播放頁


這個頁面主要從主頁點選視訊進入以及本地儲存的視訊點選進入,頁面頂部選單包括返回,視訊標題,以及選單欄,選單欄中包括下載視訊,視訊詳情,視訊連結複製,視訊設定等功能。底部主要包括視訊的附加資訊,這裡四個短視訊平臺資訊不一樣,某音app是有視訊音樂,不過播放數和點贊數都有不會變,然後就是使用者頭像,使用者名稱,使用者年齡,地域等資訊。右下角是一個播放暫停按鈕,而點選視訊會隱藏頂部選單,視訊詳情頁也有很多隱藏功能,比如增加了上下滑動快速切換下一個視訊,右滑動退出等操作,這裡做了區分短視訊沒有進度條而且支援迴圈播放,而某拍是長視訊有對應的進度條可以拖動進度。

第四頁:左側選單欄頁


這個選單欄,主要是借鑑酷狗音樂的左滑選單功能,主要利用水平滑動View實現,選單中主要包括登入入口,今日頭條下載教程入口,設定入口,本地視訊管理入口等。點選和左滑都可以隱藏選單回到主介面!

第五頁:設定頁


設定頁面主要包括主頁的四個短視訊tab的順序調換,清空快取(包括清除視訊和圖片功能),管理本地下載的視訊等功能!

第六頁:今日頭條視訊下載頁


今日頭條視訊下載頁面主要通過Intent來獲取頭條視訊資料,進行解密請求獲取到正確的視訊原始地址,然後下載即可。具體原理可以大家可以看這篇文章:今日頭條視訊下載器原理解析

第七頁:本地下載管理頁


本地儲存視訊,長按可以刪除視訊以及檢視視訊詳情資訊,點選可以播放視訊,因為已經儲存在本地所以可以無網路即可播放,右側的刪除按鈕可以刪除所有的視訊內容!

三、技術介紹

上面大致介紹了一些頁面資訊,還有其他不是很重要的頁面就不多說了,下面就來介紹應用中用到的核心技術:

第一個、自定義View集合

1、左滑選單欄:LevideoSlideMenu


如果大家覺得自己的專案可能需要用到,可以網上直接搜尋"仿酷狗左滑選單實現"即可!

2、主頁彈出式選單:FloatingActionsMenu


想要使用的同學,直接網路搜尋這個控制元件名稱即可。

3、載入樣式:一個是模仿支付寶的笑臉View:SmileyLoadingView,一個是傳統的載入View:ProgressWheel

       

這兩個樣式都可以直接網路搜尋控制元件名稱即可。

4、下拉重新整理樣式:利用v4包中的SwipeRefreshLayout


5、平行瀑布流樣式:StaggeredGridView


6、拖動條:DiscreteSeekBar


以上我說的控制元件大家如果在自己的專案中使用,可以直接全網搜空間名字即可!

第二、視訊播放器和網路框架

應用中用到的是播放器是ijkplayer了,但是我們的需求是某音這種視訊非常短,所以需要迴圈播放,但是ijkplayer本身不支援迴圈播放,所以需要我們自己手動設定一下即可。也需要處理https協議的視訊播放源問題,網路訪問用的是主流的okhttp即可。

第三、應用中資源問題

因為之前說了應用都是我自己弄的,所以沒有UI,那麼有一些資源怎麼弄呢?這裡就需要去拿來主義了,比如應用中開始就想好所有的icon都必須是白色,那麼就去微信,網易音樂,短視訊應用中反編譯之後一個一個資源找,最終能夠找到想要的配套icon即可。也有的資源比如按鈕背景,圓角圖片等不用切圖,全部使用xml來進行編寫即可。這樣我們就相當於除去了UI的這部分功能。自己也可以設計的。大家下載應用體驗之後會發現其實應用介面還算可以的。

四、應用演示

有的同學獲取覺得我為什麼要做這些,其實我也不知道,就是感覺好玩,我說為了夢想你肯定不信,但是說句實話有一個功能很有用,就是我喜歡看到好看的視訊就分享給好友,那麼就像下載儲存,然後分享給微信好友,而這些應用有的是不支援本地下載,而且及時支援了又加上了水印效果,那麼通過醬爆看視訊之後,全部都可以支援下載,而且沒有水印效果,可以儲存本地,然後分享給微信或者釋出朋友圈。好了說了這麼多了,下面來看看應用的大致效果吧:


今日頭條下載器


視訊上下滑動可以快速切換視訊


主頁面直接點選重新整理資料


別人等車乾著急,我在醬爆看視訊

#想你所想,為你所做#

#不負眾望,只在醬爆#

嚴重宣告:這個應用開發的目的只有一個就是為了學習新的應用開發技術,如何獨立開發一個專案,絕不會利用這個應用進行商業利益獲取,如果有人利用這個專案進行商業利益獲取帶來的所有法律問題都將由操作者自己負責,與本文作者無任何關係!也是由衷的希望各位能夠秉著技術學習的態度閱讀此文,最後就是關於應用的下載地址和原始碼問題,這裡不會在公眾平臺中公開,涉及到安全問題,只在小密圈中開放,小密圈是一群人愛好學習的地方,因為涉及到四家視訊的流量,開放應用下載地址也是非常危險的。基於這個考慮暫時不開放任何關於此專案的資源!

五、總結

好了到這裡就大致介紹完了醬爆視訊的整體流程了,可能大家還沒有感觀認識,如果在操作過程中發現bug或者遇到問題以及想要的功能可以隨時聯絡我,我能給的都將給出資源,方便學習!最後也希望大家多多支援這個應用!

《Android應用安全防護和逆向分析》

點選立即購買:京東天貓

更多內容:點選這裡

關注微信公眾號,最新技術乾貨實時推送

編碼美麗技術圈微信掃一掃進入我的"技術圈"世界掃一掃加小編微信新增時請註明:“編碼美麗”非常感謝!