以下为针对Webkit中HTML5 Video实现原理的分析和学习总结。至于其中的UML图档,可以到下面的github链接中下载。
首先预览一下Webkit中和Video相关的主要的类的层次结构:
其中主要的类为HTMLMediaElement, MediaPlayer以及RenderVideo(左下角).
HTMLMediaElement代表了DOM结点,其继承关系可以追溯到Node,也就是DOM的结点。网页中Video/Audio元件的解析就是由它的创建开始。JavaScript的视频操作API也是以它为对象的。
MediaPlayer代表了媒体文件的播放器功能。它起得是一个桥接(bridge mode)的功能,具体的实现交由继承自MediaPlayerPrivateInterface的类来完成。也就是说,真正实现一个播放控制是由MediaPlayerPrivate来完成的。扩展播放器也要从这部分入手。
RenderMedia和RenderVideo代表的是浏览器生成的渲染树中的结点,负责处理绘制相关的工作(如位置、大小及重绘等)。它们的继承关系可以追溯到RenderObject,其中还有一个层次是RenderReplaced,这里有一个Replaced Element(可替换组件)的概念,查一下HTML的资料就可以了。
真正要展现它们的类图,其层次是非常多的。所以只是按需展开就可以了。
根据学习的原则,我们需要逐个突破。我们先来考察一下HTMLMediaElement和MediaPlayer的互动关系。
首先,我们要从HTMLMediaElement对视频播放涉及的状态有个基本了解,下面是个简要的播放状态图:
HTMLMediaElement还定了一个ReadyState来表示数据状态:
它提供setReadyState方法供MediaPlayerPrivate等调用来改变相应的状态。
当创建一个HTMLMediaElement元件后,在解析节点属性时会调用parseAttribute方法:
上图乱码是因去除Visual Paradigm的浮水印产生乱码,中文是"加载相应的音频或视频"。这里调用scheduleLoad就会触发Webkit创建一个播放器了。也就是MediaPlayer的创建。但MediaPlayer的创建的时机很多,因为页面有多种方式可以新添加一个video标签或者src标签,又或者页面的取消加载后的恢复等多种情况。下面就列出可能调用MediaPlayer::Create的情况:
对应的,下面释放MediaPlayer的时机:
MediaPlayer会调用MediaPlayerPrivate析构释放已创建的播放器。
而播放触发的条件也比较多,可以是指autoplay属性的视频,也可以是JavaScript执行了play()(load指令有些不同)等。如下图所示:
其中UML使用Visual Paradigm绘制,可以到下面的GitHub下载:
https://github.com/HorkyChen/WebKit-Video-Documentation
下一篇:Webkit中HTML5 Video的实现分析 (二) - MediaPlayerFactory & RenderVideo的绘制操作
转载请注明出处:http://blog.csdn.net/horkychen
分享到:
相关推荐
HTMLMediaElement 播放 shim 为任何视频播放器创建类似 TimeRange 的对象的简单垫片用法通过传递将不断更新时间的回调函数来创建一个新实例。例子有关示例,请参见 play-shim.html作者马坦巴雷克特执照版权所有 (c) ...
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement Media.error; //null:正常 Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 <strong>//网络状态</strong> - Media.currentSrc; //...
节点( HTMLMediaElement )。 寻找媒体元素将请求与传入的类似文件的对象不同的字节范围。 目前仅支持mp4文件。 目标是支持大多数符合ISO / IEC 14496-12的文件。 版本2已完全重写,并且比依赖mp4box.js的先前版本...
注意:我们建议安装版本>=1.1.2及更高版本。 这是因为之前的任何版本都会导致代码中的错误。 reactjs媒体是带有很棒HTMLMediaElement的react包,这些HTMLMediaElement被重新创建为具有良好UI和快速UX的react组件。 ...
mpegts.js用TypeScript和JavaScript编写HTML5 MPEG2-TS流播放器。 mpegts.js针对低延迟的实时流播放进行了优化,例如DVB / ISDB电视或监视摄像机。 该项目基于概述mpegts.js的工作原理是将MPEG2-TS流转换为ISO BMFF...
在Chrome 86中试用 请参阅。 要在您的计算机上尝试, 启用chrome://flags/#enable-experimental-web-platform-features ,或 通过命令行传递--enable-blink-features=... 增加了下载浏览器中已存在的编解码器
这个项目是一个原型SailCast基于Web的podcatcher SailCast被设计为轻量级的跨平台podcatcher,它将利用HTML5技术,例如HTMLMediaElement API和IndexedDB。 随着项目的发展,更多细节... 演示项目目标演示原生HTML5...
该库与本机支持HTML5 canvas标签, requestAnimationFrame API, HTMLMediaElement API, navigator.mediaDevices和Promises API的浏览器兼容。 CSS过滤需要CSS filter功能才能正常工作。 Chrome 52 +,Firefox 52...
媒体源缓冲区 一个简单的示例演示 Web Audio API AudioContext.createMediaElementSource() 方法的用法。 有关更多信息,请参阅 。
用法要从网页获得对远程控制事件的低级访问,您可以执行以下操作: 创建一个新的RemoteControls对象,它具有远程控制焦点所需的持续时间和一个在对象完全初始化时运行的回调: javascript var controls = new ...
游戏使用在浏览器中运行。 与Pygame Zero的差异 演员班 x和y总是指左上角,并且不是pos的别名。 posx和posy是您要查找的pos的别名。 图像,声音和音乐映射到基础 。 我没有为它们编写包装器,因为对于简单的操作...