Web IDL interface相关问题

前言：阅读Cobalt源码的时候发现一个问题，H5 Video标签对应的c++代码是html_video_element.cc，继承自html_media_element.cc，但是video标签包含的属性明明是playbackRate，而html_media_element.cc的成员对象却是playback_rate,为什么属性名不一样呢？这样一个问题促使了这篇分析的诞生。

两个个概念
Web interfaces：Javascript暴露给web APP的接口，也就是ES定义的接口。
Web IDL (Interface Definition Language)： 用来定义Web interfaces的语言，其通过一种规范实现了JS engine(V8)和Web core(Blink)之间的低耦合绑定.

举例
接下来我们举一个例子解释Web IDL如何实现这种绑定

1、找到测试网站

https://ytlr-cert.appspot.com/demoplayer/2019/dash-player.html?manifest_url=assets/waymo_vp9_opus.mpd&playbackRate=1.0

。
2、debug网页：

shaka.player.Player.prototype.setPlaybackRate = function(rate) {
  // Cancel any rewind we might be in the middle of.
  this.cancelRewindTimer_();

  if (rate >= 0) {
    // Slow-mo or fast-forward are handled natively by the UA.
    this.video_.playbackRate = rate;
  // Only rewind when not paused.
  } else if (!this.video_.paused) {
    // Rewind is not supported by any UA to date (2015), so we fake it.
    // http://crbug.com/33099
    this.video_.playbackRate = 0;
    this.onRewindTimer_(this.video_.currentTime, Date.now(), rate);
  }
  this.playbackRate_ = rate;
};

找到改变播放速率时调用的接口

this.video_.playbackRate = rate;

也就是对video标签的playbackRate属性赋值

3、然后在html_media_element.cc的set_playback_rate()函数中打印调用栈

4、执行浏览器cobalt，访问网站后点击其他的播放速率，有以下调用栈打印

5、使用addr2line打印0x283c943

6、我们会发现一个源文件没有的文件v8c_html_media_element.cc

7、找到v8c_html_media_element.h头文件，会看到以下描述

也就是这个文件是以idl为源，以interface.h.template为模板生成的。

总结：

V8和WebCore之间的文件关系：

v8调用顺序：

参考：

https://www.chromium.org/developers/web-idl-interfaces
https://www.chromium.org/blink/webidl