TWI592019B - 彈幕顯示方法及裝置 - Google Patents

彈幕顯示方法及裝置 Download PDF

Info

Publication number
TWI592019B
TWI592019B TW105116530A TW105116530A TWI592019B TW I592019 B TWI592019 B TW I592019B TW 105116530 A TW105116530 A TW 105116530A TW 105116530 A TW105116530 A TW 105116530A TW I592019 B TWI592019 B TW I592019B
Authority
TW
Taiwan
Prior art keywords
text track
display
information
video
barrage
Prior art date
Application number
TW105116530A
Other languages
English (en)
Other versions
TW201703513A (zh
Inventor
郭俊海
莊子健
石玉磊
Original Assignee
騰訊科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 騰訊科技（深圳）有限公司 filed Critical 騰訊科技（深圳）有限公司
Publication of TW201703513A publication Critical patent/TW201703513A/zh
Application granted granted Critical
Publication of TWI592019B publication Critical patent/TWI592019B/zh

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H04N21/4316—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations for displaying supplemental content in a region of the screen, e.g. an advertisement in a separate window
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21—Server components or server architectures
    • H04N21/218—Source of audio or video content, e.g. local disk arrays
    • H04N21/2187—Live feed
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/4722—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for requesting additional data associated with the content
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/475—End-user interface for inputting end-user data, e.g. personal identification number [PIN], preference data
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/485—End-user interface for client configuration
    • H04N21/4858—End-user interface for client configuration for modifying screen layout parameters, e.g. fonts, size of the windows
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/488—Data services, e.g. news ticker
    • H04N21/4884—Data services, e.g. news ticker for displaying subtitles
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/81—Monomedia components thereof
    • H04N21/8126—Monomedia components thereof involving additional data, e.g. news, sports, stocks, weather forecasts
    • H04N21/8133—Monomedia components thereof involving additional data, e.g. news, sports, stocks, weather forecasts specifically related to the content, e.g. biography of the actors in a movie, detailed information about an article seen in a video program
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/854—Content authoring
    • H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]

