一種移動(dòng)終端視頻和信息疊加顯示的方法與流程

本發(fā)明屬于移動(dòng)終端視頻播放技術(shù)領(lǐng)域，特別涉及一種移動(dòng)終端視頻和信息疊加顯示的方法。

背景技術(shù)：

用戶經(jīng)常會(huì)使用移動(dòng)終端觀看視頻。目前用戶通過(guò)移動(dòng)終端app軟件觀看視頻的步驟比較繁瑣，一般是用戶先通過(guò)豎向屏幕瀏覽互聯(lián)網(wǎng)網(wǎng)頁(yè)，尋找自己感興趣的視頻內(nèi)容，點(diǎn)擊視頻鏈接后開(kāi)始播放，然后在視頻播放窗口內(nèi)點(diǎn)擊全屏播放功能，之后切換到橫向屏幕放大到全屏繼續(xù)觀看。當(dāng)用戶想瀏覽視頻相關(guān)信息時(shí)，比如觀看視頻的評(píng)論、視頻內(nèi)容簡(jiǎn)介等，一般要退出橫向全屏狀態(tài)，返回到豎向屏幕的信息瀏覽界面，繼續(xù)瀏覽網(wǎng)頁(yè)獲取信息，再繼續(xù)切換回全屏狀態(tài)觀看本視頻或其他視頻。這樣會(huì)造成用戶在信息瀏覽界面和視頻播放界面之間不斷切換，不僅操作繁瑣，而且還要不斷變換移動(dòng)終端的方向，造成用戶觀看體驗(yàn)下降。

現(xiàn)有移動(dòng)終端視頻app，大部分需要在信息瀏覽界面和播放界面來(lái)回切換，體驗(yàn)度下降。少部分app在播放視頻的時(shí)候，可以疊加顯示簡(jiǎn)單的圖像、文字信息，由移動(dòng)終端添加固定的透明背景，比如電視劇劇集序號(hào)的透明疊加顯示。對(duì)于復(fù)雜的html瀏覽頁(yè)面，當(dāng)前的app均沒(méi)有疊加顯示功能，必須由視頻全屏狀態(tài)返回才可以顯示。所以，當(dāng)前均沒(méi)有現(xiàn)有技術(shù)可以解決以上技術(shù)問(wèn)題。

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

本發(fā)明的目的在于提供一種移動(dòng)終端視頻和信息疊加顯示的方法，解決視頻觀看時(shí)，避免用戶來(lái)回切換界面的問(wèn)題；解決視頻和相關(guān)信息疊加顯示時(shí)的遮擋問(wèn)題。

為實(shí)現(xiàn)上述目的，本發(fā)明采用以下技術(shù)方案：

一種移動(dòng)終端視頻和信息疊加顯示的方法，包括服務(wù)器軟件、移動(dòng)終端和原始網(wǎng)頁(yè)，服務(wù)器軟件使用標(biāo)準(zhǔn)互聯(lián)網(wǎng)協(xié)議與原始網(wǎng)頁(yè)交互，服務(wù)器軟件獲取到原始網(wǎng)頁(yè)信息后，對(duì)原始網(wǎng)頁(yè)的html、css信息進(jìn)行轉(zhuǎn)換：

原始網(wǎng)頁(yè)信息轉(zhuǎn)換分為：服務(wù)器在線進(jìn)行原始網(wǎng)頁(yè)轉(zhuǎn)換、服務(wù)器離線完成原始網(wǎng)頁(yè)轉(zhuǎn)換、原始網(wǎng)頁(yè)直接提供透明文字或移動(dòng)終端內(nèi)增加html/css復(fù)雜頁(yè)面透明處理；

進(jìn)一步的，服務(wù)器在線進(jìn)行原始網(wǎng)頁(yè)轉(zhuǎn)換包括以下步驟：

步驟一：用戶進(jìn)入信息瀏覽頁(yè)面，點(diǎn)擊視頻播放鏈接，進(jìn)行全屏播放視頻；

步驟二：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面；系統(tǒng)通過(guò)服務(wù)器和移動(dòng)終端的配合完成瀏覽信息的透明顯示，系統(tǒng)內(nèi)部處理過(guò)程如下：

1)移動(dòng)終端軟件將瀏覽請(qǐng)求發(fā)送到服務(wù)器；

2)服務(wù)器解析終端請(qǐng)求，和原始網(wǎng)頁(yè)服務(wù)器交互，獲取瀏覽信息，然后解析標(biāo)準(zhǔn)的html、css，識(shí)別出網(wǎng)頁(yè)中所有文字信息的背景顏色，將原有文字的背景顏色修改為透明,同時(shí)修改文字顏色；這些修改技術(shù)是采用直接修改html、css或通過(guò)javascript完成html、css的動(dòng)態(tài)修改；服務(wù)器能夠選擇重組頁(yè)面或直接修改原頁(yè)面；

