本發(fā)明涉及視頻內(nèi)容人性化體驗技術(shù),特別涉及一種通過鼠標拖動展示視頻縮略圖的方法。
背景技術(shù):
一般在客戶端、瀏覽器等的視頻列表頁面上展示有一個或多個視頻的封面,可以通過鼠標點擊某個視頻封面等方式,跳轉(zhuǎn)到相應的播放頁面進行視頻播放。然而,基于現(xiàn)有技術(shù),如果用戶不打開視頻的情況下,無法對其進行預覽,難以對視頻內(nèi)容進行快速篩選,用戶體驗不佳。
技術(shù)實現(xiàn)要素:
本發(fā)明的目的在于提供一種通過鼠標拖動展示視頻縮略圖的方法,在展示視頻封面的同時,增加視頻的快速預覽功能。
為了達到上述目的,本發(fā)明的技術(shù)方案在于提供一種通過鼠標拖動展示視頻縮略圖的方法,當鼠標移動到所展示的視頻封面上時,向服務(wù)器請求視頻略縮圖集;所述視頻略縮圖集中包含所整合的多個略縮圖塊對應于視頻多個關(guān)鍵幀圖像的圖像矩陣,以及體現(xiàn)略縮圖塊與關(guān)鍵幀出現(xiàn)時間對應關(guān)系的圖片坐標信息;
根據(jù)鼠標在視頻封面上的當前位置,計算視頻時間軸上與該當前位置對應的關(guān)鍵幀出現(xiàn)時間,并配合所述圖片坐標信息進一步計算獲得與該關(guān)鍵幀出現(xiàn)時間對應的略縮圖塊進行展示。
優(yōu)選地,根據(jù)鼠標在視頻封面上移動后的位置,重新計算視頻時間軸上與移動后的位置所對應的關(guān)鍵幀出現(xiàn)時間及其對應的略縮圖塊進行展示。
優(yōu)選地,計算視頻封面的大小與單個略縮圖塊的大小之間的比例,根據(jù)該比例對根據(jù)鼠標位置計算獲得的對應略縮圖塊進行大小調(diào)整后進行展示。
優(yōu)選地,鼠標移動到所展示的視頻封面上,使視頻封面上的元素淡出后,淡入一個半透明蒙層,根據(jù)鼠標位置計算獲得的對應略縮圖塊在該蒙層處展示;
鼠標移動到所展示的視頻封面之外時,所述略縮圖塊及蒙層淡出后,使視頻封面上的元素淡入,恢復視頻封面原有狀態(tài)。
優(yōu)選地,將鼠標在視頻封面上的停留時間與第一設(shè)定值進行比較,當實際的停留時間達到第一設(shè)定值時,使視頻封面上的元素淡出而蒙層淡入;
將鼠標移動到所展示的視頻封面之外的時間與第二設(shè)定值進行比較,當實際在視頻封面之外的時間達到第二設(shè)定值時,使蒙層淡出而視頻封面上的元素淡入,恢復視頻封面原有狀態(tài)。
優(yōu)選地,對服務(wù)器請求視頻略縮圖集時,將視頻略縮圖集相應數(shù)據(jù)處理后進行緩存,或者直接讀取緩存中的視頻略縮圖集相應數(shù)據(jù)。
本發(fā)明在展示視頻封面的同時,增加了視頻的快速預覽功能。用戶在未打開視頻的情況下,即可快速了解視頻的內(nèi)容,預覽視頻中精彩的部分,同時用戶可以通過這項功能方便地對自己喜好的視頻內(nèi)容進行篩選,從而極大地提升了用戶體驗。
附圖說明
圖1是本發(fā)明所述通過鼠標拖動展示視頻縮略圖的方法流程圖;
圖2是本發(fā)明所述方法的效果展示圖。
具體實施方式
本發(fā)明提供一種通過鼠標拖動展示視頻縮略圖的方法,當鼠標移動到展示的視頻封面上時,向服務(wù)器請求視頻略縮圖集信息,視頻略縮圖集包含有體現(xiàn)略縮圖塊(即關(guān)鍵幀圖像)與關(guān)鍵幀出現(xiàn)時間對應關(guān)系的圖片坐標信息,從而利用層疊樣式表技術(shù),根據(jù)鼠標在視頻封面上的位移,按時間軸展示比例縮放的對應略縮圖塊。
本發(fā)明中涉及的技術(shù)包含:
關(guān)鍵幀:指角色或者物體運動或變化中的關(guān)鍵動作所處的那一幀,相當于二維動畫中的原畫,是用來定義動畫變化的幀,是動畫制作過程中最重要的幀類型。一段視頻含有多個關(guān)鍵幀。
視頻略縮圖集:通過計算對關(guān)鍵幀圖像進行提取,將圖像按固定長度寬度的方式拼接成圖像矩陣,并把該關(guān)鍵幀出現(xiàn)時間存儲到列表中保存在服務(wù)器。
層疊樣式表(CSS):是一種用來表現(xiàn)HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。層疊樣式表能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精確控制,在一個固定的矩形空間內(nèi)按顯示坐標展示一張大圖的不同位置內(nèi)容。
如圖1所示,本發(fā)明所述通過鼠標拖動展示視頻縮略圖的方法,包含以下的實施過程:
步驟S1.1 用戶進入視頻列表頁,該頁展示有一個或多個視頻封面。
步驟S1.2 鼠標在任意一個視頻封面上的停留時間達到設(shè)定值時,封面上不必要的元素開始淡出,結(jié)束后,淡入一個半透明蒙層并顯示視頻時長信息。
步驟S1.3開始向服務(wù)器請求視頻略縮圖集信息。視頻略縮圖集包含體現(xiàn)略縮圖塊(即關(guān)鍵幀圖像)和關(guān)鍵幀出現(xiàn)時間對應關(guān)系的圖片坐標信息,及多個略縮圖塊對應該視頻多個關(guān)鍵幀圖像的圖像矩陣;請求成功后,對原始數(shù)據(jù)進行必要的處理并緩存處理過的數(shù)據(jù)以備下一次使用。如果緩存已存在,則直接讀取緩存中的數(shù)據(jù)。
步驟S1.4根據(jù)鼠標在當前視頻封面上的位置,計算出要對應展示的略縮圖塊。并且,根據(jù)當前視頻封面的大小、視頻略縮圖集中單個略縮圖塊的大小,計算出這兩者之間對應的比例關(guān)系。
步驟S1.5 根據(jù)步驟S1.4中的數(shù)據(jù)計算出要對應展示的略縮圖塊的坐標信息,然后根據(jù)此坐標信息設(shè)定視頻縮略圖,并按比例在半透明蒙層處展示出來。
步驟S1.6 鼠標在當前封面內(nèi)移動時,重復步驟S1.4和步驟S1.5計算出新的坐標信息,并以此更新略縮圖塊的坐標信息,從而達到隨著鼠標移動而對視頻略縮圖推進展示的效果。
步驟S1.7 在鼠標移出當前的視頻封面時,短暫的延遲后,略縮圖塊以及背景蒙層開始淡出,結(jié)束后,步驟S1.2中淡出的元素開始淡入,恢復到視頻封面的原有狀態(tài)。
如圖2的效果展示圖所示,abc三個圖例的畫面底部顯示有視頻的標題,畫面頂部分別包含視頻的時間軸10,鼠標在畫面(視頻封面或其蒙層)上沿時間軸10的軸向移動到不同位置時,根據(jù)鼠標指針的位置將時間軸10上的節(jié)點11推進到相應的關(guān)鍵幀出現(xiàn)時間;在視頻略縮圖集包含的圖片坐標信息中基于該時間計算,得到視頻略縮圖集中要對應展示的略縮圖塊的坐標信息,進而將略縮圖塊按視頻封面的大小縮放后在蒙層處展示相應的視頻縮略圖像。
盡管本發(fā)明的內(nèi)容已經(jīng)通過上述優(yōu)選實施例作了詳細介紹,但應當認識到上述的描述不應被認為是對本發(fā)明的限制。在本領(lǐng)域技術(shù)人員閱讀了上述內(nèi)容后,對于本發(fā)明的多種修改和替代都將是顯而易見的。因此,本發(fā)明的保護范圍應由所附的權(quán)利要求來限定。