本發(fā)明涉及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，具體涉及一種基于html5的彈幕播放器及其方法。

背景技術(shù)：

彈幕是指一種在觀看視頻時(shí)，大量以字幕（有且不限于文字和圖片）形式呈現(xiàn)的評(píng)論與視頻同在一個(gè)畫面的現(xiàn)象。在視頻上方大量飄過的評(píng)論如密集炮彈一般，故得名彈幕。彈幕會(huì)隨著視頻的播放實(shí)時(shí)在視頻上呈現(xiàn)，這樣觀看者在觀看該視頻時(shí)能夠看到其他觀看者和自己發(fā)送的彈幕。

html5是萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用超文本標(biāo)記語言（html）的第五次重大修改，“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。html5本身是由w3c推薦的。

<video>是html5中的新標(biāo)簽，其作用是在瀏覽器頁面中嵌入視頻元素，定義視頻，比如電影片段或其他視頻流，該標(biāo)簽對(duì)外提供一系列的接口方法供外部控制視頻

web服務(wù)器一般指網(wǎng)站服務(wù)器，也稱為www(worldwideweb)服務(wù)器，主要功能是提供網(wǎng)上信息瀏覽服務(wù)?？梢韵?yàn)g覽器等web客戶端提供文檔，也可以放置網(wǎng)站文件，讓全世界瀏覽；可以放置數(shù)據(jù)文件，讓全世界下載。

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

本發(fā)明的目的在于提供一種基于html5的彈幕播放器及其方法，使用戶在觀看視頻的同時(shí)能夠方便地看到其他用戶對(duì)于該視頻當(dāng)前時(shí)間點(diǎn)的評(píng)論，提高視頻的觀看趣味和體驗(yàn)，并可以讓用戶對(duì)彈幕的內(nèi)容、表現(xiàn)方式進(jìn)行控制，達(dá)到人性化體驗(yàn)。

為了達(dá)到上述目的，本發(fā)明通過以下技術(shù)方案實(shí)現(xiàn)：

一種基于html5的彈幕播放器，其特征是，用于同步實(shí)現(xiàn)瀏覽器中的彈幕與視頻播放，該基于html5的彈幕播放器包含：

視頻播放器創(chuàng)建模塊，用于在瀏覽器頁面中創(chuàng)建視頻標(biāo)簽作為視頻播放器，并向網(wǎng)站服務(wù)器獲取視頻id對(duì)應(yīng)的視頻流以及彈幕文件；

彈幕容器創(chuàng)建模塊，用于在視頻播放器上創(chuàng)建一個(gè)彈幕容器，供彈幕在視頻播放器上展示；

彈幕信息輸入模塊，用于在瀏覽器頁面上創(chuàng)建一個(gè)彈幕輸入?yún)^(qū)域，供用戶輸入彈幕信息，并將用戶輸入的彈幕信息更新到網(wǎng)站服務(wù)器的彈幕文件中；

彈幕渲染管理模塊，用于將當(dāng)前用戶輸入的彈幕信息以及當(dāng)前視頻播放時(shí)刻對(duì)應(yīng)的彈幕文件中的彈幕信息轉(zhuǎn)化為彈幕后展示到彈幕容器中，或根據(jù)用戶要求暫停彈幕展示；

網(wǎng)站服務(wù)器，用于根據(jù)用戶發(fā)出的視頻播放請(qǐng)求，向用戶發(fā)送視頻播放器創(chuàng)建模塊、彈幕容器創(chuàng)建模塊以及彈幕信息輸入模塊的創(chuàng)建邏輯文件，并提供視頻流地址以及彈幕信息；

控制模塊，用于創(chuàng)建一個(gè)控制區(qū)域，用戶通過對(duì)控制區(qū)域的操作來實(shí)現(xiàn)所述視頻流的播放、暫停、跳轉(zhuǎn)、彈幕開關(guān)。

上述的基于html5的彈幕播放器，其中：

所述控制模塊還可根據(jù)用戶操作來控制彈幕顯示方位、音量、播放窗口大小、發(fā)送彈幕設(shè)置、視頻設(shè)置、彈幕列表。

上述的基于html5的彈幕播放器，其中：

所述的視頻播放器為在瀏覽器頁面中占據(jù)一個(gè)寬度和高度可自由設(shè)定的矩形大小的空間。

上述的基于html5的彈幕播放器，其中：

彈幕展現(xiàn)運(yùn)動(dòng)方式為在彈幕容器中以一定方向滾動(dòng)展示或靜止在彈幕容器的上/下方或一定時(shí)間后消失。

上述的基于html5的彈幕播放器，其中：

所述的彈幕容器為一個(gè)與視頻播放器大小相同的透明區(qū)域。

一種基于html5的彈幕播放器的彈幕方法，其特征是，包含以下步驟：

s1、網(wǎng)站服務(wù)器根據(jù)用戶發(fā)出的視頻播放請(qǐng)求，在瀏覽器中創(chuàng)建視頻播放器、彈幕容器、彈幕輸入?yún)^(qū)域以及用戶控制區(qū)域，并提供對(duì)應(yīng)的視頻流以及彈幕文件；