Landscapes

  • Engineering & Computer Science (AREA)
  • Signal Processing (AREA)
  • Multimedia (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Theoretical Computer Science (AREA)
  • Business, Economics & Management (AREA)
  • Marketing (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Computer Security & Cryptography (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Information Transfer Between Computers (AREA)
  • User Interface Of Digital Computer (AREA)

Description

彈幕顯示方法及裝置
本發明涉及多媒體顯示領域，特別涉及一種彈幕顯示方法及裝置。
彈幕顯示系統是在顯示視頻時，將大量的用戶評論以滾動字幕形式顯示在視頻上的一種顯示方式。
在目前的線上視頻網站上，通常採用Flash程式來提供彈幕功能。在使用者使用瀏覽器訪問線上視頻網站時，瀏覽器載入和運行Flash程式，由Flash程式獲取彈幕資訊並將彈幕資訊疊加顯示在線上視頻上。
在實現本發明的過程中，發明人發現現有技術至少存在以下問題：第一，由於Flash程式的不安全性，很多瀏覽器不再支援Flash程式的運行，比如蘋果公司提供的IOS作業系統的瀏覽器即為不支援Flash程式的瀏覽器，導致在這些瀏覽器中無法正常顯示彈幕資訊；第二，在不支援Flash程式的作業系統上，雖然可以使用獨立的App來實現彈幕功能，但是獨立的App需要適配多種機型並進行大量研發，無法廣泛使用且研發成本較高； 第三，現有技術中還存在一種將彈幕資訊附加在網頁節點上的實現方式，但是由於該彈幕資訊並不是直接作用於線上視頻本身，一旦線上視頻進行全屏播放，彈幕資訊的顯示就會失敗。
為了解決瀏覽器不支援Flash程式時，無法顯示彈幕資訊的問題，本發明實施例提供了一種彈幕顯示方法及裝置。所述技術方案如下：第一方面，提供了一種彈幕顯示方法，所述方法包括：載入符合HTML5協議的網頁，所述網頁包括有視頻標籤和文本軌道標籤；根據所述視頻標籤載入和顯示線上視頻；根據所述文本軌道標籤載入WebVTT；根據所述WebVTT在所述線上視頻上顯示彈幕資訊。
第二方面，提供了一種彈幕顯示裝置，所述裝置包括：網頁載入模組，用於載入符合HTML5協議的網頁，所述網頁包括有視頻標籤和文本軌道標籤；視頻顯示模組，用於根據所述視頻標籤載入和顯示線上視頻；文件載入模組，用於根據所述文本軌道標籤載入WebVTT；彈幕顯示模組，用於根據所述WebVTT在所述線上視頻上顯示彈幕資訊。
本發明實施例提供的技術方案帶來的有益效果是：通過使用HTML5協定提供的文本軌道標籤，載入WebVTT，根據WebVTT在線上視頻上顯示彈幕資訊；解決了瀏覽器不支援Flash程式時，無法顯示彈幕資訊 的問題；達到了採用絕大多數瀏覽器已經支援的HTML5協定，實現在線上視頻上顯示彈幕資訊，且該彈幕顯示的實現並不需要獨立的App，僅需要符合HTML5協定的網頁即可實現的效果。另外，該彈幕顯示的實現也不受線上視頻是否全屏顯示的影響。
為讓本發明之上述內容能更明顯易懂，下文特舉較佳實施例，並配合所附圖式，作詳細說明如下：
102~108‧‧‧步驟
108a、108b‧‧‧步驟
301~308‧‧‧步驟
42‧‧‧網頁
44‧‧‧線上視頻
420‧‧‧伺服器
440‧‧‧電子設備
620、720‧‧‧網頁載入模組
640、740‧‧‧視頻顯示模組
660、760‧‧‧文件載入模組
680、780‧‧‧彈幕顯示模組
782‧‧‧物件創建單元
784‧‧‧彈幕顯示單元
782a‧‧‧讀取子單元
784a‧‧‧創建子單元
為了更清楚地說明本發明實施例中的技術方案，下面將對實施例描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對於本領域普通技術人員來講，在不付出進步性勞動的前提下，還可以根據這些附圖獲得其他的附圖。第1圖是本發明一個實施例提供的彈幕顯示方法的方法流程圖；第2圖是本發明另一個實施例提供的彈幕顯示方法的方法流程圖；第3圖是本發明另一個實施例提供的彈幕顯示方法的方法流程圖；第4圖是第3圖實施例提供的彈幕顯示方法在實施時的實施示意圖；第5圖是第3圖實施例提供的彈幕顯示方法在實施時的介面示意圖；第6圖是本發明一個實施例提供的彈幕顯示裝置的結構方框圖；第7圖是本發明另一個實施例提供的彈幕顯示裝置的結構方框圖；第8圖是本發明另一個實施例提供的彈幕顯示裝置的結構方框圖。
以下結合說明書附圖及具體實施例進一步說明本發明的技術方案。應當理解，此處所描述的具體實施例僅僅用以解釋本發明，並不用於限定本發明。
HTML5(HyperText Markup Language 5，超文字標記語言第五版)已經被目前的絕大多數瀏覽器所支持。
在HTML5中，提供了視頻標籤<video>和文本軌道標籤<track>。其中，視頻標籤<video>用於在HTML5頁面中嵌入線上視頻；文本軌道標籤<track>用於為視頻元素添加字幕。該字幕是靜態字幕，可以以標題、普通字幕、描述或者章節等形式顯示在線上視頻上。
而在本發明實施例中，借助文本軌道標籤<track>的基本特性，在二次開發的基礎上，實現了動態彈幕的顯示。
請參考第1圖，其示出了本發明一個實施例提供的彈幕顯示方法的方法流程圖。本實施例以該彈幕顯示方法應用於支援HTML5協定的瀏覽器中來舉例說明，該瀏覽器可以運行在電子設備中。該方法包括：步驟102，載入符合HTML5協議的網頁，該網頁包括有視頻標籤和文本軌道標籤；瀏覽器從伺服器載入符合HTML5協議的網頁。
步驟104，根據視頻標籤載入和顯示線上視頻；步驟106，根據文本軌道標籤載入WebVTT；WebVTT(Web Video Text Tracks，網頁視頻文本軌道文件)一種檔案格式，用於標記外部的文字軌道。該外部的文字軌道可以是伺服器根據其他使用者對線上視頻的評論資訊所生成的。
步驟108，根據WebVTT在線上視頻上顯示彈幕資訊。
瀏覽器根據WebVTT中的文字軌道在線上視頻上顯示彈幕資訊。
綜上所述，本實施例提供的彈幕顯示方法，通過使用HTML5協定提供的文本軌道標籤，載入WebVTT，根據WebVTT在線上視頻上顯示彈幕資訊；解決了瀏覽器不支援Flash程式時，無法顯示彈幕資訊的問題；達到了採用絕大多數瀏覽器已經支援的HTML5協定，實現在線上視頻上顯示彈幕資訊，且該彈幕顯示的實現並不需要獨立的App，僅需要符合HTML5協定的網頁即可實現的效果。另外，該彈幕顯示的實現也不受線上視頻是否全屏顯示的影響。
在一個可能的實施例中，步驟108被可替代地實現成為如下2個步驟，如第2圖所示：步驟108a，根據WebVTT文件創建至少一個文本軌道物件，每個文本軌道物件對應一條彈幕資訊；該彈幕資訊可以是其它使用者和/或當前使用者對該線上視頻的評論資訊。
步驟108b，通過預設程式控制文本軌道物件在線上視頻上以彈幕形式進行顯示。
可選地，該預設程式是在符合HTML5協議的網頁中的Java程式。
綜上所述，HTML5提供的文本軌道標籤<track>的基本屬性是在一個固定位置顯示一條字幕，無法實現字幕的滾動顯示。而在本實施例中，將WebVTT中的文本軌道資訊創建為文本軌道物件，通過預設程式控制文本軌道物件進行移動，實現了將文本軌道資訊以彈幕形式在線上視頻上進行顯示的效果。
請參考第3圖，其示出了本發明另一個實施例提供的彈幕顯示方法的方法流程圖。本實施例以該彈幕顯示方法應用於支援HTML5協定的瀏覽器中來舉例說明，該瀏覽器可以運行在電子設備中。該方法包括：步驟301，載入符合HTML5協議的網頁，該網頁包括有視頻標籤和文本軌道標籤；瀏覽器從伺服器載入符合HTML5協議的網頁。
該網頁中包括有視頻標籤，該視頻標籤包括：視頻來源位址、視頻的高度、視頻的寬度等資訊。
該網頁中還包括有文本軌道標籤，該文本軌道標籤用於從伺服器載入WebVTT文件。
步驟302，根據視頻標籤載入和顯示線上視頻；瀏覽器根據視頻標籤中的視頻來源位址載入和顯示線上視頻。
在顯示線上視頻時，瀏覽器可以根據視頻標籤中的高度和寬度進行顯示。
步驟303，根據文本軌道標籤從伺服器載入靜態的WebVTT或者動態的WebVTT；瀏覽器還根據文本軌道標籤從伺服器載入WebVTT。
WebVTT可以分為兩類：靜態的WebVTT和動態的WebVTT。其中，靜態的WebVTT是伺服器預先根據與該線上視頻對應的歷史評論資訊所生成的。
動態的WebVTT是伺服器根據本次播放線上視頻時的評論 資訊生成的。也即，伺服器在每接收到一條有關該線上視頻的評論資訊時，將該評論資訊作為一條文本軌道資訊添加入動態的WebVTT中，瀏覽器每隔預定時間間隔從伺服器獲取一次該動態的WebVTT。可選地，每次獲取到的WebVTT包括最近一個時間間隔中的所有評論資訊對應的文本軌道資訊。
步驟304，從WebVTT文件中讀取至少一條文本軌道資訊和與每條文本軌道資訊對應的屬性資訊；瀏覽器從WebVTT文件中讀取至少一條文本軌道資訊和與每條文本軌道資訊對應的屬性資訊。
比如，一條文本軌道資訊包括“這個女主角叫什麼名字啊？”屬性資訊包括顯示樣式資訊、顯示時間資訊和顯示位置資訊中的至少一項。其中：顯示樣式資訊包括：字體大小、字體顏色、字體類型、字體邊框、邊框類型、透明度、陰影和背景圖片中的至少一種。
比如，字體類型是楷體、字體顏色是黑色、字體大小是四號，字體邊框是圓角矩形線框、透明度為80%、無陰影和無背景圖片。
顯示時間資訊至少包括出現時間和結束時間。可選地，顯示時間資訊還包括中間時間或者預定時間間隔。
比如，出現時間是當前線上視頻的播放時間為“00：31”時，結束時間是當前線上視頻的播放時間為“00：36”。中間時間包括“00：32、00：33、00：34、00：35”，或者，預定時間間隔為0.2秒。
顯示位置資訊至少包括：以行號或列號表示的顯示位置和以 百分比表示的顯示位置中的至少一種，至少存在一個顯示位置與出現時間對應。
比如：與出現時間對應的播放位置是當前線上視頻的顯示視窗中的第二行的最左側；與結束時間對應的播放位置是當前線上視頻的顯示視窗中的第二行的最右側。
又比如：與出現時間對應的播放位置是當前線上視頻的顯示視窗從上邊緣往下的40%位置的最左側，該40%是上邊緣與下邊緣之間的距離的40%；與結束時間對應的播放位置是當前線上視頻的顯示視窗從上邊緣往下的40%位置的最右側。
需要補充說明的是，由於同一個線上視頻的各條文本軌道資訊通常採用相同的顯示位置資訊。所以WebVTT中可以通過批量處理物件為n條文本軌道資訊批量設置顯示位置資訊。
比如，通過Region物件將n條文本軌道資訊的顯示位置均設置為：與出現時間對應的播放位置是當前線上視頻的顯示視窗中的第二行的最左側；與結束時間對應的播放位置是當前線上視頻的顯示視窗中的第二行的最右側。
又比如：通過Region物件將另外n條文本軌道資訊的顯示位置均設置為：與出現時間對應的播放位置是當前線上視頻的顯示視窗中的第三行的最左側；與結束時間對應的播放位置是當前線上視頻的顯示視窗中的第四行的最右側。
步驟305，對於每一條文本軌道資訊，根據屬性資訊創建與該文本軌道資訊對應的文本軌道物件； 對於WebVTT中的每一條文本軌道資訊，根據與該文本軌道資訊對應的屬性資訊，創建與該文本軌道資訊對應的文本軌道物件。
文本軌道物件是可以被新建、刪除和操作的物件。新建的一條文本軌道物件可以包括開始時間和結束時間等資訊。
同時，由於文本軌道物件可以被預定程式所操作，所以文本軌道物件可以實現成為滾動顯示效果。
步驟306，對於每一個文本軌道物件，通過預設程式控制該文本軌道物件按照出現時間顯示在線上視頻上與出現時間對應的顯示位置，該文本軌道物件的顯示樣式與顯示樣式資訊對應；該預設程式是符合HTML5協定的網頁中攜帶的Java程式。
該Java程式可以控制每一個文本軌道物件按照各自的出現時間顯示在線上視頻上，且在線上視頻上的出現位置是與該出現時間對應的顯示位置。每條文本軌道物件的顯示樣式與對應的顯示樣式資訊對應，也即字體大小、字體類型等樣式與對應的顯示樣式資訊對應。
步驟307，通過預設程式每隔預定時間間隔改變文本軌道物件的顯示位置；對於每一個文本軌道物件，該Java程式還會每隔預定時間間隔改變該文本軌道物件的顯示位置。該預定時間間隔可以是預定的時間間隔；也可以是顯示時間資訊中所指示的時間間隔。
比如，對於一個文本軌道物件，該Java程式每隔0.2秒將該文本軌道物件向右側移動預定長度。
步驟308，通過預設程式控制文本軌道物件按照結束時間在 線上視頻上消失。
對於每一個文本軌道物件，該Java程式還會控制該文本軌道物件按照結束時間在線上視頻上消失。
當然，各個文本軌道物件的出現時間可以相同或不同，從而實現彈幕顯示效果。
綜上所述，本實施例提供的彈幕顯示方法，通過使用HTML5協定提供的文本軌道標籤，載入WebVTT，根據WebVTT在線上視頻上顯示彈幕資訊；解決了瀏覽器不支援Flash程式時，無法顯示彈幕資訊的問題；達到了採用絕大多數瀏覽器已經支援的HTML5協定，實現在線上視頻上顯示彈幕資訊，且該彈幕顯示的實現並不需要獨立的App，僅需要符合HTML5協定的網頁即可實現的效果。另外，該彈幕顯示的實現也不受線上視頻是否全屏顯示的影響。
本實施例提供的彈幕顯示方法，還通過將WebVTT中的各個文本軌道資訊創建為文本軌道物件，然後使用預定程式操作文本軌道物件改變顯示位置；實現了將普通的靜態文本以彈幕形式進行顯示的效果，該彈幕形式是指多個文本軌道物件分別在線上視頻上以滾動顯示的方式進行顯示的顯示形式。
同時，由於HTML5的網頁可以全屏顯示，所以上述彈幕顯示方法還可以實現線上視頻在全屏顯示時的彈幕顯示。
需要補充說明的是，由於第一個文本軌道物件在顯示時，可能會出現閃屏bug(錯誤)，作為可選的步驟，在步驟305之前，通過預定程式創建一個空的文本軌道物件作為第一個文本軌道物件，該空的文本軌 道物件因為內容為空，所以不會觸發閃屏bug，然後再根據WebVTT中的文本軌道資訊來創建後續的文本軌道物件進行顯示。顯然，第一個文本軌道物件用於消除初次閃屏錯誤。
結合參考第4圖，其更形象地示出了該彈幕顯示方法的實施過程。伺服器420向各個用戶(包括當前用戶和其它使用者)的電子設備440提供符合HTML5協議的網頁42，這些電子設備440中的瀏覽器載入符合HTML5的網頁42，並且根據該網頁42中的視頻標籤顯示線上視頻44。在觀看線上視頻44的過程中，每個用戶都可以在該網頁42中發表評論資訊，伺服器接收各個使用者發送的評論資訊，並根據這些評論資訊即時生成WebVTT文件，該WebVTT文件的檔案名可以是1.vtt。然後，各個電子設備440在播放線上視頻44的過程中，利用文本軌道標籤從伺服器載入該WebVTT文件，通過網頁42中的Java程式將WebVTT中的文本軌道資訊創建為文本軌道物件，並操作該Java程式將WebVTT中的文本軌道物件在線上視頻44上以彈幕形式顯示。
文本軌道物件在線上視頻44上以彈幕形式顯示的示例，可以參考第5圖所示。
請參考第6圖，其示出了本發明一個實施例提供的彈幕顯示裝置的結構方框圖。該彈幕顯示裝置可以通過軟體、硬體或者兩者的結合實現成為電子設備的全部或者一部分，該電子設備運行有支援符合HTML5協定的瀏覽器。該裝置包括：網頁載入模組620，用於載入符合超文字標記語言第五版HTML5協議的網頁，所述網頁包括有視頻標籤和文本軌道標籤。
視頻顯示模組640，用於根據視頻標籤載入和顯示線上視頻。
文件載入模組660，用於根據文本軌道標籤載入WebVTT。
彈幕顯示模組680，用於根據WebVTT在線上視頻上顯示彈幕資訊。
綜上所述，本實施例提供的彈幕顯示裝置，通過使用HTML5協定提供的文本軌道標籤，載入WebVTT，根據WebVTT在線上視頻上顯示彈幕資訊；解決了瀏覽器不支援Flash程式時，無法顯示彈幕資訊的問題；達到了採用絕大多數瀏覽器已經支援的HTML5協定，實現在線上視頻上顯示彈幕資訊，且該彈幕顯示的實現並不需要獨立的App，僅需要符合HTML5協定的網頁即可實現的效果。另外，該彈幕顯示的實現也不受線上視頻是否全屏顯示的影響。
請參考第7圖，其示出了本發明一個實施例提供的彈幕顯示裝置的結構方框圖。該彈幕顯示裝置可以通過軟體、硬體或者兩者的結合實現成為電子設備的全部或者一部分，該電子設備運行有支援符合HTML5協定的瀏覽器。該裝置包括：網頁載入模組720，用於載入符合超文字標記語言第五版HTML5協議的網頁，所述網頁包括有視頻標籤和文本軌道標籤。
視頻顯示模組740，用於根據視頻標籤載入和顯示線上視頻。
文件載入模組760，用於根據文本軌道標籤載入WebVTT。
彈幕顯示模組780，用於根據WebVTT在線上視頻上顯示彈 幕資訊。
可選地，所述彈幕顯示模組780，包括：物件創建單元782，用於根據所述WebVTT文件創建至少一個文本軌道物件，每個所述文本軌道物件對應一條彈幕資訊；彈幕顯示單元784，用於通過預設程式控制所述文本軌道物件在所述線上視頻上以彈幕形式進行顯示。
可選地，所述物件創建單元782，包括：讀取子單元782a和創建子單元782b，如第8圖所示。
讀取子單元，用於從所述WebVTT文件中讀取至少一條文本軌道資訊、與每條文本軌道資訊對應的屬性資訊，所述屬性資訊包括顯示樣式資訊、顯示時間資訊和顯示位置資訊中的至少一項；創建子單元，用於對於每一條所述文本軌道資訊，根據所述屬性資訊創建與所述文本軌道資訊對應的文本軌道物件；其中，所述顯示樣式資訊包括：字體大小、字體顏色、字體類型、字體邊框、邊框類型、透明度、陰影和背景圖片中的至少一種；所述顯示時間資訊至少包括出現時間和結束時間；所述顯示位置資訊至少包括：以行號或列號表示的顯示位置和以百分比表示的顯示位置中的至少一種，存在一個所述顯示位置與所述出現時間對應。
可選地，所述彈幕顯示單元784，用於通過所述預設程式控制所述文本軌道物件按照所述出現時間顯示在所述線上視頻上與所述出現時間對應的顯示位置，所述文本軌道物件的顯示樣式與所述顯示樣式資訊對應；通過所述預設程式每隔預定時間間隔改變所述文本軌道物件的顯示 位置；通過所述預設程式控制所述文本軌道物件按照所述結束時間在所述線上視頻上消失。
可選地，所述文件載入模組760，用於根據所述文本軌道標籤從伺服器載入靜態的WebVTT，所述靜態的WebVTT是所述伺服器預先根據與所述線上視頻對應的歷史評論資訊所生成的；或；所述文件載入模組760，用於根據所述文本軌道標籤從所述伺服器載入動態的WebVTT，所述動態的WebVTT是所述伺服器根據本次播放所述線上視頻時的評論資訊生成的。
可選地，所述裝置，還包括：錯誤消除模組770，用於創建一個空的文本軌道物件作為第一個文本軌道物件，所述第一個文本軌道物件用於消除初次閃屏錯誤。
綜上所述，本實施例提供的彈幕顯示裝置，通過使用HTML5協定提供的文本軌道標籤，載入WebVTT，根據WebVTT在線上視頻上顯示彈幕資訊；解決了瀏覽器不支援Flash程式時，無法顯示彈幕資訊的問題；達到了採用絕大多數瀏覽器已經支援的HTML5協定，實現在線上視頻上顯示彈幕資訊，且該彈幕顯示的實現並不需要獨立的App，僅需要符合HTML5協定的網頁即可實現的效果。另外，該彈幕顯示的實現也不受線上視頻是否全屏顯示的影響。
本實施例提供的彈幕顯示裝置，還通過將WebVTT中的各個文本軌道資訊創建為文本軌道物件，然後使用預定程式操作文本軌道物件改變顯示位置；實現了將普通的靜態文本以彈幕形式進行顯示的效果，該彈幕形式是指多個文本軌道物件分別在線上視頻上以滾動顯示的方式進 行顯示的顯示形式。
同時，由於HTML5的網頁可以全屏顯示，所以上述彈幕顯示裝置還可以實現線上視頻在全屏顯示時的彈幕顯示。
需要說明的是：上述實施例提供的彈幕顯示裝置在顯示彈幕資訊時，僅以上述各功能模組的劃分進行舉例說明，實際應用中，可以根據需要而將上述功能分配由不同的功能模組完成，即將設備的內部結構劃分成不同的功能模組，以完成以上描述的全部或者部分功能。另外，上述實施例提供的彈幕顯示裝置與彈幕顯示方法實施例屬於同一構思，其具體實現過程詳見方法實施例，這裡不再贅述。
上述本發明實施例序號僅僅為了描述，不代表實施例的優劣。
本領域普通技術人員可以理解實現上述實施例的全部或部分步驟可以通過硬體來完成，也可以通過程式來指令相關的硬體完成，所述的程式可以儲存於一種電腦可讀儲存介質中，上述提到的儲存介質可以是唯讀記憶體，磁片或光碟等。
以上所述僅為本發明的較佳實施例，並不用以限制本發明，凡在本發明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發明的保護範圍之內。
102‧‧‧加載符合HTML5協議的網頁，該網頁包括有視頻標籤和文本軌道標籤
104‧‧‧據視頻標籤加載和顯示線上視頻
106‧‧‧照使用場景分類顯示商品的商品訊息
108‧‧‧根據WebVTT在線上視頻上顯示彈幕訊息

Claims (10)

  1. 一種彈幕顯示方法，其包括：載入符合超文字標記語言第五版HTML5協議的網頁，所述網頁包括有視頻標籤和文本軌道標籤；根據所述視頻標籤載入和顯示線上視頻；根據所述文本軌道標籤載入網頁視頻文本軌道文件WebVTT；根據所述WebVTT文件創建至少一個文本軌道物件，每個所述文本軌道物件對應一條彈幕資訊；通過預設程式控制所述文本軌道物件在所述線上視頻上以彈幕形式進行顯示。
  2. 根據申請專利範圍第1項所述之方法，其中所述根據所述WebVTT文件創建至少一個文本軌道物件，包括：從所述WebVTT文件中讀取至少一條文本軌道資訊、與每條文本軌道資訊對應的屬性資訊，所述屬性資訊包括顯示樣式資訊、顯示時間資訊和顯示位置資訊中的至少一項；對於每一條所述文本軌道資訊，根據所述屬性資訊創建與所述文本軌道資訊對應的文本軌道物件；其中，所述顯示樣式資訊包括：字體大小、字體顏色、字體類型、字體邊框、邊框類型、透明度、陰影和背景圖片中的至少一種；所述顯示時間資訊至少包括出現時間和結束時間；所述顯示位置資訊至少包括：以行 號或列號表示的顯示位置和以百分比表示的顯示位置中的至少一種，存在一個所述顯示位置與所述出現時間對應。
  3. 根據申請專利範圍第2項所述之方法，其中所述通過預設程式控制所述文本軌道物件在所述線上視頻上以彈幕形式進行顯示，包括：通過所述預設程式控制所述文本軌道物件按照所述出現時間顯示在所述線上視頻上與所述出現時間對應的顯示位置，所述文本軌道物件的顯示樣式與所述顯示樣式資訊對應；通過所述預設程式每隔預定時間間隔改變所述文本軌道物件的顯示位置；通過所述預設程式控制所述文本軌道物件按照所述結束時間在所述線上視頻上消失。
  4. 根據申請專利範圍第1至3項任一項所述之方法，其中所述根據所述文本軌道標籤載入WebVTT，包括：根據所述文本軌道標籤從所述伺服器載入動態的WebVTT，所述動態的WebVTT是所述伺服器根據本次播放所述線上視頻時的評論資訊生成的。
  5. 根據申請專利範圍第1項所述之方法，其中所述根據所述WebVTT文件創建至少一個文本軌道物件之前，還包括：創建一個空的文本軌道物件作為第一個文本軌道物件，所述第一個文本軌道物件用於消除初次閃屏錯誤。
  6. 一種彈幕顯示裝置，其包括： 網頁載入模組，用於載入符合超文字標記語言第五版HTML5協議的網頁，所述網頁包括有視頻標籤和文本軌道標籤；視頻顯示模組，用於根據所述視頻標籤載入和顯示線上視頻；文件載入模組，用於根據所述文本軌道標籤載入網頁視頻文本軌道文件WebVTT；彈幕顯示模組，其包括：物件創建單元，用於根據所述WebVTT文件創建至少一個文本軌道物件，每個所述文本軌道物件對應一條彈幕資訊；以及彈幕顯示單元，用於通過預設程式控制所述文本軌道物件在所述線上視頻上以彈幕形式進行顯示。
  7. 根據申請專利範圍第6項所述之裝置，其中所述物件創建單元包括：讀取子單元，用於從所述WebVTT文件中讀取至少一條文本軌道資訊、與每條文本軌道資訊對應的屬性資訊，所述屬性資訊包括顯示樣式資訊、顯示時間資訊和顯示位置資訊中的至少一項；創建子單元，用於對於每一條所述文本軌道資訊，根據所述屬性資訊創建與所述文本軌道資訊對應的文本軌道物件；其中，所述顯示樣式資訊包括：字體大小、字體顏色、字體類型、字體邊框、邊框類型、透明度、陰影和背景圖片中的至少一種；所述顯示時間資訊至少包括出現時間和結束時間；所述顯示位置資訊至少包括：以行號或列號表示的顯示位置和以百分比表示的顯示位置中的至少一種，存在一個所述顯示位置與所述出現時間對應。
  8. 根據申請專利範圍第7項所述之裝置，其中所述彈幕顯示單元，用於通過所述預設程式控制所述文本軌道物件按照所述出現時間顯示在所述線上視頻上與所述出現時間對應的顯示位置，所述文本軌道物件的顯示樣式與所述顯示樣式資訊對應；通過所述預設程式每隔預定時間間隔改變所述文本軌道物件的顯示位置；通過所述預設程式控制所述文本軌道物件按照所述結束時間在所述線上視頻上消失。
  9. 根據申請專利範圍第6至8項任一項所述之裝置，其中所述文件載入模組，用於根據所述文本軌道標籤從所述伺服器載入動態的WebVTT，所述動態的WebVTT是所述伺服器根據本次播放所述線上視頻時的評論資訊生成的。
  10. 根據申請專利範圍第6項所述之裝置，其還包括：錯誤消除模組，用於創建一個空的文本軌道物件作為第一個文本軌道物件，所述第一個文本軌道物件用於消除初次閃屏錯誤。
TW105116530A 2015-07-13 2016-05-26 彈幕顯示方法及裝置 TWI592019B (zh)

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510410252.6A CN105100869B (zh) 2015-07-13 2015-07-13 弹幕显示方法及装置

Publications (2)

Publication Number Publication Date
TW201703513A TW201703513A (zh) 2017-01-16
TWI592019B true TWI592019B (zh) 2017-07-11

Family

ID=54580261

Family Applications (1)

Application Number Title Priority Date Filing Date
TW105116530A TWI592019B (zh) 2015-07-13 2016-05-26 彈幕顯示方法及裝置

Country Status (5)

Country Link
US (1) US10334309B2 (zh)
CN (1) CN105100869B (zh)
HK (1) HK1213118A1 (zh)
TW (1) TWI592019B (zh)
WO (1) WO2017008551A1 (zh)

Families Citing this family (30)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105100869B (zh) * 2015-07-13 2018-09-04 腾讯科技（深圳）有限公司 弹幕显示方法及装置
CN105872679A (zh) * 2015-12-31 2016-08-17 乐视网信息技术（北京）股份有限公司 弹幕显示方法和装置
CN105872709A (zh) * 2016-03-30 2016-08-17 乐视控股（北京）有限公司 弹幕信息的显示方法及装置
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法
CN107707965B (zh) * 2016-08-08 2021-02-12 阿里巴巴（中国）有限公司 一种弹幕的生成方法和装置
US10291678B2 (en) * 2016-10-01 2019-05-14 Facebook, Inc. Architecture for augmenting video data obtained by a client device with one or more effects during rendering
CN106454485B (zh) * 2016-10-25 2018-04-10 华中科技大学 一种速度可变弹幕的弹道分配方法
CN106559319A (zh) * 2016-11-18 2017-04-05 上海允言教育科技有限公司 数据交互处理方法及装置
CN106954095A (zh) * 2017-04-17 2017-07-14 腾讯科技（深圳）有限公司 一种多媒体文件的播放方法及装置
CN107396194B (zh) * 2017-07-04 2020-03-20 上海全土豆文化传播有限公司 一种弹幕展示方法及客户端
CN107277641A (zh) * 2017-07-04 2017-10-20 上海全土豆文化传播有限公司 一种弹幕信息的处理方法及客户端
US10887645B2 (en) * 2017-07-13 2021-01-05 Qualcomm Incorporated Processing media data using file tracks for web content
CN107911708B (zh) * 2017-11-09 2022-04-05 腾讯数码（天津）有限公司 弹幕显示方法、直播方法、及相关装置
US11321516B2 (en) 2018-01-19 2022-05-03 Qualcomm Incorporated Processing dynamic web content of an ISO BMFF web resource track
CN108696767B (zh) * 2018-05-15 2021-05-25 北京字节跳动网络技术有限公司 弹幕播放方法、装置、计算机可读存储介质和终端
CN109379604B (zh) * 2018-08-15 2021-04-09 深圳点猫科技有限公司 一种基于教育云平台的视频弹幕制作方法及电子设备
CN109600655A (zh) * 2018-11-30 2019-04-09 北京微播视界科技有限公司 应用客户端中弹幕显示的方法、应用客户端及电子设备
CN109640154B (zh) * 2018-12-14 2019-09-10 苏州好玩友网络科技有限公司 网页弹幕显示方法、装置、设备及存储介质
CN110198452B (zh) * 2019-04-02 2021-09-14 腾讯科技（深圳）有限公司 一种直播视频的预览方法、装置及系统
CN110662118A (zh) * 2019-09-29 2020-01-07 携程旅游网络技术（上海）有限公司 弹幕的加载方法、系统、电子设备及介质
CN111031376B (zh) * 2019-11-25 2020-09-25 上海哔哩哔哩科技有限公司 基于微信小程序的弹幕处理方法和系统
CN111225265B (zh) * 2020-01-22 2021-09-10 北京理工大学 弹幕播放方法及装置
CN111246275B (zh) * 2020-02-07 2021-04-23 北京字节跳动网络技术有限公司 评论信息的展示及交互方法、装置、电子设备、存储介质
CN111479157A (zh) * 2020-04-07 2020-07-31 北京字节跳动网络技术有限公司 弹幕展示方法、装置、电子设备及计算机存储介质
CN111698569A (zh) * 2020-04-26 2020-09-22 五八有限公司 一种弹幕数据处理方法、装置、终端设备及存储介质
CN111741110B (zh) * 2020-06-22 2022-07-22 北京奇艺世纪科技有限公司 一种消息推送系统及方法
CN114025225B (zh) * 2021-10-29 2023-08-29 北京字跳网络技术有限公司 弹幕的控制方法、装置、电子设备和存储介质
CN116567329A (zh) * 2022-01-30 2023-08-08 上海哔哩哔哩科技有限公司 弹幕处理方法及装置
CN114745595B (zh) * 2022-05-10 2024-02-27 上海哔哩哔哩科技有限公司 弹幕显示方法及装置
DE102022205250A1 (de) 2022-05-25 2023-11-30 Henkel Ag & Co. Kgaa Zweistufiges Färbeverfahren zur Verbesserung der Intensität von Färbungen mit Naturfarbstoffen

Family Cites Families (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2008048067A1 (en) * 2006-10-19 2008-04-24 Lg Electronics Inc. Encoding method and apparatus and decoding method and apparatus
US8260604B2 (en) * 2008-10-29 2012-09-04 Google Inc. System and method for translating timed text in web video
JP5423425B2 (ja) * 2010-01-25 2014-02-19 富士通モバイルコミュニケーションズ株式会社 画像処理装置
US8858313B1 (en) * 2010-01-25 2014-10-14 Topspin Networks, Inc. Methods, systems, and devices for synchronized parallel gameplay
JP2013536617A (ja) * 2010-07-13 2013-09-19 ロヴィ テクノロジーズ コーポレイション 物理媒体を介して配信するためにオーサリングされた双方向マルチメディアコンテンツの電子的セルスルーのためのシステムおよび方法
WO2012177874A2 (en) * 2011-06-21 2012-12-27 The Nielsen Company (Us), Llc Methods and apparatus to measure exposure to streaming media
US8713420B2 (en) * 2011-06-30 2014-04-29 Cable Television Laboratories, Inc. Synchronization of web applications and media
KR20130023533A (ko) * 2011-08-29 2013-03-08 삼성전자주식회사 스플래시 스크린 표시 장치 및 방법
JP5903924B2 (ja) * 2012-02-17 2016-04-13 ソニー株式会社 受信装置および字幕処理方法
US9131280B2 (en) * 2013-03-15 2015-09-08 Sony Corporation Customizing the display of information by parsing descriptive closed caption data
US8782722B1 (en) * 2013-04-05 2014-07-15 Wowza Media Systems, LLC Decoding of closed captions at a media server
US9467750B2 (en) * 2013-05-31 2016-10-11 Adobe Systems Incorporated Placing unobtrusive overlays in video content
WO2015072492A1 (ja) * 2013-11-13 2015-05-21 日立マクセル株式会社 放送受信装置
JP5713140B1 (ja) * 2014-12-05 2015-05-07 ソニー株式会社 受信装置、およびデータ処理方法
CN104636434A (zh) * 2014-12-31 2015-05-20 百度在线网络技术（北京）有限公司 一种搜索结果的处理方法及装置
CN105100869B (zh) * 2015-07-13 2018-09-04 腾讯科技（深圳）有限公司 弹幕显示方法及装置

Also Published As

Publication number Publication date
CN105100869B (zh) 2018-09-04
WO2017008551A1 (zh) 2017-01-19
HK1213118A1 (zh) 2016-06-24
TW201703513A (zh) 2017-01-16
US10334309B2 (en) 2019-06-25
US20180255346A1 (en) 2018-09-06
CN105100869A (zh) 2015-11-25

Similar Documents

Publication Publication Date Title
TWI592019B (zh) 彈幕顯示方法及裝置
US9760271B2 (en) Client-side dynamic control of visualization of frozen region in a data table
CN105339932B (zh) 浏览器驱动的功率节省
CN105208442B (zh) 一种视频播放应用程序的视频播放方法及装置
US8615712B2 (en) Executing a populated code template to generate a browser-executable software program to present a web page as a mobile application
WO2015184745A1 (zh) 显示悬浮式播放窗口的方法和系统
US20140136944A1 (en) Real time web development testing and reporting system
WO2017028611A1 (zh) 一种表单实现方法及装置
CN104820589B (zh) 一种动态适配网页的方法及其装置
AU2013225479B2 (en) Application display method and terminal
BR112013028827B1 (pt) Sistemas, métodos e interfaces para exibição de conteúdo em linha e conteúdo em nível de bloco
TW201624253A (zh) 在一圖形使用者介面上顯示關於一子層級新分頁之父層級分頁的網頁資訊的方法、電腦程式產品與電腦系統
US20140215306A1 (en) In-Context Editing of Output Presentations via Automatic Pattern Detection
US20120151309A1 (en) Template application error detection
JP2021512415A (ja) デジタルコンポーネントのバックドロップレンダリング
EP2544106A1 (en) Handling content related to digital visual objects
US20220179532A1 (en) Method and device for responding to user operation
US11120099B2 (en) Rendering a web element in a web page
CN111563157A (zh) 一种缩略图的显示方法和装置
CN103714061A (zh) 保存网页图片的方法及装置
KR102311326B1 (ko) 웹 컨텐츠 출력 장치 및 방법
EP2983096B1 (en) Method for the real-time automatic modification on the server side of a web page to the end of visualizing a content superposed to the web page
Franz Typographic Web Design: How to Think Like a Typographer in HTML and CSS
WO2018063837A1 (en) Video generation of project revision history
CN112328476A (zh) 本地页面调试方法、系统、电子装置及存储介质