Implementation Analysis of HTML5 video in WebKit (1)-basic structure and htmlmediaelement & mediaplayer

The following is a summary of HTML5 video implementation principles in WebKit. For the UML file, you can download it from the GitHub link below.

First, let's preview the layers of the main video-related classes in WebKit:

The main classes are htmlmediaelement, mediaplayer, and rendervideo (lower left ).

HtmlmediaelementRepresents a DOM node. Its inheritance relationship can be traced back to the node, that is, the DOM node. The parsing of the video/audio component on the webpage begins with its creation. The video operation API of JavaScript is also based on it.

MediaplayerMedia File player. It is a bridge mode function. The specific implementation is completed by the class inherited from mediaplayerprivateinterface. That is to say, mediaplayerprivate is used to implement a playback control. This section also applies to extended players.

RendermediaAndRendervideoIt represents the nodes in the rendering tree generated by the browser and is responsible for processing the painting-related work (such as the position, size, and re-painting ). Their Inheritance relationships can be traced back to the renderobject, and there is another level of renderreplaced. Here there is a replaced element (replaceable component) concept. You can check the HTML information.

There are many layers of class diagrams that really need to be presented. So we can simply expand it as needed.

 

Based on the learning principles, we need to make breakthroughs one by one. Let's first examine the interaction between htmlmediaelement and mediaplayer.

First, we need to have a basic understanding of the video playback status from htmlmediaelement. Below is a brief playback status chart:

 

Htmlmediaelement also sets a readystate to indicate the data status:

It provides the setreadystate Method for mediaplayerprivate and other calls to change the corresponding state. For details about ready states, refer:

4.8.10.7 ready states

 

After creating an htmlmediaelement, The parseattribute method is called when parsing node attributes:

Garbled text is generated by removing the visual paradigm floating watermark. The Chinese character is "loading the corresponding audio or video ". Calling scheduleload will trigger WebKit to create a player. That is, mediaplayer creation. However, mediaplayer can be created many times, because a video or SRC tag can be added to a page in multiple ways, or the page can be restored after the page is unloaded. The following lists possible calls to mediaplayer: Create:

Corresponding, the following is the time to release the mediaplayer:

Mediaplayer calls mediaplayerprivate to release the created player.

There are also many conditions for playing, which can be the video with the AutoPlay attribute, or the play () executed by JavaScript (the load command is somewhat different. As shown in:

 

Here, UML is drawn using Visual paradigm, which can be downloaded at GitHub below:

Https://github.com/HorkyChen/WebKit-Video-Documentation

 

Next article: Implementation Analysis of HTML5 video in WebKit (2)-painting of mediaplayerfactory & rendervideo

Reprinted please indicate the source:Http://blog.csdn.net/horkychen