s2、用戶播放視頻，網(wǎng)站服務(wù)器判斷播放器的播放狀態(tài)以及彈幕開關(guān)狀態(tài)，根據(jù)用戶選擇按所需視頻播放模式進(jìn)行視頻播放和彈幕。

上述的基于html5的彈幕播放器的彈幕方法，其中，所述的步驟s2具體包含：

s21、播放器開始播放；

s22、網(wǎng)站服務(wù)器對(duì)每幀都進(jìn)行一個(gè)判斷，如果彈幕文件中有當(dāng)前時(shí)間的彈幕，則取出，并展現(xiàn)在彈幕容器上，當(dāng)用戶發(fā)送彈幕時(shí)，直接展現(xiàn)在彈幕容器中；

s23、播放器暫停播放時(shí)，停止每幀的判斷，并停止當(dāng)前彈幕容器中的彈幕運(yùn)動(dòng)；播放器關(guān)閉彈幕時(shí)，停止每幀的判斷，清除彈幕容器中的彈幕；播放器重新開啟彈幕時(shí)，重新開始s22中每幀的判斷；播放器跳轉(zhuǎn)時(shí)間開始播放時(shí)，清除彈幕容器中的彈幕，并重新開始s22中每幀的判斷；播放器播放完畢時(shí)，停止每幀的判斷，并停止當(dāng)前彈幕容器中的彈幕運(yùn)動(dòng)

本發(fā)明與現(xiàn)有技術(shù)相比具有以下優(yōu)點(diǎn)：使用戶在觀看視頻的同時(shí)能夠方便地看到其他用戶對(duì)于該視頻當(dāng)前時(shí)間點(diǎn)的評(píng)論，提高視頻的觀看趣味和體驗(yàn)，并可以讓用戶對(duì)彈幕的內(nèi)容、表現(xiàn)方式進(jìn)行控制，達(dá)到人性化體驗(yàn)。

附圖說明

圖1為本發(fā)明的系統(tǒng)框圖；

圖2為本發(fā)明的方法流程圖。

具體實(shí)施方式

以下結(jié)合附圖，通過詳細(xì)說明一個(gè)較佳的具體實(shí)施例，對(duì)本發(fā)明做進(jìn)一步闡述。

如圖1、2所示，本發(fā)明公開了一種基于html5的彈幕播放器，用于同步實(shí)現(xiàn)瀏覽器中的彈幕與視頻播放，該基于html5的彈幕播放器具體包含由網(wǎng)站服務(wù)器1（或web服務(wù)器）、視頻播放器創(chuàng)建模塊2、彈幕容器創(chuàng)建模塊3、彈幕信息輸入模塊4、彈幕渲染管理模塊5以及控制模塊6。所述的網(wǎng)站服務(wù)器1用于根據(jù)用戶發(fā)出的視頻播放請(qǐng)求，向用戶發(fā)送視頻播放器創(chuàng)建模塊、彈幕容器創(chuàng)建模塊以及彈幕信息輸入模塊的創(chuàng)建邏輯文件，并提供視頻流地址以及彈幕信息。

所述的視頻播放器創(chuàng)建模塊2用于在瀏覽器頁面中創(chuàng)建視頻標(biāo)簽作為視頻播放器，并向網(wǎng)站服務(wù)器1獲取視頻id對(duì)應(yīng)的視頻流以及彈幕文件，通常，用戶新建稿件時(shí)，網(wǎng)站服務(wù)器1會(huì)分配一個(gè)唯一的編號(hào)標(biāo)識(shí)此稿件aid，每個(gè)稿件可以上傳多段視頻，每段視頻分配一個(gè)唯一的編號(hào)標(biāo)識(shí)此視頻cid，并用此cid生成一個(gè)空彈幕列表，在該段視頻內(nèi)發(fā)送的彈幕會(huì)存儲(chǔ)到對(duì)應(yīng)cid的彈幕列表；用戶通過稿件aid和視頻標(biāo)識(shí)cid訪問一個(gè)確定視頻，網(wǎng)站服務(wù)器1返回對(duì)應(yīng)的視頻流地址和彈幕文件地址。本發(fā)明的一實(shí)施例中，所述的視頻播放器為在瀏覽器頁面中占據(jù)一個(gè)寬度和高度可自由設(shè)定的矩形大小的空間。

所述的彈幕容器創(chuàng)建模塊3用于在視頻播放器上創(chuàng)建一個(gè)彈幕容器，供彈幕在視頻播放器上展示；彈幕容器可以自定義展示位置，一般是展現(xiàn)層級(jí)比視頻播放器層級(jí)高的一塊等寬等高矩形區(qū)域，可以是一個(gè)普通的div標(biāo)簽元素，也可以是一塊canvas畫布，彈幕的繪制方式實(shí)現(xiàn)了多種不同的方式。本實(shí)施例中，所述的彈幕容器為一個(gè)與視頻播放器大小相同的透明區(qū)域。

