阅读说明：本技术 一种智能电视基于Web化视频预览的主页呈现方法 (Home page presentation method of smart television based on Web video preview ) 是由 康瑜 唐军 于 2019-10-22 设计创作，主要内容包括：本发明公开了一种智能电视基于Web化视频预览的主页呈现方法,应用于智能电视系统,包括以下步骤：A.测量现有的海报瀑布流布局的页面对网络带宽的电视CPU消耗情况；B.通过对内容分层分行预加载的方法优化海报加载速度和降低带宽的消耗；C.通过Web的方式调用播放器组件实现视频预览以替代图片海报预览；D.用户在内容选择时,若焦点落在Web中播放器组件上时则加载该内容的相关信息,焦点离开时则不显示此信息。本发明的主页呈现方法将通过Web化视频预览的方法解决用户选择内容困难的问题,帮助用户降低对内容的选择难度,找到最值得观看的内容。(The invention discloses a homepage presenting method of an intelligent television based on Web video preview, which is applied to an intelligent television system and comprises the following steps: A. measuring the television CPU consumption condition of the network bandwidth of the page of the existing poster waterfall flow layout; B. optimizing poster loading speed and reducing bandwidth consumption by a method of preloading content in a layered and separated manner; C. calling a player component in a Web mode to realize video preview to replace picture poster preview; D. when the user selects the content, if the focus is on the player component in the Web, the related information of the content is loaded, and if the focus is away, the information is not displayed. The homepage presentation method solves the problem that the user is difficult to select the content by a Web video preview method, helps the user to reduce the difficulty in selecting the content, and finds the content which is most worthy of watching.)

一种智能电视基于Web化视频预览的主页呈现方法

技术领域

本发明涉及智能电视显示技术领域，特别涉及一种智能电视基于Web化视 频预览的主页呈现方法。

背景技术

随着智能电视提供的内容(包含电影、电视剧、综艺、动画片等)不断增 长，内容界面也由单一的图标界面发展为海报瀑布流的布局显示，目前智能电 视的运营内容通常是以图片海报为主，用户通过运营人员推荐的内容海报进行 选择性观看。但在大量的海报信息流中如何向用户提供有效的信息，使其决定 观看什么成为内容运营最具挑战性的工作。为什么海报已不能够帮助用户快速 决策观看到期望的影片？经分析发现，造成选择困难的原因是因为图片为静态 信息，不能为用户提供快速预览的功能，想让用户从众多海报中的快速的找到 一个自己喜欢的内容变得难上加难。

发明内容

本发明的目的是克服上述背景技术中不足，提供一种智能电视基于Web化 视频预览的主页呈现方法，将通过Web化视频预览的方法解决用户选择内容困 难的问题，帮助用户降低对内容的选择难度，找到最值得观看的内容。

为了达到上述的技术效果，本发明采取以下技术方案：

一种智能电视基于Web化视频预览的主页呈现方法，应用于智能电视系统， 包括以下步骤：

A.测量现有的海报瀑布流布局的页面对网络带宽的电视CPU消耗情况；

B.通过对内容分层分行预加载的方法优化海报加载速度和降低带宽的消 耗；

C.通过Web的方式调用播放器组件实现视频预览以替代图片海报预览；

D.用户在内容选择时，若焦点落在Web中播放器组件上时则加载该内容的 相关信息，焦点离开时则不显示此信息。

进一步地，所述步骤A具体包括：

A1.获取现有的主页加载设置需要的数据流及缓存空间大小；

A2.根据优化后所需的加载容量及现有的缓存空间大小评估在不影响优化 后的显示的前提下所能缩减的数据流及缓存空间的最大值。

进一步地，所述步骤B具体为：

B1.通过Web的方式调用播放器组件实现视频预览以替代图片海报预览

B2.加载主页时，先渲染服务器上主页海报位图像的前n行，并将此页面传 送到智能电视客户端进行显示；

B3.调用主页的其余标题下的内容和其余行，并依次加载所有图像，其中， 每次依次加载前n行图像。

进一步地，n等于3。

进一步地，所述步骤C具体为：

C1.将视频预览流分辨率与视频预览画布尺寸进行匹配以保障其他图片海 报的请求速度；

