本公開涉及互聯(lián)網(wǎng)應(yīng)用技術(shù)領(lǐng)域，特別涉及一種在網(wǎng)頁上分時顯示視頻信息的方法及裝置。

背景技術(shù)：

在相關(guān)技術(shù)中，視頻信息包括解析視頻內(nèi)容后得到的圖像幀，以及視頻片方或觀看用戶針對視頻內(nèi)容進(jìn)行描述的文本信息，圖像幀和文本信息在不同頁面分時顯示。

利用與文本信息類型對應(yīng)的布局器將該文本信息轉(zhuǎn)化為視圖，該視圖在第一頁面顯示，當(dāng)在第一頁面上檢測到觸控事件時，第一頁面跳轉(zhuǎn)到嵌入有視頻播放器的第二頁面，并且生成用于在視頻播放器內(nèi)播放視頻內(nèi)容的指令。

然而，由于當(dāng)?shù)谝豁撁嫣D(zhuǎn)到第二頁面時，需要創(chuàng)建第二頁面且視頻播放器接收上述指令之后，在視頻播放器的畫布上才能顯示視頻內(nèi)容的圖像幀，導(dǎo)致從顯示視圖到顯示圖像幀的時間間隔較長。

技術(shù)實現(xiàn)要素：

為了解決相關(guān)技術(shù)中由于不同頁面之間跳轉(zhuǎn)，導(dǎo)致視頻信息在不同頁面上分時顯示的時間間隔較長的技術(shù)問題，本公開提供了一種在網(wǎng)頁上分時顯示視頻信息的方法及裝置。

一種在網(wǎng)頁上分時顯示視頻信息的方法，所述視頻信息包括用于描述視頻內(nèi)容的文本信息和解析所述視頻內(nèi)容后得到的圖像幀，所述方法包括：

在當(dāng)前網(wǎng)頁內(nèi)嵌入視頻播放器，且在所述視頻播放器的畫布上顯示所述文本信息生成的視圖；

當(dāng)所述視圖上的觸控事件被觸發(fā)時，移除所述視圖且生成用于播放所述視頻內(nèi)容的指令；

接收所述指令后，在所述畫布上顯示所述圖像幀。

一種在網(wǎng)頁上分時顯示視頻信息的裝置，所述裝置包括：

視圖顯示模塊，用于在當(dāng)前網(wǎng)頁內(nèi)嵌入視頻播放器，且在所述視頻播放器的畫布上顯示所述文本信息生成的視圖；

視圖移除模塊，用于當(dāng)所述視圖上的觸控事件被觸發(fā)時，移除所述視圖且生成用于播放所述視頻內(nèi)容的指令；

圖像顯示模塊，用于接收所述指令后，在所述畫布上顯示所述圖像幀。

本公開的實施例提供的技術(shù)方案可以包括以下有益效果：

在當(dāng)前網(wǎng)頁內(nèi)嵌入視頻播放器，且在視頻播放器的畫布上顯示文本信息生成的視圖；當(dāng)視圖上的觸控事件被觸發(fā)時，移除視圖且生成用于播放視頻內(nèi)容的指令；接收指令后，在畫布上顯示圖像幀。該方法通過在視頻播放器的畫布上顯示用于描述視頻的文本信息生成的視圖，并在視圖上的觸控事件被觸發(fā)時，移除視圖且生成用于播放視頻的指令，接收指令后，在畫布上顯示視頻的圖像幀，從而實現(xiàn)在同一頁面分時顯示視頻信息，而不用進(jìn)行不同頁面之間的跳轉(zhuǎn)，解決了由于不同頁面之間跳轉(zhuǎn)，導(dǎo)致視頻信息在不同頁面上分時顯示的時間間隔較長的技術(shù)問題。

應(yīng)當(dāng)理解的是，以上的一般描述和后文的細(xì)節(jié)描述僅是示例性的，并不能限制本公開。

附圖說明

此處的附圖被并入說明書中并構(gòu)成本說明書的一部分，示出了符合本發(fā)明的實施例，并于說明書一起用于解釋本發(fā)明的原理。

圖1是根據(jù)一示例性實施例示出的一種在網(wǎng)頁上分時顯示視頻信息的方法的流程圖；

