基于QtWebkit的浏览器视频插件的设计与实现

基于QtWebkit的浏览器视频插件的设计与实现

李迪;丁娅

【摘 要】Videos in web pages can not be played by embedded browser

which is based on Webkit. Aiming at this problem, design a simple and

effective player plug-in model. Being different from the traditional NPAPI

plug-in,this plug-in is registered by inheriting Qt' s class and overloading

its methods,the plug-in uses ffplay to get data streams and decode

designs the user interface in response to user events and to control

ffplay,and realizes the communication of UI and ffplay by FIFO and state

machine. The design is finally a-chieved in the embedded platform. The

plug-in makes users watch videos in web pages smoothly, which has been

proved by the practice%为了解决基于Webkit引擎的嵌入式浏览器不能播放网

页中嵌套的视频文件的问题,设计了一种简单有效的视频播放插件模型.该设计区别

于传统的NPAPI标准插件,通过继承Qt自带的控件类并重载其中的方法来实现该

插件的注册,利用ffplay实现数据流的获取和解码显示,设计用户界面负责响应用户

事件并控制ffplay的播放,并通过FIFO管道和状态机来实现播放界面和ffplay的

通信.最后在嵌入式平台下实现了该设计.经工程实践表明,该方法行之有效,通过该插

件能够流畅观看网页中的视频文件.

【期刊名称】《计算机技术与发展》

【年(卷),期】2012(022)002

【总页数】4页(P238-240,244)

【关键词】插件;播放器;浏览器引擎;嵌入式;命名管道

【作 者】李迪;丁娅

【作者单位】华中科技大学电子与信息工程系,湖北武汉430074;华中科技大学计

算机科学与技术学院,湖北武汉430074

【正文语种】中 文

【中图分类】TP393.09

0 引言

近年来，嵌入式市场迅速崛起，嵌入式设备也被广泛应用于各个领域，如智能手机、

IP电视、导航设备等。用户通过嵌入式设备中的浏览器访问因特网成为了一种重

要应用，浏览器则需要提供相关插件来支持用户访问互联网上丰富的多媒体信息。

文中首先介绍浏览器的层次结构，然后比较了QtWebkit支持的两类插件:NPAPI

插件和Qt-based plug-in，经分析选择了后者，最后设计并实现了基于

QtWebkit的嵌入式浏览器视频插件，使用户能通过嵌入式设备中的浏览器流畅观

看网页中嵌入的视频文件。

1 浏览器插件技术

1.1 浏览器层次结构

图1是浏览器层次模型图。最底层是操作系统层，包括浏览器引擎正常运作所需

的各类软硬件资源;第二层是接口层，提供引擎在不同平台移植所需的接口;第三层

最重要，是浏览器引擎层，包含浏览器引擎(如 Webkit)、各类插件及其它第三方

库[1];最上层是应用层，完全独立于引擎，用户可根据需要轻松扩展或修改上层应

用[2]。

1.2 QtWebkit介绍

Qt是跨平台的图形用户界面工具包[3]。Qt/Em-bedded Linux则是专为嵌入式

Linux优化的Qt版本，其4.5版中集成了Webkit引擎的核心模块部分，简称

QtWebkit。Qt强大的功能和良好的平台无关性，使得QtWebkit出现了众多新

的扩展应用[4]。

图1 浏览器层次模型图

1.3 QtWebkit支持的两类插件

QtWebkit引入了对NPAPI的支持，NPAPI是多数浏览器都支持的跨平台插件标

准[5]，它提供两类插件接口[6]:第一类由浏览器端实现，插件调用，以 NPN_开头;

第二类由插件端实现，浏览器调用，以NPP_开头。通过撰写一个符合NPAPI标

准的插件，并将其编译成动态库的形式放置于浏览器插件默认的位置，即可实现

NPAPI插件的注册[7]。

另外，得益于开源浏览器引擎Webkit与Qt4.5的应用程序和UI框架的集成模糊

了本地应用程序与网络内容之间的界限，QtWebkit还支持Qt based plug-in，

利用它可将Qt自带的控件或用户实现的控件嵌入到Web页面中。

QWebPluginFactory是Webkit供应用程序调用的接口之一，应用程序通过继承

QWebPlugin-Factory类并重载该类中的方法来实现Qt-based plugin这类插件

的注册。

2 设计与实现

NPAPI插件的实现需要X11协议的支持，QtWebkit基于linux framebuffer实

