TL; DR

This is a used to create display on the B standing video progress bar above heat barrage of Chrome plug-ins, in a number of barrage – the histogram display of time, in the high energy (defined as short time there were a lot of barrage time point) has obvious peak value, can be used directly on the hot spot in the video, can also be used as an airborne (jumping fast forward) instructions.

The Chrome plugin is already available in the Chrome market. You can find it here or by searching Danmaku.

Source code on GitHub, welcome Star.

background

The idea for such a plugin has been in the back of my mind for a while (the idea came from a Hub), but I’ve only recently had the time to write it as a prototype for TypeScript and Chrome Extension.

implementation

Plug-in implementation is mainly divided into the following parts:

  • Code injection
  • Obtain av number and P
  • Access to barrage
  • visualization
  • Monitoring web page reloads

Scaffolding based on Chrome-extension-typescript-starter.

Compare core libraries

  • TypeScript
    • The efficiency of using the type system for static checking/code hints is still significant, and it also reduces the incidence of stupid bugs
  • echarts
    • Baidu home chart library, used to generate histograms
  • rxjs
    • Implementation of the observer + iterator pattern
  • jquery
    • Easy DOM manipulation

Code injection

Depending on Chrome Extension’s manifest.json file, you can specify which code file to execute in Bilibili’s page.

Get av number and P

Av number with general points P information can be obtained directly from the url (such as https://www.bilibili.com/video/avXXXXX/?p=XXXX), but in fact B stand points a lot of kinds of video format, the light I see there are the following:

  • Ordinary video/video/avXXXXX/? p=XXXX
  • Look at it later/watchlater/#/avXXXXXX/pXXXX
  • Enter from the historical perspective/video/avXXXXXX/index_XXXXX.html
  • His play
    • A specific episode/bangumi/play/epYYYYY/
    • From the pantomime zone directly into the point/bangumi/play/ssZZZZZ

Therefore, different processing is required, especially for drama, where the AV number information is not in the URL and needs to be retrieved from the DOM.

Access to barrage

Station B has an AV number for each video, but since each video may have multiple P’s, station B also has an implicit CID to index a specific video (and a barrage). Analysis found this API:

https://api.bilibili.com/x/player/pagelist?aid=AV_ID&jsonp=jsonp

In fact, CID can be obtained in a variety of ways, including the webpage DOM, the original webpage HTML, etc., but due to the B station video classification (ordinary video, drama, watch later, watch history) and the webpage DOM is different, so it is more elegant to use this API

You can get the CID of each sub P of the video and the length of the video by using the AV number, and then through the API

https://comment.bilibili.com/CID.xml

The ability to get barrage data in XML format is done

The analysis of the barrage data is referenced in this blog post

Generate histograms

This is easy, just call the ECharts API to process the barrage data.

Monitoring web page reloads

When the user clicks to switch to P or other operations, the front end of station B uses HTML5’s History API (also known as Hashchange), so it cannot be monitored solely with window.onHashchange events. For H5 History monitoring, there is only onPopState, but no onpushState.

So you have to compromise: Monitor all station B TAB history updates (via onHistoryStateUpdated events provided by Chrome) using the plugin’s background script and webNavigation permissions. In addition, the connection between content_script and background_script is established for single point notification, triggering the URL update event in the page.