一種在前端實現(xiàn)智能視頻直播的系統(tǒng)及方法
【專利摘要】本發(fā)明公開了一種在前端實現(xiàn)智能視頻直播的系統(tǒng)及方法，其用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，涉及網(wǎng)絡(luò)技術(shù)領(lǐng)域，包括：視頻播放器創(chuàng)建模塊，用于基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器；個性化菜單創(chuàng)建模塊，用于在視頻工具條中創(chuàng)建個性化菜單，個性化菜單用于控制視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示用戶輸入的彈幕信息；網(wǎng)站服務(wù)器，用于向用戶發(fā)送視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊，并提供視頻直播的視頻流地址。本發(fā)明通過創(chuàng)建個性化的視頻菜單功能，能夠發(fā)送及顯示用戶輸入的彈幕信息功能，實現(xiàn)了在基于HTML5的瀏覽器中進(jìn)行智能視頻直播，解決了移動設(shè)備瀏覽器上的視頻播放器的菜單定制化問題。
【專利說明】
一種在前端實現(xiàn)智能視頻直播的系統(tǒng)及方法
[0001]本發(fā)明涉及網(wǎng)絡(luò)技術(shù)領(lǐng)域，具體是涉及一種在前端實現(xiàn)智能視頻直播的系統(tǒng)及方法。
【背景技術(shù)】
[0002]目前互聯(lián)網(wǎng)直播網(wǎng)站使用AdobeFlash Player實現(xiàn)桌面端瀏覽器的視頻直播功能，視頻直播功能除了向網(wǎng)站用戶播放視頻內(nèi)容，還會有個性化的視頻菜單功能供用戶操作，例如碼率切換、窗口全屏、發(fā)送彈幕、發(fā)送表情和發(fā)送禮物等。但是移動設(shè)備的瀏覽器不支持Adobe Flash Player，導(dǎo)致大多數(shù)直播網(wǎng)站只能使用HTML5 Video組件進(jìn)行視頻直播。HTML(Hyper Text Markup Language，超文本標(biāo)記語言)5規(guī)范定義了Canvas(畫布)標(biāo)簽、Video(視頻)標(biāo)簽，并對應(yīng)有Canvas API (Applicat1n Programming Interface，應(yīng)用編程接口)和Video API。在前端技術(shù)領(lǐng)域，HTML5視頻標(biāo)簽與Adobe Flash Player相比，原生被高級瀏覽器支持無需安裝插件，更輕量，更節(jié)省電量，并與瀏覽器無縫對接，有利于程序開發(fā)，HTML5視頻標(biāo)簽取代Adobe Flash Player已然成為一個業(yè)內(nèi)趨勢，支持HTML5視頻標(biāo)簽的移動端瀏覽器類型包括具有WebKi t內(nèi)核的瀏覽器，其被移動端瀏覽器支持，也被部分桌面瀏覽器支持。但由于HTML5 Video組件默認(rèn)的視頻工具條不支持個性化定制，沒有個性化的視頻菜單功能，無法實現(xiàn)發(fā)送彈幕這樣的功能，導(dǎo)致用戶體驗變差，視頻直播功能在移動設(shè)備上的應(yīng)用受到很大限制。

【發(fā)明內(nèi)容】