圖2是圖1對應(yīng)實施例的在當(dāng)前網(wǎng)頁內(nèi)嵌入視頻播放器，且在視頻播放器的畫布上顯示文本信息生成的視圖在一個實施例的流程圖；

圖3是圖1對應(yīng)實施例的當(dāng)視圖上的觸控事件被觸發(fā)時，移除視圖且生成用于播放視頻內(nèi)容的指令在一個實施例的流程圖；

圖4是圖1對應(yīng)實施例的接收指令后，在畫布上顯示圖像幀在一個實施例的流程圖；

圖5是現(xiàn)有技術(shù)中用于描述視頻內(nèi)容的文本信息的視圖在一個實施例中的示意圖；

圖6是現(xiàn)有技術(shù)中用于顯示圖像幀的視頻播放器的畫布在一個實施例中的示意圖；

圖7是在網(wǎng)頁上分時顯示視頻信息的方法中在視頻播放器的畫布上顯示視圖在一個實施例中的示意圖；

圖8是根據(jù)一示例性實施例示出的一種在網(wǎng)頁上分時顯示視頻信息的裝置框圖；

圖9是圖8對應(yīng)實施例的視圖顯示模塊在一個實施例的框圖；

圖10是圖8對應(yīng)實施例的視圖移除模塊在一個實施例的框圖；

圖11是圖8對應(yīng)實施例的圖像顯示模塊在一個實施例的框圖。

具體實施方式

這里將詳細(xì)地對示例性實施例執(zhí)行說明，其示例表示在附圖中。下面的描述涉及附圖時，除非另有表示，不同附圖中的相同數(shù)字表示相同或相似的要素。以下示例性實施例中所描述的實施方式并不代表與本發(fā)明相一致的所有實施方式。相反，它們僅是與如所附權(quán)利要求書中所詳述的、本發(fā)明的一些方面相一致的裝置和方法的例子。

圖1是根據(jù)一示例性實施例示出的一種在網(wǎng)頁上分時顯示視頻信息的方法的流程圖。如圖1所示，該在網(wǎng)頁上分時顯示視頻信息的方法可以包括以下步驟。

在步驟110中，在當(dāng)前網(wǎng)頁內(nèi)嵌入視頻播放器，且在視頻播放器的畫布上顯示文本信息生成的視圖。

其中，網(wǎng)頁中含有進(jìn)行播放視頻資源的頁面，網(wǎng)頁的頁面內(nèi)嵌入的視頻播放器用于實現(xiàn)視頻資源的播放。通過在頁面中初始化視頻播放器，將視頻播放器嵌入到網(wǎng)頁內(nèi)。

網(wǎng)頁內(nèi)配置加載視頻資源并播放視頻資源的畫布。當(dāng)觸發(fā)進(jìn)行視頻資源訪問后，進(jìn)行網(wǎng)頁的加載，并顯示該網(wǎng)頁。并在顯示的網(wǎng)頁的頁面中，顯示畫布，從而通過畫布實現(xiàn)視頻的加載和播放。

視圖為顯示視頻資源的描述信息的界面。在視圖上顯示視頻資源的描述信息，比如視頻資源的名稱，導(dǎo)演介紹，演員介紹，內(nèi)容簡介等等信息。

在顯示的頁面配置的畫布上，顯示視圖，從而在網(wǎng)頁上，同時顯示加載并播放視頻資源的畫布和顯示視頻資源的描述信息的視圖。

在步驟130中，當(dāng)視圖上的觸控事件被觸發(fā)時，移除視圖且生成用于播放視頻內(nèi)容的指令。

其中，觸控事件是指對視圖上的控件進(jìn)行觸控的行為。視圖上的控件包括進(jìn)行視頻資源播放的控件。通過網(wǎng)頁上預(yù)設(shè)的檢測區(qū)域，對觸控事件是否被觸發(fā)進(jìn)行檢測。

當(dāng)檢測到觸控事件時，在網(wǎng)頁中，將視圖進(jìn)行移除，并隨著視圖的移除，在網(wǎng)頁的頁面上顯示配置的畫布。之后生成用于播放視頻的指令。

播放視頻的指令為執(zhí)行視頻資源播放的控制指令。當(dāng)需進(jìn)行視頻資源的播放時，接收自身發(fā)出的播放視頻的指令，從而根據(jù)指令，實現(xiàn)視頻資源的播放。