3)移動(dòng)終端軟件對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

步驟三：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的瀏覽信息；

進(jìn)一步的，服務(wù)器離線完成原始網(wǎng)頁(yè)轉(zhuǎn)換包括以下步驟：

步驟一：服務(wù)器離線完成原始網(wǎng)頁(yè)訪問(wèn)，獲取瀏覽信息，然后解析標(biāo)準(zhǔn)的html、css，識(shí)別出網(wǎng)頁(yè)中所有文字信息的背景顏色，將原有文字的背景顏色修改為透明,同時(shí)修改文字顏色，這些修改技術(shù)可以采用直接修改html、css或通過(guò)javascript完成html、css的動(dòng)態(tài)修改；服務(wù)器能夠選擇重組頁(yè)面或直接修改原頁(yè)面；服務(wù)器對(duì)轉(zhuǎn)換后頁(yè)面進(jìn)行緩存；

步驟二：用戶進(jìn)入信息瀏覽頁(yè)面，點(diǎn)擊視頻播放鏈接，進(jìn)行全屏播放視頻；

步驟三：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面；系統(tǒng)通過(guò)服務(wù)器和移動(dòng)終端的配合完成瀏覽信息的透明顯示，系統(tǒng)內(nèi)部處理過(guò)程如下：

1)移動(dòng)終端將瀏覽請(qǐng)求發(fā)送到服務(wù)器；

2)服務(wù)器解析終端請(qǐng)求，直接返回緩存的經(jīng)過(guò)轉(zhuǎn)換的網(wǎng)頁(yè)信息；

3)移動(dòng)終端軟件對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

步驟四：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的瀏覽信息；

進(jìn)一步的，原始網(wǎng)頁(yè)直接提供透明文字包括以下步驟：

步驟一：原始網(wǎng)頁(yè)服務(wù)器軟件制作原始網(wǎng)頁(yè)時(shí)，文字的背景顏色為透明，設(shè)置文字顏色，該顏色在移動(dòng)終端的透明背景下便于顯示；

步驟二：用戶進(jìn)入信息瀏覽頁(yè)面，點(diǎn)擊視頻播放鏈接，進(jìn)行全屏播放視頻；

步驟三：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面；系統(tǒng)通過(guò)原始網(wǎng)頁(yè)和移動(dòng)終端的配合完成瀏覽信息的透明顯示，系統(tǒng)內(nèi)部處理過(guò)程如下：

1)移動(dòng)終端軟件將瀏覽請(qǐng)求發(fā)送到原始網(wǎng)頁(yè)服務(wù)器；

2)原始網(wǎng)頁(yè)服務(wù)器向移動(dòng)終端返回瀏覽信息；

3)移動(dòng)終端軟件對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

步驟四：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的瀏覽信息；

進(jìn)一步的，移動(dòng)終端內(nèi)增加html/css復(fù)雜頁(yè)面透明處理包括以下步驟：

步驟一：用戶通過(guò)移動(dòng)終端信息瀏覽頁(yè)面尋找到感興趣的視頻鏈接，用戶點(diǎn)擊視頻播放鏈接全屏播放視頻；

步驟二：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面，系統(tǒng)內(nèi)部處理如下：

1)移動(dòng)終端軟件獲取到原始網(wǎng)頁(yè)信息后，對(duì)原始網(wǎng)頁(yè)的html、css等信息進(jìn)行轉(zhuǎn)換：通過(guò)解析標(biāo)準(zhǔn)的html、css識(shí)別出網(wǎng)頁(yè)中所有文字信息的背景顏色，將原有文字的背景顏色修改為透明；同時(shí)修改文字顏色；移動(dòng)終端軟件能夠選擇重組頁(yè)面或直接修改原頁(yè)面；

2)移動(dòng)終端對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

步驟四：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的網(wǎng)頁(yè)信息；

進(jìn)一步的，移動(dòng)終端增加的透明背景透明度能夠動(dòng)態(tài)調(diào)整。

進(jìn)一步的，移動(dòng)終端能夠配置網(wǎng)頁(yè)文字的顏色，移動(dòng)終端向服務(wù)器發(fā)送改變文字顏色指令；服務(wù)器接收終端消息，修改網(wǎng)頁(yè)html/css，改變文字顏色。

與現(xiàn)有技術(shù)相比，本發(fā)明有以下技術(shù)效果：

