Every element of HTML allows JavaScript to process certain events. For example, attribute settings such as onclick = "clickbutton.
As described in the following blog, each element in WebKit has its own JS binding implementation: [WebKit] Is Javascript
Three methods of adding a new DOM object with binding and implementing video elements, you can check the implementation in jshtmlmediaelement. cpp and jshtmlvideoelement. cpp.
Here we will only talk about the event processing mechanism. This is how to call the corresponding processing functions of javascript when an event occurs in WebKit.
In addition to common HTML Dom node events, video elements also have some specific events, such as played, paused, and ended. These can be seen in jshtmlmediaelement. cpp: static const hashtablevalue jshtmlmediaelementtablevalues []
= {"Error", dontdelete | readonly,
(Intptr_t) static_cast <propertyslot: getvaluefunc> (jshtmlmediaelementerror ),
(Intptr_t) 0, nointrinsic}, {"played", dontdelete | readonly,
(Intptr_t) static_cast <propertyslot: getvaluefunc> (jshtmlmediaelementplayed ),
(Intptr_t) 0, nointrinsic}, {"seekable", dontdelete | readonly,
(Intptr_t) static_cast <propertyslot: getvaluefunc> (jshtmlmediaelementseekable ),
(Intptr_t) 0, nointrinsic}, {"ended", dontdelete | readonly,
(Intptr_t) static_cast <propertyslot: getvaluefunc> (jshtmlmediaelementended ),
(Intptr_t) 0, nointrinsic },...
Do you still remember how WebKit parses video attributes? See here: Implementation Analysis of HTML5 video in WebKit (1)-the basic structure and htmlmediaelement & mediaplayer are also in the htmlmediaelement: parseattribute function, the following code snippet is available :...... else if (attrname = onabortattr) setattributeeventlistener (eventnames (). abortevent, createattributeeventlistener (this, ATTR); else if (attrname = onbeforeloadattr) setattributeeventlistener (eventnames (). beforeloadevent, createattributeeventlistener (this, ATTR); setattr Ibuteeventlistener () is to add the newly specified event handler function to the eventtarget object's hash table (eventlistenermap) through eventtarget: addeventlistener ). Its second parameter is an eventlistener, which is responsible for final execution of this event processing function. To trigger an event, use the following method: If (m_networkstate = network_loading | m_networkstate = network_idle) scheduleevent (eventnames (). abortevent); the above Code indicates that if the condition is true, an abort event will be triggered to JavaScript. Scheduleevent is mainly used to create an eventtarget object and add it to the queue of the so-called genericeventqueue for asynchronous execution. At execution time (genericeventqueue: timerfired (), it is then executed by eventtarget. Check the registered event handler function and execute the JavaScript function. The following is a complete sequence diagram for your reference (
Note that when the inheritance relationship of htmlmediaelement is returned to node, you will see that htmlmediaelement is also inherited from eventtarget.): For reprint, please indicate the source: http://blog.csdn.net/horkychen#: Implementation Analysis of HTML5 video in WebKit (4)
-Video loading and playback Sequence
Next article: Implementation Analysis of HTML5 video in WebKit (6)-Safari video Mechanism Analysis