在步驟150中，接收指令后，在畫布上顯示圖像幀。

其中，網(wǎng)頁接收到生成的用于播放視頻的指令后，在顯示的畫布上播放加載后的視頻資源，并根據(jù)該指令，在畫布上播放視頻資源。從而實現(xiàn)了在網(wǎng)頁的頁面上分時顯示包含視頻信息的視圖和播放視頻的畫布。

此實施例實現(xiàn)了在同一頁面分時顯示視頻信息，從而解決了由于不同頁面之間跳轉(zhuǎn)，導(dǎo)致視頻信息在不同頁面上分時顯示的時間間隔較長的技術(shù)問題。

圖2是根據(jù)一示例性實施例示出的對步驟110的細(xì)節(jié)進(jìn)行描述。如圖2所示，該步驟110可以包括以下步驟。

在步驟111中，在網(wǎng)頁的頁面中，初始化視頻播放器并配置視頻播放器所需數(shù)據(jù)。

其中，視頻播放器用于播放視頻資源。通過在頁面中，通過初始化視頻播放器，來做好播放視頻資源的準(zhǔn)備。初始化視頻播放器的過程為通過播放模塊為基礎(chǔ)在視頻播放器創(chuàng)建一個畫布來作為視頻的載體。

配置所述視頻播放器所需數(shù)據(jù)為將播放所需的視頻流和/或音頻流地址數(shù)據(jù)傳入視頻播放器以供視頻播放器調(diào)用，從而播放視頻數(shù)據(jù)。

在步驟113中，在視頻播放器的畫布上顯示視圖，并使畫布的部分區(qū)域和視圖同時顯示。

其中，將視圖顯示于頁面配置的畫布上，可在視圖顯示視頻資源的描述信息的同時，在頁面中的畫布上加載視頻資源，為頁面播放視頻資源提供支持。從而在需要播放視頻資源時，節(jié)省加載視頻資源的時間，在頁面中播放加載完畢的視頻資源。

畫布可對視頻資源進(jìn)行加載，加載視頻資源需在畫布可見的狀態(tài)下進(jìn)行，因此，將視圖顯示在頁面時，使畫布的部分區(qū)域和視圖同時顯示，防止視圖覆蓋畫布后，視頻資源的加載不能正常進(jìn)行。

因此根據(jù)畫布的顯示尺寸，調(diào)整視圖的在畫布上的顯示尺寸，從而使畫布的部分區(qū)域和視圖同時顯示，即畫布處于可見狀態(tài)。

在步驟115中，將圖像幀加載到視頻播放器。

其中，當(dāng)畫布存在與視圖同時顯示的區(qū)域時，畫布可對視頻資源進(jìn)行加載，視頻播放器通過下載將要播放的視頻資源的數(shù)據(jù)，實現(xiàn)將視頻資源的圖像幀加載到視頻播放器。將圖像幀加載到視頻播放器后，通過視頻播放器顯示圖像幀，在畫布上實現(xiàn)視頻資源的播放。

此實施例實現(xiàn)了使畫布的部分區(qū)域和視圖同時顯示，從而實現(xiàn)將圖像幀加載到視頻播放器。

在一個示例性實施例中，圖2對應(yīng)實施例的在視頻播放器的畫布上顯示視圖，并使畫布的部分區(qū)域和視圖同時顯示步驟在一個實施例中可以包括以下步驟。

通過設(shè)置畫布長度大于視圖的長度，或/和，畫布寬度大于視圖的寬度，使畫布的部分區(qū)域和視圖同時顯示。

其中，根據(jù)畫布在頁面上的顯示的像素長度和/或像素寬度，減小視圖的像素長度和/或像素寬度，從而實現(xiàn)畫布的部分區(qū)域和視圖同時顯示。

在一個示例性實施例的具體實現(xiàn)中，將視圖的像素長度和/或像素寬度配置為比畫布在頁面上的顯示的像素長度和/或像素寬度小一個像素長度和/或像素寬度，從而使畫布的部分區(qū)域和視圖同時顯示，且不影響視圖的視覺效果。

此實施例實現(xiàn)了畫布的部分區(qū)域和視圖同時顯示。

圖3是根據(jù)一示例性實施例示出的對步驟130的細(xì)節(jié)進(jìn)行描述。如圖3所示，該步驟130可以包括以下步驟。