本發(fā)明的移動(dòng)終端視頻和信息疊加顯示方法，用戶通過(guò)移動(dòng)終端全屏觀看視頻時(shí)，可以同時(shí)獲取視頻相關(guān)信息，不需要用戶在信息瀏覽界面和播放界面來(lái)回切換，同時(shí)采用透明顯示方式，有效減小相關(guān)信息對(duì)視頻的遮擋，極大提升用戶的視頻觀看體驗(yàn)。

附圖說(shuō)明

圖1為服務(wù)器在線進(jìn)行原始網(wǎng)頁(yè)轉(zhuǎn)換示意圖；

圖2為服務(wù)器離線完成原始網(wǎng)頁(yè)轉(zhuǎn)換示意圖；

具體實(shí)施方式

以下結(jié)合附圖，對(duì)本發(fā)明進(jìn)一步說(shuō)明：

請(qǐng)參閱圖1和圖2，一種移動(dòng)終端視頻和信息疊加顯示的方法，包括服務(wù)器軟件、移動(dòng)終端和原始網(wǎng)頁(yè)，服務(wù)器軟件使用標(biāo)準(zhǔn)互聯(lián)網(wǎng)協(xié)議與原始網(wǎng)頁(yè)交互，服務(wù)器軟件獲取到原始網(wǎng)頁(yè)信息后，對(duì)原始網(wǎng)頁(yè)的html、css信息進(jìn)行轉(zhuǎn)換；

原始網(wǎng)頁(yè)信息轉(zhuǎn)換分為：服務(wù)器在線進(jìn)行原始網(wǎng)頁(yè)轉(zhuǎn)換、服務(wù)器離線完成原始網(wǎng)頁(yè)轉(zhuǎn)換、原始網(wǎng)頁(yè)直接提供透明文字和移動(dòng)終端內(nèi)增加html/css復(fù)雜頁(yè)面透明處理；

服務(wù)器在線進(jìn)行原始網(wǎng)頁(yè)轉(zhuǎn)換包括以下步驟：

步驟一：用戶進(jìn)入信息瀏覽頁(yè)面，點(diǎn)擊視頻播放鏈接，進(jìn)行全屏播放視頻；

步驟二：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面；系統(tǒng)通過(guò)服務(wù)器和移動(dòng)終端的配合完成瀏覽信息的透明顯示，系統(tǒng)內(nèi)部處理過(guò)程如下：

1)移動(dòng)終端軟件將瀏覽請(qǐng)求發(fā)送到服務(wù)器；

2)服務(wù)器解析終端請(qǐng)求，和原始網(wǎng)頁(yè)服務(wù)器交互，獲取瀏覽信息，然后解析標(biāo)準(zhǔn)的html、css，識(shí)別出網(wǎng)頁(yè)中所有文字信息的背景顏色，將原有文字的背景顏色修改為透明,同時(shí)修改文字顏色；這些修改技術(shù)是采用直接修改html、css或通過(guò)javascript完成html、css的動(dòng)態(tài)修改；服務(wù)器能夠選擇重組頁(yè)面或直接修改原頁(yè)面；

以下javascript修改html中id為“ziti”的背景顏色為透明，文字顏色為白色；

3)移動(dòng)終端軟件對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

比如，在安卓系統(tǒng)下，則可以使用webview控件作為網(wǎng)頁(yè)瀏覽控件，執(zhí)行：

mwebview.setbackgroundcolor(color.argb(120,0,0,0))；

步驟三：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的瀏覽信息；

服務(wù)器離線完成原始網(wǎng)頁(yè)轉(zhuǎn)換包括以下步驟：

步驟一：服務(wù)器離線完成原始網(wǎng)頁(yè)訪問(wèn)，獲取瀏覽信息，然后解析標(biāo)準(zhǔn)的html、css，識(shí)別出網(wǎng)頁(yè)中所有文字信息的背景顏色，將原有文字的背景顏色修改為透明,同時(shí)修改文字顏色，這些修改技術(shù)可以采用直接修改html、css或通過(guò)javascript完成html、css的動(dòng)態(tài)修改；服務(wù)器能夠選擇重組頁(yè)面或直接修改原頁(yè)面；服務(wù)器對(duì)轉(zhuǎn)換后頁(yè)面進(jìn)行緩存；

步驟二：用戶進(jìn)入信息瀏覽頁(yè)面，點(diǎn)擊視頻播放鏈接，進(jìn)行全屏播放視頻；

步驟三：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面；系統(tǒng)通過(guò)服務(wù)器和移動(dòng)終端的配合完成瀏覽信息的透明顯示，系統(tǒng)內(nèi)部處理過(guò)程如下：

