一种基于H5的页面显示方法和终端技术

本发明专利技术实施例公开了一种基于H5的页面显示方法和终端，用于减少网页制作成本，提高网页制作效率，实现视频的流畅显示。本发明专利技术实施例提供一种基于H5的页面显示方法，包括：在终端的显示屏幕上加载第五代超文本标记语言H5网页，所述H5网页包括：H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮；在所述H5网页上插入待显示的视频内容，所述视频内容显示在所述H5页面可视窗口上；当所述视频内容需要播放时，在所述H5页面可视窗口上播放所述视频内容，并在所述H5页面可视窗口上隐藏所述视频播放器按钮。

Page display method and terminal based on H5

The embodiment of the invention discloses a page display method and terminal based on H5, which is used to reduce the production cost of the webpage, improve the efficiency of webpage making and realize the smooth display of the video. The embodiment of the invention provides a display method based on the H5 page, including: the terminal display screen loaded on the fifth generation of hypertext markup language H5 page, the H5 page includes: H5 page view window and floating on the H5 page visual window on the video player button; insert video content to be displayed in the the H5 page, the video content is displayed in the H5 page window; when the video content to playback, playback of the video content in the H5 page view window, and hides the video player button in the H5 window on the page.

【技术实现步骤摘要】
一种基于H5的页面显示方法和终端
本专利技术涉及计算机
，尤其涉及一种基于H5的页面显示方法和终端。
技术介绍
随着社会与互联网的发展，基于终端的页面也越来越多。页面的访问用户庞大且各种用户操作的终端种类繁多，面对使用不同终端的用户群体，目前的页面开发过程主要基于传统的移动网页实现展示类的用户需求，从而可以实现基于移动网页的传播营销。例如通过移动网页播放视频内容，用户通过操作终端，观看终端上安装的视频播放器展示的视频内容，获取视频制作者需要传播的信息。现有技术中，可以基于传统的移动网页制作动画，来实现交互类的复杂动作，但是这需要在页面上添加大量的元素再通过局部的多元素拼合来完成动画制作，这会存在网页制作成本较高、制作时间长、显示不流畅的问题。分析说明如下，离散的页面元素拼合会造成用户体验差的问题，例如局部的多元素在网页中表现的是多个区块元素，不同的区块都会消耗内存进行渲染以及逻辑代码控制。多元素在开发控制上也比较复杂，多元素开发完成后的调试过程也很复杂，元素过多会消耗较多的内存，特别是在终端的网页上内存以及性能的消耗非常重要，从而导致动画播放不流畅的问题。以现有技术中的FLASH制作为例进行说明，需要一名设计师设计基础图片文件，需要一名动画设计师使用动画设计软件进行图片帧的扩展，然后再需要一名开发工程师对其进行反馈函数的动态效果编写，存在网页制作成本较高、制作时间长的问题。而且动画类的元素拼接对于开发工程师来调整也较麻烦，元素分离拼接比较多，例如层叠样式表(CascadingStyleSheet，CSS)3动画或者帧动画，由于其元素的节点行过多，需要重复渲染，会造成动画的卡顿，从而导致动画播放不流畅的问题。
技术实现思路
本专利技术实施例提供了一种基于H5的页面显示方法和终端，用于减少网页制作成本，提高网页制作效率，实现视频的流畅显示。为解决上述技术问题，本专利技术实施例提供以下技术方案：第一方面，本专利技术实施例提供一种基于H5的页面显示方法，包括：在终端的显示屏幕上加载第五代超文本标记语言H5网页，所述H5网页包括：H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮；在所述H5网页上插入待显示的视频内容，所述视频内容显示在所述H5页面可视窗口上；当所述视频内容需要播放时，在所述H5页面可视窗口上播放所述视频内容，并在所述H5页面可视窗口上隐藏所述视频播放器按钮。第二方面，本专利技术实施例还提供一种终端，包括：网页加载模块，用于在终端的显示屏幕上加载第五代超文本标记语言H5网页，所述H5网页包括：H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮；视频插入模块，用于在所述H5网页上插入待显示的视频内容，所述视频内容显示在所述H5页面可视窗口上；显示控制模块，用于当所述视频内容需要播放时，在所述H5页面可视窗口上播放所述视频内容，并在所述H5页面可视窗口上隐藏所述视频播放器按钮。从以上技术方案可以看出，本专利技术实施例具有以下优点：在本专利技术实施例中，在终端的显示屏幕上加载第五代超文本标记语言H5网页，H5网页包括：H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮，在H5网页上插入待显示的视频内容，视频内容显示在H5页面可视窗口上，当视频内容需要播放时，在H5页面可视窗口上播放视频内容，并在H5页面可视窗口上隐藏视频播放器按钮。本专利技术实施例通过在H5网页内插入视频内容，并屏蔽视频播放器按钮，通过在H5页面可视窗口上播放视频内容，从而模拟视频显示行为为普通网页，整屏的模拟用户不会感觉自己是在看视频而是H5页面在活动，H5页面活动的过程中可以表现视频内容所传播的场景主题，解决了普通网页制作成本高、时间消耗大的问题，实现视频内容用于终端上传播场景主题。本专利技术实施例中不需要使用多个页面元素，不存在页面拼合的问题，只需要在H5网页上插入视频内容即可，视频内容的播放对内存等资源的占用较少，可以实现视频的流畅显示。附图说明为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域的技术人员来讲，还可以根据这些附图获得其他的附图。图1为本专利技术实施例提供的一种基于H5的页面显示方法的流程方框示意图；图2为本专利技术实施例提供的基于H5的流程交互示意图；图3为本专利技术实施例提供的一种在H5网页上插入视频内容的实现场景示意图；图4为本专利技术实施例提供的隐藏视频播放器按钮的实现场景示意图；图5-a为本专利技术实施例提供的一种终端的组成结构示意图；图5-b为本专利技术实施例提供的另一种终端的组成结构示意图；图6为本专利技术实施例提供的基于H5的页面显示方法应用于终端的组成结构示意图。具体实施方式本专利技术实施例提供了一种基于H5的页面显示方法和终端，用于减少网页制作成本，提高网页制作效率，实现视频的流畅显示。本专利技术的说明书和权利要求书及上述附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，以便包含一系列单元的过程、方法、系统、产品或设备不必限于那些单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它单元。本专利技术实施例提供的基于H5的页面显示方法可以应用于终端，通过播放视频内容可以实现在移动终端上的传播营销，具有低成本、高回报的品牌传播效率，举例说明，在微信客户端、手机QQ客户端以及其他应用程序上传播第五代超文本标记语言(HyperTextMarkupLanguage5，H5)网页，已经成为一种主流的营销传播方式。本专利技术实施例中可以通过视频内容插入H5网页的方式来完成H5网页的制作。请参阅图1所示，本专利技术一个实施例提供的基于H5的页面显示方法，可以包括如下步骤：101、在终端的显示屏幕上加载H5网页，H5网页包括：H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮。本专利技术实施例中，终端的操作系统中安装HTML5(后续简称为H5)网页程序，该终端具体可以手机终端或者平板电脑等移动设备，用户可以点击运行终端中的H5网页，在终端的显示屏幕上加载H5网页，H5网页包括：H5页面可视窗口和浮动在H5页面可视窗口上的视频播放器按钮，其中，H5页面可视窗口是用户能够在H5网页上看到的显示窗口，H5网页的内容在该H5页面可视窗口中加载并显示，H5网页支持视频元素的插入，在H5网页上还设置有视频播放器按钮，该视频播放器按钮用于控制视频的播放，，视频播放器上通常显示有视频播放控制组件，用户对视频播放器的操作通常包括：点击播放开始按钮、暂停按钮、快进按钮、后退按钮等，在本专利技术实施例中H5网页中包括的视频播放器按钮浮动于H5页面可视窗口上，因此视频播放器按钮与H5页面可视窗口之间的位置关系可以做灵活调整，详见后续实施例中在视频内容播放时对视频播放器按钮的隐藏操作。在本专利技术的一些实施例中，步骤101在终端的显示屏幕上加载第五代超文本标记语言H5网页，包括：A1、检测终端的显示屏幕上产生的触摸事件；A2、根据触摸事件在显示屏幕上加载H5网页。其中，用户可以触发终端显示屏幕，从而终端可以检测到用户发送的触摸事件，举例说明，用户触摸页面上的任意位置，在H5网页的制作过程中，终端的操作系统规定了用户没有主动触摸本文档来自技高网...