在步驟131中，在網(wǎng)頁的頁面上預(yù)設(shè)檢測區(qū)域，在檢測區(qū)域內(nèi)檢測是否有觸控事件被觸發(fā)。

其中，預(yù)設(shè)的檢測區(qū)域為預(yù)設(shè)的檢測視圖上的觸控事件是否被觸發(fā)的區(qū)域。預(yù)設(shè)的檢測區(qū)域可以包括實現(xiàn)觸控事件的控件，也可以包括頁面上用于檢測的空白區(qū)域。根據(jù)用戶對視圖上的控件進(jìn)行的操作，檢測視圖上的觸控事件是否被觸發(fā)。

在步驟133中，當(dāng)存在觸控事件被觸發(fā)時，生成用于指示從視頻播放器上隱藏視圖的屬性信息。

其中，屬性信息是以觸控事件調(diào)用的網(wǎng)頁腳本運行后返回的字符串表示且用于指示將布局在所述視頻播放器上層的視圖移除。

檢測到觸控事件后，生成用于移除視圖的屬性信息，該屬性信息是以觸摸事件響應(yīng)后運行網(wǎng)頁腳本程序返回的標(biāo)識，該標(biāo)識包括用于指示隱藏視圖的標(biāo)識和用于指示刪除視圖的標(biāo)識，進(jìn)而根據(jù)屬性信息的調(diào)用，實現(xiàn)對視圖的移除，從而在頁面上顯示用于播放圖像幀的畫布。

其中，在頁面上刪除視圖后，若需要在頁面上重新顯示視圖，則以用于描述視頻內(nèi)容的文本信息重新生成視圖，且配置該視圖的屬性信息為用于指示顯示該視圖的標(biāo)識。

在步驟135中，當(dāng)調(diào)用屬性信息時，隱藏視圖，同時生成用于播放視頻的指令。

其中，當(dāng)調(diào)用屬性信息時，對視圖進(jìn)行移除操作，使視圖處于不可視的狀態(tài)。在一個示例性實施例中，在頁面中，通過透明化處理視圖，從而隱藏視圖。當(dāng)視圖被隱藏后，頁面上配置的畫布被顯示。同時生成用于播放視頻的指令，從而根據(jù)指令在頁面上配置的畫布上，顯示視頻資源的圖像幀，從而實現(xiàn)視頻的播放。

此實施例實現(xiàn)了當(dāng)觸控事件被觸發(fā)后，移除視圖，生成用于播放視頻的指令。

圖4是根據(jù)一示例性實施例示出的對步驟150的細(xì)節(jié)進(jìn)行描述。如圖4所示，該步驟150可以包括以下步驟。

在步驟151中，當(dāng)在視頻播放器上檢測到觸控事件時，生成用于停止播放視頻的指令。

其中，視頻播放器上的控件被觸發(fā)時，視頻播放器上的控件檢測到觸控事件，并在檢測到觸控事件后，生成用于停止播放視頻的指令。

在步驟153中，接收指令后，在畫布上重新顯示被移除的視圖。

其中，視頻播放器接收自身發(fā)出的用于停止播放視頻的指令，從而根據(jù)指令，停止視頻資源的播放。

在一個示例性實施例的具體實現(xiàn)中，在停止視頻資源的播放后，通過調(diào)整視圖的透明度，重新調(diào)出隱藏的視圖，將視圖返回給頁面，并在頁面中重新顯示視圖。根據(jù)上述過程，實現(xiàn)了在同一頁面上再顯示視圖的功能。

此實施例實現(xiàn)了停止視頻資源的播放，并在同一頁面再次顯示視圖的功能。

圖5是現(xiàn)有技術(shù)中用于描述視頻內(nèi)容的文本信息的視圖在一個實施例中的示意圖。

圖6是現(xiàn)有技術(shù)中用于顯示圖像幀的視頻播放器的畫布在一個實施例中的示意圖。

圖7是在網(wǎng)頁上分時顯示視頻信息的方法中在視頻播放器的畫布上顯示視圖在一個實施例中的示意圖。

