HTML5 Bullet Screen Overlay via WebVTT Text Tracks

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Current bullet screen display systems face issues due to the insecurity of Flash programs, requiring multiple adaptations for different browsers and failing to display bullet screen information when videos are played in full screen.

Innovation Solution

Implementing a bullet screen display method using the HTML5 Protocol, which loads a web page with a video tag and a text track tag, and utilizes WebVTT files to display bullet screen information on online videos, supported by most browsers without the need for independent applications.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If Flash program is used to display bullet screen information, then bullet screen function can be provided in browsers, but browser compatibility deteriorates due to security issues and lack of support

Engineering Contradiction:

Improvebullet screen function availabilityVSAvoidbrowser compatibility

Core Design Contradiction:

Adaptability or versatilityVSReliability

Solution Approach 1:

The patent extracts the bullet screen display function from the Flash program dependency and implements it directly through HTML5 native features (video tag and text track tag). This removes the problematic Flash layer while preserving the core functionality, allowing bullet screens to work directly within the browser's HTML5 video playback capability.

Inventive Principle:

Principle #2Taking out (Extraction)

Solution Approach 2:

The patent replaces the Flash-based mechanical system with an HTML5-based system. By using the text track tag (which supports WebVTT format) to overlay bullet screen information on the HTML5 video element, it substitutes the Flash plugin architecture with native web standards, achieving better compatibility and security.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

2Adaptability or versatility

If independent application is used to display bullet screen information, then bullet screen function can be achieved on systems without Flash support, but device complexity and development cost increase

Engineering Contradiction:

Improvecross-platform compatibilityVSAvoiddevelopment complexity

Core Design Contradiction:

Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent makes the HTML5 video player itself multi-functional by utilizing the text track tag's capability to display not only subtitles but also bullet screen information. This universal approach allows a single web page implementation to work across all browsers that support HTML5, eliminating the need for separate independent applications for different platforms.

Inventive Principle:

Principle #6Universality (Multi-functionality)

3Ease of operation

If bullet screen information is attached to web page node, then bullet screen can be displayed on web page, but display fails when video is played in full screen

Engineering Contradiction:

Improvebullet screen displayVSAvoidfull-screen compatibility

Core Design Contradiction:

Ease of operationVSAdaptability or versatility

Solution Approach 1:

The patent merges the bullet screen information display with the video element itself by using the text track tag directly on the video tag. This integration ensures that bullet screens are positioned relative to the video content rather than the web page layout, allowing them to maintain proper display when the video transitions to full-screen mode.

Inventive Principle:

Principle #5Merging (Combining)

Data Source

PatentUS10334309B2Bullet screen display method and apparatus

Publication Date: 2019.06.25 TENCENT TECHNOLOGY (SHENZHEN) CO LTD

AI summary

A bullet screen display method and apparatus are provided. The method includes loading a web page that satisfies the Hypertext Markup Language 5 (HTML5) Protocol, the web page including a video tag and a text track tag, and loading and displaying an online video, based on the video tag. The method further includes loading a web video text tracks (WebVTT) file, based on the text track tag, and displaying bullet screen information on the online video, based on the WebVTT file.