C2.在客户端上开发一个新的业务逻辑层，专门用于视频播放器实例的创 建和交互，使得视频播放器创建和状态管理仅与UI渲染周期相关联。

进一步地，所述步骤D具体为：

D1.显示海报后，将海报的标题在m秒的时间内逐渐淡出显示；

D2.视频开始播放时则开始淡出，并在没有任何交互动作时恢复到完全透 明状态；

D3.将播放的内容从展开的主题海报切换到Web化视频预览细节；

D4.在创建标题详细信息画布时从展开的标题画布获取当前视频位置，并 将前一时间戳作为新视频播放器实例的初始位置传递。

进一步地，m等于10。

本发明与现有技术相比，具有以下的有益效果：

本发明的智能电视基于Web化视频预览的主页呈现方法，是为用户提供视 频内容选择和观看很有意义的一个方法，此方法的先进性不仅表现在Web能够 更轻松地进行内容发现和视频预览的优势所在，还能通过减少有效负载和简化 组件，为具有低带宽和CPU限制设备带来视频应用服务的可能。

附图说明

图1是本发明的方法中进行主页加载的过程示意图。

图2是本发明的一个实施例中展开的标题海报呈现时传递先前创建的播放 器的示例图。

图3是本发明的一个实施例中海报的标题信息从淡出到显示的切换示意图。

图4是本发明的一个实施例中从展开的主题海报切换到Web化视频预览细 节的示意图。

具体实施方式

下面结合本发明的实施例对本发明作进一步的阐述和说明。

实施例：

实施例一：

一种智能电视基于Web化视频预览的主页呈现方法，用于解决现有技术中， 在智能电视运营与用户使用中，用户通过图片海报不能快速找到自己期望观看 的影片，并造成了用户侧的内容选择困难，运营侧的推荐效果不佳的问题。目 前，基于图片海报信息流的展示方式最大缺陷为静态内容不能将有效的信息传 达并显示出来，而视频的媒体属性决定了其呈现信息效果较图片更为丰富和生 动，本实施的方法即通过Web化视频预览的方法解决用户选择内容困难的问题， 帮助用户降低对内容的选择难度，找到最值得观看的内容。

具体的，本实施例中，该方法具体包括以下步骤：

步骤1：测量现有的海报瀑布流布局的页面对网络带宽的电视CPU消耗情 况。具体包括：

步骤1.1.获取现有的主页加载设置需要的数据流及缓存空间大小；

步骤1.2.根据优化后所需的加载容量及现有的缓存空间大小评估在不影响 优化后的显示的前提下所能缩减的数据流及缓存空间的最大值。

具体的，智能电视主页的现有版本将所有标题行作为其最高优先级。这包 括从服务器获取数据，创建所有DOM节点以及加载图像，目标是通过超过30 多行标题实现快速垂直滚动。要想满足用户更好的浏览体验，需要更快地加载 页面并最小化的内存开销，且能流畅播放。这些性能优化会与现有内容海报行 为进行权衡。为了达成这些权衡，本实施例中，首先测量现有的主页加载空间 大小即测量数据流量，以用于评估可缩减程度。

步骤2.通过对内容分层分行预加载的方法优化海报加载速度和降低带宽的 消耗。

具体包括：

步骤2.1.通过Web的方式调用播放器组件实现视频预览以替代图片海报预 览

步骤2.2.加载主页时，先渲染服务器上主页海报位图像的前3行，并将此页 面传送到智能电视客户端进行显示；

步骤2.3.调用主页的其余标题下的内容和其余行，并依次加载所有图像， 其中，每次依次加载前3行图像。

加载主页时，本方案中，如图1所示，首先渲染服务器上主页海报位图像 的前三行，将此页面传送到智能电视客户端后，会调用主页的其余标题下的内 容和其余行，并加载所有图像。从数据上分析页面加载的状态，现有的技术方 案会使用很多DOM节点，除了生成这些节点的CPU负载之外，加载的大量图 像造成带宽饱和，本方案通过简单的仅渲染DOM的前几行并在海报滚动时延迟 加载其余行来找到最佳性能。这使得未滚动海报的加载时间减少，对于滚动的 海报来说，渲染时间略有增加。但总体结果是视频预览和全屏播放的启动时间 更短，这一技术方案有效的保证了Web化视频预览的加载速度和呈现质量。