其中，圖7通過在圖6的畫布上顯示圖5的視圖，來實現(xiàn)在網(wǎng)頁的頁面上分時顯示視頻信息。在圖6的畫布上，顯示圖5的視圖，并配置圖5的視圖的像素長度小于圖6畫布的像素長度一個像素長度，圖7中的示意圖為了突出實現(xiàn)方法，將一個像素長度放大，從而更直觀的顯示在網(wǎng)頁的頁面上分時顯示視頻信息的具體實現(xiàn)。當(dāng)接收到用于播放視頻內(nèi)容的指令后，將圖7的示意圖中的視圖隱藏，變?yōu)閳D6的畫布，從而顯示圖像幀。當(dāng)接收到用于停止播放視頻的指令后，取消視圖的隱藏，在圖6的畫布上，顯示圖5的視圖，此時網(wǎng)頁上的顯示為圖7的示意圖。

在一個示例性實施例的具體實現(xiàn)中，配置畫布像素長度大于視圖的像素長度，或/和，畫布像素寬度大于視圖的像素寬度一個像素長度。一個像素長度用戶難以分辨，從而使得在畫布的部分區(qū)域和視圖同時顯示的過程中，用戶不被畫布影響對視圖的瀏覽和操作。

圖8是根據(jù)一示例性實施例示出的一種在網(wǎng)頁上分時顯示視頻信息的裝置框圖。該裝置執(zhí)行圖1任一所示的在網(wǎng)頁上分時顯示視頻信息的方法的全部或者部分步驟。如圖8所示，該裝置包括但不限于：視圖顯示模塊210，視圖移除模塊230和圖像顯示模塊250。

視圖顯示模塊210用于在當(dāng)前網(wǎng)頁內(nèi)嵌入視頻播放器，且在視頻播放器的畫布上顯示文本信息生成的視圖。

視圖移除模塊230用于當(dāng)視圖上的觸控事件被觸發(fā)時，移除視圖且生成用于播放視頻內(nèi)容的指令。

圖像顯示模塊250用于接收指令后，在畫布上顯示圖像幀。

圖9是圖8對應(yīng)實施例的視圖顯示模塊在一個實施例的框圖。如圖9所示，該視圖顯示模塊210包括但不限于：初始化單元211，顯示單元213和加載單元215。

初始化單元211用于在網(wǎng)頁的頁面中，初始化視頻播放器并配置視頻播放器所需數(shù)據(jù)。

顯示單元213用于在視頻播放器的畫布上顯示視圖，并使畫布的部分區(qū)域和視圖同時顯示。

加載單元215用于將圖像幀加載到視頻播放器。

在一個示例性實施例中，圖9對應(yīng)實施例的顯示單元包括但不限于：

像素配置單元，用于通過設(shè)置畫布長度大于視圖的長度，或/和，畫布寬度大于視圖的寬度，使畫布的部分區(qū)域和視圖同時顯示。

圖10是圖8對應(yīng)實施例的視圖移除模塊在一個實施例的框圖。如圖10所示，該視圖移除模塊230包括但不限于：檢測單元231，信息生成單元233和移除單元235。

檢測單元231用于在網(wǎng)頁的頁面上預(yù)設(shè)檢測區(qū)域，在檢測區(qū)域內(nèi)檢測是否有觸控事件被觸發(fā)。

信息生成單元233用于當(dāng)存在觸控事件被觸發(fā)時，生成用于指示從視頻播放器上隱藏視圖的屬性信息。

移除單元235用于當(dāng)調(diào)用屬性信息時，隱藏視圖，同時生成用于播放視頻的指令。

圖11是圖8對應(yīng)實施例的圖像顯示模塊在一個實施例的框圖。如圖11所示，該圖像顯示模塊250包括但不限于：停止播放指令生成單元251和顯示移除單元253。

停止播放指令生成單元251用于當(dāng)在視頻播放器上檢測到觸控事件時，生成用于停止播放視頻的指令。

顯示移除單元253用于接收指令后，在畫布上重新顯示被移除的視圖。

上述裝置中各個模塊的功能和作用的實現(xiàn)過程詳見上述在網(wǎng)頁上分時顯示視頻信息的方法中對應(yīng)步驟的實現(xiàn)過程，在此不再贅述。

應(yīng)當(dāng)理解的是，本發(fā)明并不局限于上面已經(jīng)描述并在附圖中示出的精確結(jié)構(gòu)，并且可以在不脫離其范圍執(zhí)行各種修改和改變。本發(fā)明的范圍僅由所附的權(quán)利要求來限制。