1)移動(dòng)終端將瀏覽請(qǐng)求發(fā)送到服務(wù)器；

2)服務(wù)器解析終端請(qǐng)求，直接返回緩存的經(jīng)過(guò)轉(zhuǎn)換的網(wǎng)頁(yè)信息；

3)移動(dòng)終端軟件對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

步驟四：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的瀏覽信息；

原始網(wǎng)頁(yè)直接提供透明文字包括以下步驟：

步驟一：原始網(wǎng)頁(yè)服務(wù)器軟件制作原始網(wǎng)頁(yè)時(shí)，文字的背景顏色為透明，設(shè)置文字顏色，該顏色在移動(dòng)終端的透明背景下便于顯示；

步驟二：用戶進(jìn)入信息瀏覽頁(yè)面，點(diǎn)擊視頻播放鏈接，進(jìn)行全屏播放視頻；

步驟三：用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面；系統(tǒng)通過(guò)原始網(wǎng)頁(yè)和移動(dòng)終端的配合完成瀏覽信息的透明顯示，系統(tǒng)內(nèi)部處理過(guò)程如下：

1)移動(dòng)終端軟件將瀏覽請(qǐng)求發(fā)送到原始網(wǎng)頁(yè)服務(wù)器；

2)原始網(wǎng)頁(yè)服務(wù)器向移動(dòng)終端返回瀏覽信息；

3)移動(dòng)終端軟件對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景；

比如，在安卓系統(tǒng)下，則可以使用webview控件作為網(wǎng)頁(yè)瀏覽控件，執(zhí)行：

mwebview.setbackgroundcolor(color.argb(120,0,0,0))；

設(shè)置網(wǎng)頁(yè)的背景顏色，透明度；其中數(shù)字為舉例，參數(shù)1是0～255的數(shù)值，表示透明度；后面三個(gè)參數(shù)是三原色的r、g、b值，具體可以參考相應(yīng)編程平臺(tái)的api手冊(cè)。

步驟四：執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的瀏覽信息；

移動(dòng)終端增加的透明背景透明度能夠動(dòng)態(tài)調(diào)整。

比如，安卓系統(tǒng)下，mwebview.setbackgroundcolor接口重新設(shè)置新的透明度；

移動(dòng)終端能夠配置網(wǎng)頁(yè)文字的顏色，移動(dòng)終端向服務(wù)器發(fā)送改變文字顏色指令；服務(wù)器接收終端消息，修改網(wǎng)頁(yè)html/css，改變文字顏色。

移動(dòng)終端內(nèi)增加html/css復(fù)雜頁(yè)面透明處理，包括以下步驟：

1.用戶打開(kāi)app，app界面顯示信息瀏覽頁(yè)面，用戶通過(guò)信息瀏覽頁(yè)面尋找到感興趣的視頻鏈接；用戶點(diǎn)擊視頻播放鏈接；用戶全屏播放視頻；

2.用戶在視頻全屏播放界面，通過(guò)接口欲調(diào)出信息瀏覽頁(yè)面，系統(tǒng)內(nèi)部處理如下：

1)移動(dòng)終端軟件獲取到原始網(wǎng)頁(yè)信息后，對(duì)原始網(wǎng)頁(yè)的html、css等信息進(jìn)行轉(zhuǎn)換：通過(guò)解析標(biāo)準(zhǔn)的html、css識(shí)別出網(wǎng)頁(yè)中所有文字信息的背景顏色，將原有文字的背景顏色修改為透明。同時(shí)修改文字顏色，修改文字顏色的目的是為了和移動(dòng)終端增加的透明背景形成對(duì)比，便于用戶識(shí)別文字；移動(dòng)終端軟件能夠選擇重組頁(yè)面或直接修改原頁(yè)面。

以下舉例說(shuō)明如何修改網(wǎng)頁(yè)中文字的背景顏色、文字顏色。比如，以下javascript修改html中id為“ziti”的背景顏色為透明，文字顏色為白色；

2)移動(dòng)終端對(duì)網(wǎng)頁(yè)統(tǒng)一增加透明背景。

3)執(zhí)行以上步驟后，移動(dòng)終端呈現(xiàn)透明的網(wǎng)頁(yè)信息；

3.移動(dòng)終端增加的透明背景透明度可以動(dòng)態(tài)調(diào)整；

比如，安卓系統(tǒng)下，mwebview.setbackgroundcolor接口重新設(shè)置新的透明度；

4.移動(dòng)終端可以配置網(wǎng)頁(yè)文字的顏色；用戶配置網(wǎng)頁(yè)文字顏色后，系統(tǒng)在2.1)步驟將文字顏色配置為用戶設(shè)置的顏色。