现图形引擎，不支持X11协议[8]，因此基于 QtWebkit实现 NPAPI插件比较困

难。文中选择利用QWebPluginFactory来实现Qt-based plug-in。

2.1 模块结构

图2是浏览器视频播放插件的模块结构图。插件界面(Player Plug-in UI)负责和用

户打交道，响应用户事件并控制ffplay的播放。ffplay负责从指定的URL获取数

据流并进行解码显示(直接操作Framebuffer)，并根据插件界面传来的消息控制界

面显示的位置、大小以及视频的播放、暂停等。插件界面和ffplay之间通过创建

一个命名管道fifo进行通信，实现插件与ffplay的协同工作。

图2 浏览器视频播放插件模块结构图

2.2 视频播放插件实现流程

在设计中尽量保证模块化设计，使浏览器与ffplay的交互位于应用层，独立于

Webkit，避免了每次关于ffplay的代码调整都需要修改并编译Webkit库，使系

统更易于维护。视频播放插件的具体实现流程如下:

(1)浏览器引擎Webkit通过RenderPartObject类中的 updateWidget函数检测

网页中的＜object＞[9]或者＜embed＞标签并对 mimeType、classid、width、

height等属性值进行解析;

(2)RenderPartObject类以解析出的各属性值作参数生成插件实例并绘制插件窗

口。为保证通用性，在遇到NPAPI视频插件的mimeType时，均统一转换为

“MoviePlayer”，生成插件代码如下:

if(classId==tr("MoviePlayer"))

player=new MoviePlayer(view());

其中，MoviePlayer即是文中实现的播放器控件类，通过其构造函数生成一个插

件实例并进行一系列初始化，包括控件大小、位置、颜色，命名管道的创建，控制

按钮的创建和布局，信号和槽的连接等。这样就实现了将自定义的控件嵌入到网页

中，Webkit从网页中解析出各种插件类型，但最终通过转换只使用Qt的插件机

制;

(3)FrameLoader通过调用FrameLoaderClientQt类给QWebpage发送signal

信号，通知浏览器已经完成了插件的生成和绘制;

(4)浏览器的WebView收到该信号后，通过函数MoviePlayer::showMovie调用

ffplay播放视频，这里不用system调用打开ffplay，而是用Qt封装的

Qprocess类调用 ffplay，具体代码是 (“ffplay”，args)，参数

args中包含视频编码格式、宽度、高度、帧率、url以及命名管道的读写文件路径

等信息;

(5)ffplay播放结束后，MoviePlayer发信号通知浏览器，WebView调用浏览器

主窗口的reShow函数实现浏览器主窗口和插件窗口的重绘。

2.3 关键技术描述

在视频播放插件的设计和实现过程中，主要完成了自定义的视频播放插件类

MoviePlayer，并实现了插件与播放器的友好互动和协同工作。关于

MoviePlayer的初始化、调用以及其与浏览器和播放器之间的信号交互在2.2节

中已有相关描述，下面介绍其它所涉及的关键技术:

2.3.1 命名管道

利用命名管道进行通信，创建了两个命名管道文件FIFO_R和FIFO_W，分别用作

读和写。在插件端并没有创建专门的线程来读取管道消息，而是利用了Qt提供的

一个类:QsocketNotifier[10]，它实现了针对特定文件描述符的select等操作，并

通过signal进行通知，一旦FIFO_R内有可读消息，则会调用MoviePlayer的

readFfplayData函数进行读取。

2.3.2 状态机

为了实现插件与播放器协同工作，还实现了一个状态机[11]。插件接收用户的遥控

或者鼠标事件，然后发送相应的控制信息给播放器，如表1所示:

表1 插件端控制信息表CMD_PLAY 暂停后继续播放CMD_PAUSE 暂停

FULL_SCREEN 全屏播放QUAT_SCREEN 退出全屏EXIT 关闭播放器进程

VIDEO_DISABLE 越界时不允许输出画面SETPOS%d%d 设置播放器位置

对应地，播放器也会发送相应反馈信息给插件，使插件能正确获取播放器当前所处

的状态，如表2所示:

表2 播放器端控制信息表START_DISPLAY_OK 正常开始播放PLAY_OK 暂停后

正常重新播放QUAT_SCREEN_OK 正常非全屏播放PAUSE_OK 正常暂停

FULL_SCREEN_OK 正常全屏播放SETPOS_OK 正确设置播放器位置