【技术保护点】
一种基于H5的页面显示方法，其特征在于，包括：在终端的显示屏幕上加载第五代超文本标记语言H5网页，所述H5网页包括：H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮；在所述H5网页上插入待显示的视频内容，所述视频内容显示在所述H5页面可视窗口上；当所述视频内容需要播放时，在所述H5页面可视窗口上播放所述视频内容，并在所述H5页面可视窗口上隐藏所述视频播放器按钮。

【技术特征摘要】
1.一种基于H5的页面显示方法，其特征在于，包括：在终端的显示屏幕上加载第五代超文本标记语言H5网页，所述H5网页包括：H5页面可视窗口和浮动在所述H5页面可视窗口上的视频播放器按钮；在所述H5网页上插入待显示的视频内容，所述视频内容显示在所述H5页面可视窗口上；当所述视频内容需要播放时，在所述H5页面可视窗口上播放所述视频内容，并在所述H5页面可视窗口上隐藏所述视频播放器按钮。2.根据权利要求1所述的方法，其特征在于，所述视频内容的高度大于所述视频内容的宽度，所述在所述H5网页上插入待显示的视频内容，包括：将所述待显示的视频内容插入到所述H5页面可视窗口；按照所述H5页面可视窗口的宽度对所述视频内容的宽度进行缩放，并按照缩放后的视频内容的宽度等比例缩放视频内容的高度。3.根据权利要求1所述的方法，其特征在于，所述在终端的显示屏幕上加载第五代超文本标记语言H5网页，包括：检测所述终端的显示屏幕上产生的触摸事件；根据所述触摸事件在所述显示屏幕上加载H5网页。4.根据权利要求1所述的方法，其特征在于，所述在所述H5页面可视窗口上隐藏所述视频播放器按钮，包括：在所述显示屏幕上将所述H5页面可视窗口放大，并按照放大后的H5页面可视窗口调整所述视频播放器按钮在所述H5网页的位置，使得调整后的视频播放器按钮的位置超出所述显示屏幕之外。5.根据权利要求1至4中任一项所述的方法，其特征在于，所述在所述H5页面可视窗口上播放所述视频内容之后，所述方法还包括：在所述视频内容播放过程中，暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口；当所述H5页面可视窗口从所述H5网页上隐藏之后，在所述H5网页上显示交互操作页面。6.根据权利要求5所述的方法，其特征在于，所述暂停所述视频内容的视频播放并隐藏所述H5页面可视窗口之后，所述方法还包括：继续播放所述视频内容对应的音频内...

【专利技术属性】
技术研发人员：梁宇轩，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东,44