[0003]針對現(xiàn)有技術(shù)中存在的缺陷，本發(fā)明的主要目的在于提供一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，本發(fā)明的另一目的在于提供一種在前端實現(xiàn)智能視頻直播的方法，通過創(chuàng)建個性化的視頻菜單功能，實現(xiàn)了發(fā)送及顯示用戶輸入的彈幕信息功能，極大地提升了用戶體驗，從而實現(xiàn)了在基于HTML5的瀏覽器中，特別是在移動設(shè)備上，進(jìn)行智能視頻直播，保證了視頻直播功能在各種終端瀏覽器下的兼容性，而且解決了移動設(shè)備瀏覽器上的視頻播放器的菜單定制化問題。
[0004]本發(fā)明提供一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，其用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，包括:
[0005]視頻播放器創(chuàng)建模塊，用于基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，并獲取視頻流地址對應(yīng)的視頻流，根據(jù)該視頻播放器在用戶使用的瀏覽器頁面中設(shè)定的顯示尺寸播放視頻流，所述視頻播放器包括視頻播放區(qū)域和視頻工具條；
[0006]個性化菜單創(chuàng)建模塊，用于在視頻工具條中創(chuàng)建個性化菜單，所述個性化菜單用于控制所述視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示用戶輸入的彈幕信息；
[0007]網(wǎng)站服務(wù)器，用于根據(jù)用戶發(fā)出的視頻直播請求，向用戶發(fā)送視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊，并提供視頻直播的視頻流地址。
[0008]在上述技術(shù)方案的基礎(chǔ)上，所述個性化菜單創(chuàng)建模塊包括基本菜單創(chuàng)建單元和窗口全屏創(chuàng)建單元;其中，
[0009]所述基本菜單創(chuàng)建單元用于基于HTML5視頻標(biāo)簽在所述視頻工具條中創(chuàng)建播放、暫停和音量控制菜單；
[0010]所述窗口全屏創(chuàng)建單元用于在所述視頻工具條中創(chuàng)建窗口全屏菜單，所述窗口全屏菜單用于將所述顯示尺寸重新設(shè)定為所述瀏覽器頁面的尺寸。
[0011]在上述技術(shù)方案的基礎(chǔ)上，所述個性化菜單創(chuàng)建模塊還包括彈幕信息創(chuàng)建單元，所述彈幕信息創(chuàng)建單元包括彈幕發(fā)送器、彈幕管理器和彈幕繪制器;其中，
[0012]所述彈幕發(fā)送器用于在所述視頻工具條中創(chuàng)建彈幕發(fā)送菜單，并發(fā)送用戶在該彈幕發(fā)送菜單中輸入的彈幕信息；
[0013]所述彈幕管理器用于接收所述彈幕發(fā)送器發(fā)送的彈幕信息，將所述彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)后發(fā)送給所述網(wǎng)站服務(wù)器；
[0014]所述彈幕繪制器設(shè)有用于渲染彈幕數(shù)據(jù)的預(yù)設(shè)彈幕模型，且彈幕繪制器用于保存從所述網(wǎng)站服務(wù)器接收的彈幕數(shù)據(jù)，并在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，以及在所述彈幕顯示區(qū)域顯示渲染后的彈幕數(shù)據(jù)。
[0015]在上述技術(shù)方案的基礎(chǔ)上，所述網(wǎng)站服務(wù)器包括彈幕服務(wù)器，所述彈幕服務(wù)器用于將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給所有用戶的彈幕管理器，彈幕管理器將接收到的彈幕數(shù)據(jù)發(fā)送給彈幕繪制器，彈幕繪制器顯示所有用戶的彈幕數(shù)據(jù)；
[0016]所述設(shè)定發(fā)送模型包括對所述彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)進(jìn)行篩選，并將篩選后的所述彈幕數(shù)據(jù)分成若干批次或若干小組。
[0017]本發(fā)明還提供一種在前端實現(xiàn)智能視頻直播的方法，其用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，包括以下步驟:
[0018]S1.網(wǎng)站服務(wù)器根據(jù)用戶發(fā)出的視頻直播請求，向用戶發(fā)送包含視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊的組件，并提供視頻直播的地址；
[0019]S2.用戶的瀏覽器獲取所述視頻直播的視頻流的名稱和地址，并調(diào)用視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊；
[0020]S3.視頻播放器創(chuàng)建模塊基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，獲取視頻流地址對應(yīng)的視頻流，并根據(jù)該視頻播放器在所述瀏覽器頁面中播放所述視頻流，所述視頻播放器包括視頻播放區(qū)域和視頻工具條；
[0021]S4.個性化菜單創(chuàng)建模塊在所述視頻工具條中創(chuàng)建用于控制所述視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示彈幕信息的個性化菜單。
[0022]在上述技術(shù)方案的基礎(chǔ)上，步驟S4具體包括:
[0023]使用HTML5視頻標(biāo)簽在所述視頻工具條中創(chuàng)建播放、暫停和音量控制菜單；
[0024]在所述視頻工具條中創(chuàng)建窗口全屏菜單，窗口全屏菜單將顯示尺寸的寬度和高端重新設(shè)定為所述瀏覽器頁面的寬度和高度，并使視頻播放器在瀏覽器頁面的尺寸范圍內(nèi)播放。
[0025]在上述技術(shù)方案的基礎(chǔ)上，所述個性化菜單創(chuàng)建模塊還包括彈幕信息創(chuàng)建單元，所述彈幕信息創(chuàng)建單元包括彈幕發(fā)送器、彈幕管理器和彈幕繪制器，且所述彈幕繪制器設(shè)有用于渲染彈幕數(shù)據(jù)的預(yù)設(shè)彈幕模型；
[0026]步驟S4還包括:
[0027]在視頻工具條中創(chuàng)建用于發(fā)送彈幕的彈幕發(fā)送菜單；
[0028]彈幕管理器接收彈幕發(fā)送器發(fā)送的彈幕信息，將彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)后發(fā)送給網(wǎng)站服務(wù)器；
[0029]彈幕繪制器保存從網(wǎng)站服務(wù)器接收到的彈幕數(shù)據(jù)，并在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，彈幕數(shù)據(jù)經(jīng)過預(yù)設(shè)彈幕模型渲染后在彈幕顯示區(qū)域顯示。
[0030]在上述技術(shù)方案的基礎(chǔ)上，所述網(wǎng)站服務(wù)器包括彈幕服務(wù)器，所述彈幕服務(wù)器將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中所有用戶的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給每一個用戶的彈幕管理器，彈幕管理器將接收到的彈幕數(shù)據(jù)發(fā)送給彈幕繪制器，彈幕繪制器顯示所有用戶的彈幕數(shù)據(jù)；
[0031]所述設(shè)定發(fā)送模型包括對所述彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)進(jìn)行篩選，并將篩選后的所述彈幕數(shù)據(jù)分成若干批次或若干小組。
[0032]在上述技術(shù)方案的基礎(chǔ)上，所述預(yù)設(shè)彈幕模型包括彈幕隊列，所述預(yù)設(shè)彈幕模型包括設(shè)置彈幕數(shù)據(jù)在彈幕顯示區(qū)域中的坐標(biāo)、相鄰彈幕數(shù)據(jù)之間的間距L和停留時間，L>0，所述坐標(biāo)包括X和y，x多0，y多0，所述坐標(biāo)原點設(shè)于所述彈幕顯示區(qū)域的右下角，所述停留時間通過調(diào)用延時遞歸函數(shù)確定。
[0033]在上述技術(shù)方案的基礎(chǔ)上，在視頻播放區(qū)域顯示彈幕數(shù)據(jù)包括以下步驟:
[0034]步驟A:使用HTML5畫布標(biāo)簽在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域；
[0035]步驟B:分批次從所述彈幕隊列中讀取彈幕數(shù)據(jù)，對每次讀取的所述彈幕數(shù)據(jù)設(shè)置不同的坐標(biāo)y，坐標(biāo)X均為O，并將讀取的彈幕數(shù)據(jù)按照設(shè)置的坐標(biāo)繪制在彈幕顯示區(qū)域；
[0036]步驟C:在一個所述停留時間后，刪除位于彈幕顯示區(qū)域左邊的彈幕數(shù)據(jù)，將彈幕顯示區(qū)域內(nèi)其它的彈幕數(shù)據(jù)的坐標(biāo)X更改為x+L，并將所述其它的彈幕數(shù)據(jù)按照更新后的坐標(biāo)重新繪制在彈幕顯示區(qū)域；
[0037]步驟D:將位于彈幕顯示區(qū)域左邊的彈幕數(shù)據(jù)從彈幕隊列中除去；
[0038]步驟E:檢測所述彈幕隊列中是否有彈幕數(shù)據(jù)，若有，進(jìn)入步驟A，重復(fù)步驟A至步驟D，若否，結(jié)束。
[0039]與現(xiàn)有技術(shù)相比，本發(fā)明的優(yōu)點如下:
[0040](I)本發(fā)明中的視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊可以基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器和個性化菜單，通過創(chuàng)建個性化的視頻菜單功能，實現(xiàn)了發(fā)送及顯示用戶輸入的彈幕信息功能，極大地提升了用戶體驗，從而實現(xiàn)了在基于HTML5的瀏覽器中，特別是在移動設(shè)備上，進(jìn)行智能視頻直播，保證了視頻直播功能在各種終端瀏覽器下的兼容性，而且解決了移動設(shè)備瀏覽器上的視頻播放器的菜單定制化問題。
[0041](2)本發(fā)明中的個性化菜單創(chuàng)建模塊包括窗口全屏創(chuàng)建單元，通過將顯示尺寸的寬度和高端重新設(shè)定為瀏覽器頁面的寬度和高度，使視頻播放器在瀏覽器頁面的尺寸范圍內(nèi)播放，對HTML5視頻標(biāo)簽的原始窗口全屏功能作出改進(jìn)，提升了用戶體驗。
[0042](3)本發(fā)明對HTML5畫布標(biāo)簽的擴展和定制不但完全匹配Adobe Flash Player的功能效果，而且可以根據(jù)不同瀏覽器類型動態(tài)選擇最優(yōu)的方案以實現(xiàn)智能視頻直播。
【附圖說明】
[0043]圖1是本發(fā)明實施例在前端實現(xiàn)智能視頻直播的系統(tǒng)示意圖；
[0044]圖2是本發(fā)明實施例彈幕信息創(chuàng)建單元和服務(wù)器的示意圖；
[0045]圖3是本發(fā)明實施例在前端實現(xiàn)智能視頻直播的方法流程圖；
[0046]圖4是步驟S3中在視頻播放區(qū)域顯示彈幕數(shù)據(jù)具體流程圖。
[0047]附圖標(biāo)記:
[0048]視頻播放器創(chuàng)建模塊I；
[0049]個性化菜單創(chuàng)建模塊2，基本菜單創(chuàng)建單元21，窗口全屏創(chuàng)建單元22，彈幕信息創(chuàng)建單元23，彈幕發(fā)送器231，彈幕管理器232，彈幕繪制器233;
[0050]網(wǎng)站服務(wù)器3，彈幕服務(wù)器31。
【具體實施方式】
[0051]下面結(jié)合附圖及具體實施例對本發(fā)明作進(jìn)一步的詳細(xì)描述。
[0052]參見圖1所示，本發(fā)明實施例提供一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，其用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，包括:
[0053]視頻播放器創(chuàng)建模塊I，用于基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，并獲取視頻流地址對應(yīng)的視頻流，根據(jù)該視頻播放器在用戶使用的瀏覽器頁面中設(shè)定的顯示尺寸播放視頻流，視頻播放器包括視頻播放區(qū)域和視頻工具條。
[0054]個性化菜單創(chuàng)建模塊2，用于在視頻工具條中創(chuàng)建個性化菜單，個性化菜單用于控制視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示用戶輸入的彈幕信息。
[0055]網(wǎng)站服務(wù)器3，用于根據(jù)用戶發(fā)出的視頻直播請求，向用戶發(fā)送視頻播放器創(chuàng)建模塊I和個性化菜單創(chuàng)建模塊2，并提供視頻直播的視頻流地址。
[0056]視頻直播功能的核心模塊包括視頻播放器和視頻工具條，視頻播放器負(fù)責(zé)將視頻流轉(zhuǎn)換成圖片流供用戶觀看，視頻工具條負(fù)責(zé)控制視頻播放器，包括開始或暫停、聲音控制、窗口全屏和發(fā)送彈幕等。其中，發(fā)送彈幕是視頻模式下的特有功能，用戶可以發(fā)送彈幕并在視頻播放區(qū)域中展示。
[0057]用戶使用的瀏覽器支持HTML5，具有HTML5視頻標(biāo)簽和畫布標(biāo)簽組件，瀏覽器從網(wǎng)站服務(wù)器3接收視頻播放器創(chuàng)建模塊I和個性化菜單創(chuàng)建模塊2，獲取視頻流地址，并依次執(zhí)行視頻播放器創(chuàng)建模塊I和個性化菜單創(chuàng)建模塊2。
[0058]視頻播放器創(chuàng)建模塊I基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，實現(xiàn)視頻播放功能。具體的，視頻播放器創(chuàng)建模塊I直接調(diào)用HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，并根據(jù)用戶瀏覽器獲取的視頻流地址獲取視頻流地址對應(yīng)的視頻流，以及設(shè)置視頻流的名稱和在用戶使用的瀏覽器頁面中設(shè)定的顯示尺寸。視頻流名稱是該視頻流在瀏覽器頁面上的唯一標(biāo)識，便于后續(xù)個性化菜單創(chuàng)建模塊2對創(chuàng)建的視頻播放器的控制。該視頻播放器可以在用戶使用的瀏覽器頁面中設(shè)定的顯示尺寸播放視頻流，視頻播放器包括視頻播放區(qū)域和視頻工具條。
[0059]本發(fā)明中的視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊可以基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器和個性化菜單，通過創(chuàng)建個性化的視頻菜單功能，實現(xiàn)了發(fā)送及顯示用戶輸入的彈幕信息功能，極大地提升了用戶體驗，從而實現(xiàn)了在基于HTML5的瀏覽器中，特別是在移動設(shè)備上，進(jìn)行智能視頻直播，保證了視頻直播功能在各種終端瀏覽器下的兼容性，而且解決了移動設(shè)備瀏覽器上的視頻播放器的菜單定制化問題。
[0060]個性化菜單創(chuàng)建模塊2包括基本菜單創(chuàng)建單元21，窗口全屏創(chuàng)建單元22和彈幕信息創(chuàng)建單元23。
[0061 ]個性化菜單創(chuàng)建模塊2可以使用JavaScript腳本語言實現(xiàn)。
[0062]其中，
[0063]基本菜單創(chuàng)建單元21用于基于HTML5視頻標(biāo)簽在視頻工具條中創(chuàng)建播放、暫停和音量控制菜單。
[0064]具體的，基本菜單創(chuàng)建單元21直接調(diào)用HTML5視頻標(biāo)簽在視頻工具條中創(chuàng)建播放、暫停和音量控制菜單，調(diào)用的HTML5視頻標(biāo)簽中的功能函數(shù)如下:
[0065]volume:設(shè)置或返回視頻流的音量。
[ΟΟ??] paused:設(shè)置或返回視頻流是否暫停。
[0067]play():開始播放視頻流。
[0068]pause():暫停當(dāng)前視頻播放器。
[0069]通過這些HTML5視頻標(biāo)簽核心屬性和方法，直接使用HTML5視頻標(biāo)簽原生API可以輕松實現(xiàn)視頻工具條中的開始、暫停和音量控制。
[0070]窗口全屏創(chuàng)建單元22用于在視頻工具條中創(chuàng)建窗口全屏菜單，窗口全屏菜單用于將顯示尺寸重新設(shè)定為瀏覽器頁面的尺寸。
[0071 ]具體的，窗口全屏創(chuàng)建單元22在視頻工具條中創(chuàng)建窗口全屏菜單，其中，視頻播放器的顯示尺寸和瀏覽器頁面的尺寸均包括寬度和高度，將顯示尺寸的寬度重新設(shè)定為瀏覽器頁面的寬度，顯示尺寸的高度重新設(shè)定為瀏覽器頁面的高度，使視頻播放器在瀏覽器的頁面尺寸范圍內(nèi)播放。
[0072]在HTML5視頻標(biāo)簽中并沒有JavaScript API去實現(xiàn)類似于Adobe Flash Player的窗口全屏功能，必須將HTML5視頻標(biāo)簽的Controls屬性設(shè)置為true，并使用原生的組件功能去窗口全屏。這是基于安全的考慮，但是默認(rèn)的控件非常丑陋而且無法實現(xiàn)個性化定制，因此本發(fā)明使用偽全屏模式實現(xiàn)個性化的窗口全屏功能，偽全屏模式實際上是通過視頻容器函數(shù)實現(xiàn)將整個視頻播放器鋪滿整個瀏覽器頁面。
[0073]本發(fā)明中的個性化菜單創(chuàng)建模塊包括窗口全屏創(chuàng)建單元，通過將顯示尺寸的寬度和高端重新設(shè)定為瀏覽器頁面的寬度和高度，使視頻播放器在瀏覽器頁面的尺寸范圍內(nèi)播放，對HTML5視頻標(biāo)簽的原始窗口全屏功能作出改進(jìn)，提升了用戶體驗。
[0074]參見圖2所示，發(fā)送彈幕不是HTML5視頻標(biāo)簽原生的方法，本發(fā)明通過自定義開發(fā)實現(xiàn)了發(fā)送及顯示用戶彈幕信息，具體如下:
[0075]彈幕信息創(chuàng)建單元23包括彈幕發(fā)送器231、彈幕管理器232和彈幕繪制器233。其中，
[0076]彈幕發(fā)送器231用于在視頻工具條中創(chuàng)建彈幕發(fā)送菜單，并發(fā)送用戶在該彈幕發(fā)送菜單中輸入的彈幕信息。
[0077]彈幕管理器232用于接收彈幕發(fā)送器231發(fā)送的彈幕信息，將彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)后發(fā)送給網(wǎng)站服務(wù)器3。
[0078]網(wǎng)站服務(wù)器3包括彈幕服務(wù)器31，彈幕服務(wù)器31用于將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給所有用戶的彈幕管理器232，彈幕管理器232將接收到的彈幕數(shù)據(jù)發(fā)送給彈幕繪制器233，彈幕繪制器233顯示所有用戶的彈幕數(shù)據(jù)。
[0079]使用彈幕服務(wù)器31的原因是因為要將用戶的彈幕數(shù)據(jù)進(jìn)行網(wǎng)站同步，讓每一個用戶都能看到當(dāng)前用戶發(fā)送的彈幕信息。
[0080]彈幕繪制器233設(shè)有用于渲染彈幕數(shù)據(jù)的預(yù)設(shè)彈幕模型，且彈幕繪制器233用于保存從網(wǎng)站服務(wù)器3接收的彈幕數(shù)據(jù)，并在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，以及在彈幕顯示區(qū)域顯示渲染后的彈幕數(shù)據(jù)。
[0081]彈幕顯示區(qū)域是透明的，不會遮擋視頻的內(nèi)容。
[0082]用戶通過視頻工具條中的彈幕發(fā)送菜單，提交彈幕信息到彈幕管理器232，彈幕管理器232將彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)，本實施例以彈幕數(shù)據(jù)為字符串形式為例，彈幕數(shù)據(jù)通過WebSocket提交給彈幕服務(wù)器31，彈幕服務(wù)器31將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給所有用戶的彈幕管理器232。
[0083]設(shè)定發(fā)送模型包括對彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)進(jìn)行篩選，并將篩選后的彈幕數(shù)據(jù)分成若干批次或若干小組。篩選過程包括剔除違法或惡意攻擊性彈幕信息。
[0084]參見圖3所示，本發(fā)明還提供一種在前端實現(xiàn)智能視頻直播的方法，該方法用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，包括以下步驟:
[0085]S1.網(wǎng)站服務(wù)器3根據(jù)用戶發(fā)出的視頻直播請求，向用戶發(fā)送包含視頻播放器創(chuàng)建模塊I和個性化菜單創(chuàng)建模塊2的組件，并提供視頻直播的地址。
[0086]S2.用戶的瀏覽器獲取視頻直播的視頻流的名稱和地址，并調(diào)用視頻播放器創(chuàng)建模塊I和個性化菜單創(chuàng)建模塊2。
[0087]S3.視頻播放器創(chuàng)建模塊I基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，獲取視頻流地址對應(yīng)的視頻流，并根據(jù)該視頻播放器在瀏覽器頁面中播放視頻流，視頻播放器包括視頻播放區(qū)域和視頻工具條。
[0088]S4.個性化菜單創(chuàng)建模塊2在視頻工具條中創(chuàng)建用于控制視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示彈幕信息的個性化菜單。
[0089]步驟S4具體包括:
[0090]使用HTML5視頻標(biāo)簽在視頻工具條中創(chuàng)建播放、暫停和音量控制菜單。
[0091 ]在視頻工具條中創(chuàng)建窗口全屏菜單，窗口全屏菜單將顯示尺寸的寬度和高端重新設(shè)定為瀏覽器頁面的寬度和高度，并使視頻播放器在瀏覽器頁面的尺寸范圍內(nèi)播放。
[0092]在視頻工具條中創(chuàng)建用于發(fā)送彈幕的彈幕發(fā)送菜單。
[0093]彈幕管理器232接收彈幕發(fā)送器231發(fā)送的彈幕信息，將彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)后發(fā)送給網(wǎng)站服務(wù)器3。
[0094]彈幕服務(wù)器31將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中所有用戶的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給每一個用戶的彈幕管理器232，彈幕管理器232將接收到的彈幕數(shù)據(jù)發(fā)送給彈幕繪制器233，彈幕繪制器233顯示所有用戶的彈幕數(shù)據(jù)。
[0095]彈幕繪制器233保存從網(wǎng)站服務(wù)器3接收到的彈幕數(shù)據(jù)，并在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，彈幕數(shù)據(jù)經(jīng)過預(yù)設(shè)彈幕模型渲染后在彈幕顯示區(qū)域顯示。
[0096]設(shè)定發(fā)送模型包括對彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)進(jìn)行篩選，并將篩選后的彈幕數(shù)據(jù)分成若干批次或若干小組。
[0097]預(yù)設(shè)彈幕模型包括彈幕隊列，預(yù)設(shè)彈幕模型包括設(shè)置彈幕數(shù)據(jù)在彈幕顯示區(qū)域中的坐標(biāo)、相鄰彈幕數(shù)據(jù)之間的間距L和停留時間，L>0，坐標(biāo)包括X和y，X彡O，y彡O，坐標(biāo)原點設(shè)于彈幕顯示區(qū)域的右下角，停留時間通過調(diào)用延時遞歸函數(shù)確定。
[0098]坐標(biāo)X為沿視頻播放器的顯示尺寸的寬度方向，坐標(biāo)y為沿視頻播放器的顯示尺寸的高度方向。
[0099]所有的彈幕數(shù)據(jù)會被保存在彈幕隊列里面，通過延時遞歸函數(shù)，每間隔一段時間動態(tài)渲染彈幕隊列里面的彈幕數(shù)據(jù)，然后更改彈幕數(shù)據(jù)的X坐標(biāo)實現(xiàn)彈幕數(shù)據(jù)在彈幕顯示區(qū)域從右往左被反復(fù)的渲染。
[0100]本發(fā)明采用自行開發(fā)的延時遞歸函數(shù)來實現(xiàn)彈幕數(shù)據(jù)的動畫移動效果，而并沒有直接使用HTML5的setlnterval功能函數(shù)，避免了 setlnterval消耗瀏覽器性能，特別是多次申明會有未知的錯誤。
[0101]參見圖4所示，在視頻播放區(qū)域顯示彈幕數(shù)據(jù)包括以下步驟:
[0102]步驟A:使用HTML5畫布標(biāo)簽在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域；
[0103]步驟B:分批次從彈幕隊列中讀取彈幕數(shù)據(jù)，對每次讀取的彈幕數(shù)據(jù)設(shè)置不同的坐標(biāo)y，坐標(biāo)X均為0，并將讀取的彈幕數(shù)據(jù)按照設(shè)置的坐標(biāo)繪制在彈幕顯示區(qū)域；
[0104]步驟C:在一個停留時間后，刪除位于彈幕顯示區(qū)域左邊的彈幕數(shù)據(jù)，將彈幕顯示區(qū)域內(nèi)其它的彈幕數(shù)據(jù)的坐標(biāo)X更改為X+L，并將其它的彈幕數(shù)據(jù)按照更新后的坐標(biāo)重新繪制在彈幕顯示區(qū)域；
[0105]步驟D:將位于彈幕顯示區(qū)域左邊的彈幕數(shù)據(jù)從彈幕隊列中除去；
[0106]步驟E:檢測彈幕隊列中是否有彈幕數(shù)據(jù)，若有，進(jìn)入步驟A，重復(fù)步驟A至步驟D，若否，結(jié)束。
[0107]彈幕繪制器233調(diào)用HTML5畫布標(biāo)簽在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，將彈幕數(shù)據(jù)繪制在彈幕顯示區(qū)域，為實現(xiàn)彈幕數(shù)據(jù)的動畫移動效果，彈幕數(shù)據(jù)按照從右往左的順序依次進(jìn)行展示。
[0108]本發(fā)明對HTML5畫布標(biāo)簽的擴展和定制不但完全匹配Adobe Flash Player的功能效果，而且在真實的運行場景中可以根據(jù)不同瀏覽器類型動態(tài)選擇最優(yōu)的方案，以此實現(xiàn)智能視頻直播。在如今舍棄Adobe flash Player的大趨勢中，推動了WEB 2.0的發(fā)展。
[0109]本領(lǐng)域的技術(shù)人員可以對本發(fā)明實施例進(jìn)行各種修改和變型，倘若這些修改和變型在本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則這些修改和變型也在本發(fā)明的保護(hù)范圍之內(nèi)。
[0110]說明書中未詳細(xì)描述的內(nèi)容為本領(lǐng)域技術(shù)人員公知的現(xiàn)有技術(shù)。
【主權(quán)項】
1.一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，其特征在于，其用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，包括: 視頻播放器創(chuàng)建模塊，用于基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，并獲取視頻流地址對應(yīng)的視頻流，根據(jù)該視頻播放器在用戶使用的瀏覽器頁面中設(shè)定的顯示尺寸播放視頻流，所述視頻播放器包括視頻播放區(qū)域和視頻工具條； 個性化菜單創(chuàng)建模塊，用于在視頻工具條中創(chuàng)建個性化菜單，所述個性化菜單用于控制所述視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示用戶輸入的彈幕信息； 網(wǎng)站服務(wù)器，用于根據(jù)用戶發(fā)出的視頻直播請求，向用戶發(fā)送視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊，并提供視頻直播的視頻流地址。2.如權(quán)利要求1所述的一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，其特征在于:所述個性化菜單創(chuàng)建模塊包括基本菜單創(chuàng)建單元和窗口全屏創(chuàng)建單元;其中， 所述基本菜單創(chuàng)建單元用于基于HTML5視頻標(biāo)簽在所述視頻工具條中創(chuàng)建播放、暫停和音量控制菜單； 所述窗口全屏創(chuàng)建單元用于在所述視頻工具條中創(chuàng)建窗口全屏菜單，所述窗口全屏菜單用于將所述顯示尺寸重新設(shè)定為所述瀏覽器頁面的尺寸。3.如權(quán)利要求1所述的一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，其特征在于:所述個性化菜單創(chuàng)建模塊還包括彈幕信息創(chuàng)建單元，所述彈幕信息創(chuàng)建單元包括彈幕發(fā)送器、彈幕管理器和彈幕繪制器;其中， 所述彈幕發(fā)送器用于在所述視頻工具條中創(chuàng)建彈幕發(fā)送菜單，并發(fā)送用戶在該彈幕發(fā)送菜單中輸入的彈幕信息； 所述彈幕管理器用于接收所述彈幕發(fā)送器發(fā)送的彈幕信息，將所述彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)后發(fā)送給所述網(wǎng)站服務(wù)器； 所述彈幕繪制器設(shè)有用于渲染彈幕數(shù)據(jù)的預(yù)設(shè)彈幕模型，且彈幕繪制器用于保存從所述網(wǎng)站服務(wù)器接收的彈幕數(shù)據(jù)，并在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，以及在所述彈幕顯示區(qū)域顯示渲染后的彈幕數(shù)據(jù)。4.如權(quán)利要求3所述的一種在前端實現(xiàn)智能視頻直播的系統(tǒng)，其特征在于:所述網(wǎng)站服務(wù)器包括彈幕服務(wù)器，所述彈幕服務(wù)器用于將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給所有用戶的彈幕管理器，彈幕管理器將接收到的彈幕數(shù)據(jù)發(fā)送給彈幕繪制器，彈幕繪制器顯示所有用戶的彈幕數(shù)據(jù)； 所述設(shè)定發(fā)送模型包括對所述彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)進(jìn)行篩選，并將篩選后的所述彈幕數(shù)據(jù)分成若干批次或若干小組。5.—種基于權(quán)利要求1所述系統(tǒng)的在前端實現(xiàn)智能視頻直播的方法，其特征在于，所述方法用于在基于HTML5的瀏覽器中實現(xiàn)智能視頻直播，包括以下步驟: 51.網(wǎng)站服務(wù)器根據(jù)用戶發(fā)出的視頻直播請求，向用戶發(fā)送包含視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊的組件，并提供視頻直播的地址； 52.用戶的瀏覽器獲取所述視頻直播的視頻流的名稱和地址，并調(diào)用視頻播放器創(chuàng)建模塊和個性化菜單創(chuàng)建模塊； 53.視頻播放器創(chuàng)建模塊基于HTML5視頻標(biāo)簽創(chuàng)建視頻播放器，獲取視頻流地址對應(yīng)的視頻流，并根據(jù)該視頻播放器在所述瀏覽器頁面中播放所述視頻流，所述視頻播放器包括視頻播放區(qū)域和視頻工具條； S4.個性化菜單創(chuàng)建模塊在所述視頻工具條中創(chuàng)建用于控制所述視頻流的播放、暫停、音量、顯示尺寸、以及發(fā)送和顯示彈幕信息的個性化菜單。6.如權(quán)利要求5所述的一種在前端實現(xiàn)智能視頻直播的方法，其特征在于，步驟S4具體包括: 使用HTML5視頻標(biāo)簽在所述視頻工具條中創(chuàng)建播放、暫停和音量控制菜單； 在所述視頻工具條中創(chuàng)建窗口全屏菜單，窗口全屏菜單將顯示尺寸的寬度和高端重新設(shè)定為所述瀏覽器頁面的寬度和高度，并使視頻播放器在瀏覽器頁面的尺寸范圍內(nèi)播放。7.如權(quán)利要求5所述的一種在前端實現(xiàn)智能視頻直播的方法，其特征在于:所述個性化菜單創(chuàng)建模塊還包括彈幕信息創(chuàng)建單元，所述彈幕信息創(chuàng)建單元包括彈幕發(fā)送器、彈幕管理器和彈幕繪制器，且所述彈幕繪制器設(shè)有用于渲染彈幕數(shù)據(jù)的預(yù)設(shè)彈幕模型； 步驟S4還包括: 在視頻工具條中創(chuàng)建用于發(fā)送彈幕的彈幕發(fā)送菜單； 彈幕管理器接收彈幕發(fā)送器發(fā)送的彈幕信息，將彈幕信息轉(zhuǎn)換為彈幕數(shù)據(jù)后發(fā)送給網(wǎng)站服務(wù)器； 彈幕繪制器保存從網(wǎng)站服務(wù)器接收到的彈幕數(shù)據(jù)，并在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域，彈幕數(shù)據(jù)經(jīng)過預(yù)設(shè)彈幕模型渲染后在彈幕顯示區(qū)域顯示。8.如權(quán)利要求7所述的一種在前端實現(xiàn)智能視頻直播的方法，其特征在于:所述網(wǎng)站服務(wù)器包括彈幕服務(wù)器，所述彈幕服務(wù)器將接收到的所有用戶的彈幕數(shù)據(jù)保存在彈幕數(shù)據(jù)表中，并將彈幕數(shù)據(jù)表中所有用戶的彈幕數(shù)據(jù)依據(jù)設(shè)定發(fā)送模型發(fā)回給每一個用戶的彈幕管理器，彈幕管理器將接收到的彈幕數(shù)據(jù)發(fā)送給彈幕繪制器，彈幕繪制器顯示所有用戶的彈幕數(shù)據(jù)； 所述設(shè)定發(fā)送模型包括對所述彈幕數(shù)據(jù)表中的彈幕數(shù)據(jù)進(jìn)行篩選，并將篩選后的所述彈幕數(shù)據(jù)分成若干批次或若干小組。9.如權(quán)利要求7所述的一種在前端實現(xiàn)智能視頻直播的方法，其特征在于:所述預(yù)設(shè)彈幕模型包括彈幕隊列，所述預(yù)設(shè)彈幕模型包括設(shè)置彈幕數(shù)據(jù)在彈幕顯示區(qū)域中的坐標(biāo)、相鄰彈幕數(shù)據(jù)之間的間距L和停留時間，L>0，所述坐標(biāo)包括X和y，x彡0，y彡O，所述坐標(biāo)原點設(shè)于所述彈幕顯示區(qū)域的右下角，所述停留時間通過調(diào)用延時遞歸函數(shù)確定。10.如權(quán)利要求9所述的一種在前端實現(xiàn)智能視頻直播的方法，其特征在于，在視頻播放區(qū)域顯示彈幕數(shù)據(jù)包括以下步驟: 步驟A:使用HTML5畫布標(biāo)簽在視頻播放區(qū)域內(nèi)創(chuàng)建彈幕顯示區(qū)域； 步驟B:分批次從所述彈幕隊列中讀取彈幕數(shù)據(jù)，對每次讀取的所述彈幕數(shù)據(jù)設(shè)置不同的坐標(biāo)y，坐標(biāo)X均為0，并將讀取的彈幕數(shù)據(jù)按照設(shè)置的坐標(biāo)繪制在彈幕顯示區(qū)域； 步驟C:在一個所述停留時間后，刪除位于彈幕顯示區(qū)域左邊的彈幕數(shù)據(jù)，將彈幕顯示區(qū)域內(nèi)其它的彈幕數(shù)據(jù)的坐標(biāo)X更改為x+L，并將所述其它的彈幕數(shù)據(jù)按照更新后的坐標(biāo)重新繪制在彈幕顯示區(qū)域； 步驟D:將位于彈幕顯示區(qū)域左邊的彈幕數(shù)據(jù)從彈幕隊列中除去； 步驟E:檢測所述彈幕隊列中是否有彈幕數(shù)據(jù)，若有，進(jìn)入步驟A，重復(fù)步驟A至步驟D，若 否，結(jié)束。
【文檔編號】H04N21/4788GK106060674SQ201610482399
【公開日】2016年10月26日
【申請日】2016年6月27日
【發(fā)明人】杜偉
【申請人】武漢斗魚網(wǎng)絡(luò)科技有限公司