VIDEO_DISABLE_OK 正常关闭播放器画面输出

另外对播放器控制时需注意，浏览器在滚动时，会不断触发resizeEvent事件，因

此不能直接在resizeEvent事件的处理函数中对播放器进行位置设置，而是应该在

resizeEvent处理函数被调用一段时间不再有resizeEvent事件后，才通知播放器

进行位置设置。

2.3.3 递归获取窗口位置

在视频播放插件生成和显示时，获取的是插件相对于其父窗口的位置，因此采用递

归方式获取插件的准确位置，即不断查找上级父窗口位置，直至顶层窗口(即屏幕)，

然后将各相对位置的x、y坐标相加即得到播放器相对于屏幕的位置[12]。

3 实验

3.1 实验场景

为了检验文中的设计方案，设计了一套测试方案。测试环境框图如图3所示。

图3 测试环境框图

其中，媒体服务器是在一台电脑上的Linux系统中搭建的LAMP服务器

(Linux+Apache+Mysql+PHP)。远程教育机顶盒即为文中所说的实际项目，文中

设计的视频播放插件也工作于其中。电视机连接远程教育机顶盒的输出，利用遥控

器进行相关操作。点击远程教育机顶盒中的在线学习和媒体娱乐两个模块，则会调

用浏览器，通过Internet访问媒体服务器中的相关页面，然后点击其中的视频连

接则可以开始测试播放情况。

3.2 实验数据

在搭建的实验环境下进行测试，点击在线学习和媒体娱乐模块中的4个视频链接，

实验数据如表3所示:3

表3 实验数据统计表视频链接号 1 2 3 4均值响应时间(s)0.5 1.0 1.0 0.5 1.0是否

有画面 是 是 是 是是否有声音 是 是 是 是视频延时(s)0 0.5 0 1 0.375 CPU占用

率6% 4.9% 4.8% 5% 5.23%

.3 结果分析

测试结果表明，视频插件对系统资源占用率低。能够流畅播放网页中的视频文件，

并且响应时间短，音视频延时低。解决了该嵌入式浏览器无法播放视频文件的问题。

4 结束语

文中针对实际项目中的需求，设计了一套方案为基于Webkit的浏览器增加视频插

件模块。该方案首先设计人性化的插件界面来提供人机交互接口，然后设计了一个

视频播放器控件类来对播放器进行控制，最后创建命名管道实现插件与播放器的协

同工作。解决了该实际项目中的嵌入式浏览器无法显示网络中视频文件的问题。

目前，该方案实现了视频的播放、暂停、停止、全屏、非全屏等操作，如要实现视

频的快进、选时播放等功能，则还需要做进一步的工作。

参考文献：

[1]谢立丹，陈 榕.基于Elastos的WebKit引擎的研究与移植[J].计算机技术与发展，

2011，21(1):11-14.

[2]徐正锦，陈 榕.基于CAR构件的嵌入式浏览器的体系架构设计[J].计算机技术与

发展，2008，18(7):12-15.

[3]Blanchette J，Summerfield M.C++GUI Programming with Qt4[M].2nd

:[s.n.]，2007.

[4] Reference Documentation Qt/Embedded Version

2.3.7[M].Norway:Trolltech，2001.

[5]蒋 勇，杜中军，鞠 飞.基于RTP协议的浏览器通用视频插件的实现[J].计算机应

用研究，2005(4):152-155.

[6]谭夏梅，李 冰，唐德强.用基于浏览器的插件技术实现多媒体与GIS的集成[J].

计算机应用软件，2003(8):37-39.

[7]芦东晰，周建彬，谭振华.基于Qt/Embedded的控件扩展研究与实现[J].计算

机技术与发展，2006，16(10):97-100.

[8]张方辉，王建群.Qt/Embedded在嵌入式Linux上的移植[J].计算机技术与发展，

2006，16(7):64-66.

[9]刘晓梅，王彦永，魏立峰.基于IE浏览器H.264视频播放插件的实现[J].计算机

系统应用，2009(3):161-163.

[10]Stevens W R，Fenner B，Rudoff A Network Programming the

Sockets Networking API[M].3rd g:[s.n.]，2006.

[11]汪诗林，吴泉源.一个通用的、用于浏览私有媒体的WWW浏览器插件的设计

与实现[J].计算机工程，2000(7):164-166.

[12]丰晋军，许铁山.基于MFC的插件应用程序设计与实现[J].计算机与信息技术，

2008(6):19-22.