如何轻松找到大众用户的H5视频播放器问题？

I. 计划简介

随着Internet技术的发展，用户正在使用QQ浏览器观看越来越多的视频. 最近，已使用统计信息通过QQ浏览器观看视频. 由于场景不同，不同的用户可能会播放不同网站的视频源，这些失败的播放数据将通过数据报告系统报告给运行背景. 背景将提取数据并进行某些分析. ，您可以获取网站，型号，时间，网络状态等播放失败的信息. 下图是背景中播放失败率最高的最新视频网站，如下图所示:

当然，播放失败可能是由多种原因引起的，例如: 浏览器与这种类型的网络视频不兼容，网络视频本身存在问题，用户的网络环境等. 因此，快速而准确需要一种解决方案，它可以从成千上万个用户的播放失败源中找出由播放器或代码引起的问题. 在这种情况下，介绍了一种视频播放器问题定位解决方案.

第二，实现整体框架

获取用户失败的视频源后，目前有两种主要方法可以验证播放器是否兼容:

解决方案1: 直接使用播放失败的源在浏览器版本中进行调试和分析. 此解决方案是最准确的，但需要花费很多时间，主要是因为播放失败不是播放器的原因，例如: 播放源的问题等.

解决方案2: 首先使用我们自己的产品进行验证，如果播放失败，然后在第三方产品上进行验证，如果第三方播放正常. 显然，这应该是您的产品存在的问题. 但是，此解决方案的准确性相对较差（不排除第三方产品也存在此问题），这相对节省时间且有效.

基于以上两种方案的讨论，视频播放器问题定位方案的实现基于方案二. 整个设计的总体框架如下:

对于整个框架的设计，这里有一个简单的解释. 测试人员启动测试脚本后，自动化脚本需要完成以下步骤:

1. 从服务器中拉出用户回放失败的来源.

2. 启动QQ浏览器监控，主要记录视频播放过程中的监控信息，包括日志，CPU，内存，屏幕截图等.

3. 在QQ浏览器中，验证是否可以播放当前源，然后关闭QQ浏览器监视. 如果可以播放，请跳过该步骤

4. 如果QQ浏览器无法播放，请分别在UC浏览器和Chrome浏览器中验证视频播放.

5. 如果QQ浏览器运行正常，则同步服务器更新并验证QQ浏览器的测试结果；如果QQ浏览器无法播放并且第三方APP正常播放，则服务器不仅必须更新验证结果，而且还必须上传QQ浏览器. 监视信息将在播放期间发送到服务器.

6. 测试人员可以预览真实机器验证的测试结果，并通过服务器获取监视信息.

三，HTML 5视频介绍

在前面的介绍中，涉及到QQ浏览器，UC浏览器和Chrome浏览器的视频播放验证. 为了更清楚地了解验证视频可播放性的原理，我们首先了解HTML5视频（H5视频）. 对于HTML的某些功能，我们首先来看一个简单的示例:

从上面的示例中可以看到，H5视频包括将video元素添加到video页面，并将一些属性添加到video标签. 简要介绍基本相关视频标签的属性以及H5的属性和方法:

一些属性:

属性

值

说明

自动播放

自动播放

如果显示此属性，则视频将在准备就绪后立即播放.

控件

控件

如果显示此属性，则向用户显示控件，例如播放按钮.

高度

像素

设置视频播放器的高度.

src

url

要播放的视频的网址.

宽度

像素

设置视频播放器的宽度.

一些属性和方法:

属性和方法

说明

currentTime

设置或返回视频中的当前播放位置（以秒为单位）

持续时间

返回当前视频的长度（以秒为单位）

load（）

重新加载音频/视频元素

play（）

开始播放音频/视频

pause（）

暂停当前正在播放的音频/视频

从此示例中，我们可以看到以下几点:

四，实施的基本原则

基于先前的基本设计框架和H5视频的相关知识，这里讨论自动测试脚本如何验证QQ浏览器，UC浏览器和Chrome浏览器的可播放性？详细信息如下:

1. QQ浏览器的可玩性验证

QQ浏览器是我们自己的产品. 可以通过浏览器代码以静态功能获取浏览器核心，并结合Android的robertium自动化框架，注入视频相关的JavaScript脚本（以下简称JS脚本），可以实现浏览器视频回放验证操作，具体过程如下:

2. UC浏览器可玩性验证

UC是我们的商业朋友，但是我们没有UC源代码，因此自动化视频播放更加困难. 但是，我们发现通过阅读UC Browsing Organ Network，UC提供了UC浏览器开发人员版本，以方便外部开发人员使用. 官方网站提供了UC浏览器开发人员版本. 有关详细信息，请参阅: 仔细阅读UC文档，PC Chrome浏览器连接手机的UC浏览器开发版本的调试发现，它们主要是通过Javascript Websocket协议通信实现的. 为了能够通过手机端的脚本来控制UC浏览器，此处在脚本中模拟PC端的websocket协议以完成与UC浏览器的通信，主要要点如下:

1）初始化websocket

如前所述，PC上的chrome浏览器和UC浏览器之间的交互是通过Websocket协议实现的. 在他们进行通信之前，需要完成与Websocket相关的初始化. 请按照以下步骤实施Java代码模拟webscoket初始化.

步骤1: 在PC的Chrome浏览器中打开UC动态调试页面，然后在Inspector.js的websocket初始化中添加一个断点，如图所示:

步骤2: 刷新Chrome页面并连接到UC浏览器调试页面后，将触发websocket创建断点，然后观察websocket初始化参数，如图所示:

第3步: 从第2步的图片可以看出，websocket的初始化是“ ws: // localhost: 9998 / devtools / page / 0”，其中0表示打开的页面数. 为了便于脚本中Websocket协议的初始化，您需要使用开源库xlightweb（websocket协议库的实现）来完成websocket的初始化. 具体代码如下:

2）发送网络套接字消息

在Chrome浏览器中调试UC浏览器页面时，Chrome浏览器的所有操作均通过websocket协议转移到UC浏览器，然后UC浏览器根据相应的消息参数处理相关操作. 通过调试JS代码，然后按照以下步骤实现Java脚本来模拟websoket发送消息，具体步骤如下:

步骤1: 首先通过在chrome浏览器页面中进行操作，了解发送到UC浏览器的消息. 同样，将下一个断点发送到Chrome浏览器的inspectorBackend.js中的手机消息终端，如图所示:

第2步: 为了观察消息的发送参数，首先将javscript脚本（例如: alert（1））发送到Chrome控制台中的手机UC浏览器. 断点将被触发，发送给UC的消息参数如下:

如图所示，发送的message参数是json数据，数据格式如下:

{“ method”: “ Runtime.evaluate”，“ params”: {“ expression”: “ alert（1）”，“ objectGroup”: “ console”，“ includeCommandLineAPI”: true，“ doNotPauseOnExceptions”: false， “ frameId”: “ 0.1”，“ returnByValue”: false}uc视频播放器，“ id”: 26}

expression的值是我们从chrome发送的JS脚本.

步骤3: 在脚本中使用开源xlightweb库模拟websocket发送的消息. 代码实现如下:

此处TextMessage是xlightweb库定义的一条消息，用于将消息发送到Websocket，然后通过writemessage方法发送该消息.

3）接受Websocket消息

在UC浏览器处理chrome浏览器消息之后，需要将处理结果返回给Chrome浏览器，并且还可以通过断点来调试特定消息的接受程度. 但是，这部分已经为xlightweb库实现，只要IwebsoketHandle接口的onMessage方法被重载，具体的代码实现如下:

代码的逻辑非常简单. 只能通过通过创建的websocket连接的readTextMessage来获取消息，而read消息也是json数据，需要对其进行解析以获得UC浏览器的处理结果.

4）摘要

过去，通过Chrome浏览器调试以及开源xlightweb库实现和UC浏览器websocket初始化，发送消息，接收消息的组合，然后在脚本中解释了特定的代码实现原理. 然后，您可以使用websocket和UC浏览器连接和发送消息，注入与视频播放相关的自定义脚本，并且可以通过脚本中与HTML5相关的自定义功能来控制UC内核以播放视频. 具体流程图如下:

3. Chrome浏览器的可玩性验证

Chrome是Google开发的网络浏览器. 该浏览器基于包括WebKit在内的其他开源软件，目标是提高稳定性，速度和安全性，并创建简单高效的用户界面，并在Chrome浏览器地址栏中输入JS脚本，浏览浏览器也可以执行此脚本. 下面是在浏览器的地址栏中输入一个JS脚本，以测试浏览器的执行效果，如图所示:

从上图可以发现，只要Chrome地址栏还可以完成JS脚本注入来控制浏览器核心，为了完成Chrome浏览器的可玩性验证，这里还需要Google的开源UIAutomator自动化帮助实施的框架，具体实施步骤如下:

步骤1: 使用Andorid开源UIAutomator获取Chrome地址栏控件，如图所示:

步骤2: 获取地址栏后，通过UIAutomator加载与视频播放相关的自定义JS脚本代码，以实现以下目的:

步骤3: 成功注入自定义JS代码后，还可以在地址栏中调用自定义JS脚本的相关视频功能，以实现视频播放并获取播放时间. chrome浏览器验证视频播放的具体过程如下:

五，测试结果和前景

距离脚本开发完成已经超过一个月了. 自动化脚本上线后，会有一些好处. 以下是在最近一段时间内运行该程序所获得的结果:

问题1: 播放时从硬解切换到软解的问题

根本原因: 当前的硬解决方案切换到软解决方案后，需要在重置时清除updatesurfaceListener.

解决方案: 切换时，不会清除updatesurfaceListener.

问题2: 文件句柄泄漏的问题

根本原因: 下载模块的常见问题. 启动下载模块后，downloadmanager会启动下载句柄. 下载任务完成后，无法释放该句柄，从而导致内存泄漏. 当句柄达到1024时，浏览器将崩溃.

解决方案: 下载任务完成后，downloadmanager释放文件句柄.

问题3: ku6网站上的少量m3u8视频源的发行尚未标准化.

根本原因: 获得的裸视频地址为.m3u8格式. 播放已解析的m3u8文件后，其中的文件不是ts类型，而是mp4类型.

解决方案: 数量相对较小，并且不符合m3u8规范，目前尚未解决.

但是，从日常自动化结果来看，可以检测到仍然有少量源无法在QQ浏览器中播放uc视频播放器，但是可以在第三方浏览器中成功播放. 这些是非常低的概率问题，可能是由许多因素引起的，因此需要这种工具来反复验证位置. 同时，该工具会记录视频播放失败源的详细监视信息，并结合监视信息. 讨论如何解决此类问题. 因此，在以后的计划中，我们需要与深度开发合作，在这三个大方向上进行深度优化，以提高工具的实用性:

a. ）在后台报告的失败视频源的分类更加详细，

b. ）测试浏览器版本的日志级别更高，

c）. 该脚本可以更详细，更准确地记录失败的情况

一些如此强大的工具以及更丰富，更有价值的信息，我相信将会有很好的好处.

此分享来自公众微信号-腾讯移动质量中心TMQ（gh_2052d3e8c27d），作者: 陈六十四

文本中详细说明了原始文本的来源和重印的信息. 如果有任何侵权，请联系yunjia_community@tencent.com将其删除.

原始出版时间: 2016-08-03

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-253467-1.html