步骤3.通过Web的方式调用播放器组件实现视频预览以替代图片海报预 览。具体包括：

步骤3.1.将视频预览流分辨率与视频预览画布尺寸进行匹配以保障其他图 片海报的请求速度；

步骤3.2.在客户端上开发一个新的业务逻辑层，专门用于视频播放器实例 的创建和交互，使得视频播放器创建和状态管理仅与UI渲染周期相关联。

本方案中，为了获得最佳的视频预览播放体验，具体通过优化网络使用率， 优化视频播放器的创建来实现，其中，引入Web化视频预览的重点是它对网络 吞吐量的影响，为了不因视频预览而导致其他图片海报的请求被减慢，本方案 中通过将视频预览流分辨率与视频预览画布尺寸进行匹配来解决此问题，从而 降低了所请求的视频数据量。

同时，为了改善视频预览开始时间，本方案的创新点是在客户端上开发了 一个新的业务逻辑层，专门用于视频播放器实例的创建和交互。这使得视频播 放器创建和状态管理仅与UI渲染周期相关联。使用此逻辑，可以在UI动画期 间有效地创建视频播放器实例，同时聚焦标题扩展。当400ms动画正在进行时， 预览视频已经预先缓冲了。如图2所示，当展开的标题海报呈现时，它将传递 先前创建的播放器实例。

步骤4.用户在内容选择时，若焦点落在Web中播放器组件上时则加载该内 容的相关信息，焦点离开时则不显示此信息。

步骤4.1.显示海报后，将海报的标题在10秒的时间内逐渐淡出显示；

步骤4.2.视频开始播放时则开始淡出，并在没有任何交互动作时恢复到完 全透明状态；

步骤4.3.将播放的内容从展开的主题海报切换到Web化视频预览细节；

步骤4.4.在创建标题详细信息画布时从展开的标题画布获取当前视频位 置，并将前一时间戳作为新视频播放器实例的初始位置传递。

本方案的用户体验的主要目标是让用户专注于每部影片，了解它的内容， 并避免因交互而产生的任何干扰。现有的显示方式中，第一个干扰点是在展开 的标题海报上显示了的大量信息，这些信息对许多用户来说很有价值，但同时 也会分散用户预览视频的注意力。如图3所示，为了解决这种不同的变化，我 们将海报的标题，在10秒的时间内逐渐淡出的显示，逐渐让用户完全专注于视 频预览。一旦视频开始播放，这种淡出就会开始，并在没有任何交互动作时会 恢复到完全透明状态。这对于想要沉浸在视频中的用户来说非常有效，同时仍 然可以控制想要了解该内容的标题或摘要。

同时，如图4所示，减少干扰的另一个关键部分是将播放视频从展开的主 题海报切换到Web化视频预览细节，UI的结构为从属关系，可使得同一个内容 的信息在它们之间进行有效的传递。本方案即通过利用可用于查询视频播放状 态的每种画布类型的唯一标识符来解决此问题。在创建标题详细信息画布时从 展开的标题画布获取当前视频位置，并将前一时间戳作为新视频播放器实例的 初始位置传递。

具体的，上述方案在实际应用中可通过软件程序的方式嵌于智能电视系统 中实现，以下为本实施例中的一种代码示例：

//inside of TitleDetails.jsx

componentDidMount(){

const playerService＝this.context.videoPlayerService；

const currentTimeOfExpandedVideo＝

playerService.api.getCurrentTimeBySessionId(

this.props.expandedVideoSessionId

)；

playerService.createVideoPlayer({

startTime:currentTimeOfExpandedVideo,

videoId:this.props.videoId

})；}

综上可知，本发明是为用户提供视频内容选择和观看很有意义的一个方法， 此方法的先进性不仅表现在Web能够更轻松地进行内容发现和视频预览的优势 所在，还能通过减少有效负载和简化组件，为具有低带宽和CPU限制设备带来 视频应用服务的可能。

可以理解的是，以上实施方式仅仅是为了说明本发明的原理而采用的示例 性实施方式，然而本发明并不局限于此。对于本领域内的普通技术人员而言， 在不脱离本发明的精神和实质的情况下，可以做出各种变型和改进，这些变型 和改进也视为本发明的保护范围。