所述的彈幕信息輸入模塊4用于在瀏覽器頁面上創(chuàng)建一個(gè)彈幕輸入?yún)^(qū)域，供用戶輸入彈幕信息，并將用戶輸入的彈幕信息更新到網(wǎng)站服務(wù)器1的彈幕文件中；從彈幕發(fā)送到更新至彈幕文件的過程中有兩層可配置的過濾邏輯：第一層是判斷用戶是否有發(fā)送權(quán)限，輸入的彈幕字?jǐn)?shù)是否超過限制、是否被彈幕的屏蔽規(guī)則命中，然后發(fā)送到網(wǎng)站服務(wù)器1，網(wǎng)站服務(wù)器1再進(jìn)行上述驗(yàn)證，才會(huì)添加到彈幕文件。

所述的彈幕渲染管理模塊5用于將當(dāng)前用戶輸入的彈幕信息以及當(dāng)前視頻播放時(shí)刻對(duì)應(yīng)的彈幕文件中的彈幕信息轉(zhuǎn)化為彈幕后展示到彈幕容器中，或根據(jù)用戶要求暫停彈幕展示，彈幕的渲染支持多種方式實(shí)現(xiàn)，css，css3，canvas，在不同瀏覽器下的支持程度和效率不一，可以通過瀏覽器種類選用效率最高的一種，彈幕的展現(xiàn)方式支持多種方式實(shí)現(xiàn)，有頂部彈幕、底部彈幕、滾動(dòng)彈幕、逆向彈幕，其中滾動(dòng)彈幕使用了碰撞檢測方式，可保證優(yōu)雅的展現(xiàn)方式。本實(shí)施例中，彈幕展現(xiàn)運(yùn)動(dòng)方式為在彈幕容器中以一定方向滾動(dòng)展示或靜止在彈幕容器的上/下方或一定時(shí)間后消失。

所述的控制模塊用于創(chuàng)建一個(gè)控制區(qū)域，通常是在視頻播放器上或?yàn)g覽器上創(chuàng)建一個(gè)控制區(qū)域，控制區(qū)域中包含各種表單或按鈕，用戶通過對(duì)控制區(qū)域的操作來實(shí)現(xiàn)所述視頻流的播放、暫停、跳轉(zhuǎn)、彈幕開關(guān)，還可以提供彈幕顯示方位、音量、播放窗口大小、發(fā)送彈幕設(shè)置、視頻設(shè)置、彈幕列表的控制；本實(shí)施例中，網(wǎng)站服務(wù)器1以及彈幕渲染管理模塊5根據(jù)控制模塊6中反應(yīng)的用戶操作需求進(jìn)行響應(yīng)進(jìn)而實(shí)現(xiàn)相應(yīng)的控制功能。

本發(fā)明還公開了一種基于html5的彈幕播放器的彈幕方法，其包含以下步驟：

s1、網(wǎng)站服務(wù)器根據(jù)用戶發(fā)出的視頻播放請(qǐng)求，在瀏覽器中創(chuàng)建視頻播放器、彈幕容器、彈幕輸入?yún)^(qū)域以及用戶控制區(qū)域，并提供對(duì)應(yīng)的視頻流以及彈幕文件；

s2、用戶播放視頻，網(wǎng)站服務(wù)器判斷播放器的播放狀態(tài)以及彈幕開關(guān)狀態(tài)，根據(jù)用戶選擇按所需視頻播放模式進(jìn)行視頻播放和彈幕。

上述的基于html5的彈幕播放器的彈幕方法，其中，所述的步驟s2具體包含：

s21、播放器開始播放；

s22、網(wǎng)站服務(wù)器對(duì)每幀（1/60秒）都進(jìn)行一個(gè)判斷，如果彈幕文件中有當(dāng)前時(shí)間的彈幕，則取出，并展現(xiàn)在彈幕容器上，當(dāng)用戶發(fā)送彈幕時(shí)，直接展現(xiàn)在彈幕容器中；

s23、播放器暫停播放時(shí)，停止每幀的判斷，并停止當(dāng)前彈幕容器中的彈幕運(yùn)動(dòng)；播放器關(guān)閉彈幕時(shí)，停止每幀的判斷，清除彈幕容器中的彈幕；播放器重新開啟彈幕時(shí)，重新開始s22中每幀的判斷；播放器跳轉(zhuǎn)時(shí)間開始播放時(shí)，清除彈幕容器中的彈幕，并重新開始s22中每幀的判斷；播放器播放完畢時(shí)，停止每幀的判斷，并停止當(dāng)前彈幕容器中的彈幕運(yùn)動(dòng)。

盡管本發(fā)明的內(nèi)容已經(jīng)通過上述優(yōu)選實(shí)施例作了詳細(xì)介紹，但應(yīng)當(dāng)認(rèn)識(shí)到上述的描述不應(yīng)被認(rèn)為是對(duì)本發(fā)明的限制。在本領(lǐng)域技術(shù)人員閱讀了上述內(nèi)容后，對(duì)于本發(fā)明的多種修改和替代都將是顯而易見的。因此，本發(fā)明的保護(hù)范圍應(yīng)由所附的權(quán)利要求來限定。