CN104079652A - 一种html广告文件的制作和播放方法 - Google Patents

Abstract

本发明公开了一种HTML广告文件的制作和播放方法，该制作方法包括：获取广告模板的数据信息；对所述广告模板内的各区域添加素材，将所述需添加的素材拷贝到固定的目录中，获得各拷贝素材的相对路径；将各所述相对路径与各所述区域的唯一标识进行映射；根据各所述区域中的数据信息和当前设备的浏览器播放环境，将各区域中的数据信息生成相应的HTML标签，并将各所述HTML标签转换成相应的HTML格式的字符串；拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成HTML格式的广告文件。采用本发明技术方案能提高广告制作和播放的灵活性和便利性，实现广告节目制作端和播放端一体化。

Description

一种HTML广告文件的制作和播放方法

技术领域

本发明涉及应用软件技术领域，尤其涉及一种HTML广告文件的制作和播放方法。 

背景技术

随着科技和移动设备的高速发展，人们越来越追求便捷的工作方式。在广告领域中，采用移动设备对广告进行制作和播放，也越来越受到人们的重视。目前的广告制作方法中，采用的是广告制作和播放分离的方法。人们需要在一台设备上先制作好，然后再放置到其播放端去播放。由于制作节目的设备一般为电脑，其生产的文件是一种自定义的规则文件，只有对应的播放系统才能解析播放。 

可见，现有的广告制作和播放方法不具备灵活性和即时性，播放节目对软件和平台的依赖性强，不方便用户随时随地播放节目。另外，用于播放的广告文件格式不够通用，不能在任意的设备上播放。 

发明内容

本发明实施例提出一种HTML广告文件的制作和播放方法，采用本发明技术方案能提高广告制作和播放的灵活性和便利性，实现广告节目制作端和播放端一体化。 

为了解决以上技术问题，本发明实施例提供了一种HTML广告文件的制作方法，包括： 

获取广告模板的数据信息，所述广告模板的数据信息包括：所述模板所在的画布尺寸信息、所述模板内各区域的类型、所述各区域在所述画布上的位置 信息； 

对所述广告模板内的各区域添加素材，将所述需添加的素材拷贝到固定的目录中，获得各拷贝素材的相对路径； 

将各所述相对路径与各所述区域的唯一标识进行映射； 

根据各所述区域中的数据信息和当前设备的浏览器播放环境，将各区域中的数据信息生成相应的HTML标签，并将各所述HTML标签转换成相应的HTML格式的字符串； 

拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成HTML格式的广告文件。 

进一步的，所述获取广告模板的数据信息，具体为：获取预存广告模板的数据信息；或者获取用户自定义广告模板的数据信息。 

进一步的，在将所述需添加的素材拷贝到固定的目录中之前，还包括：根据消息摘要算法判断所述需拷贝素材是否已在所述固定目录中，如果是，则取消拷贝，直接执行下一步，否则，执行拷贝。 

相应地，本发明实施例提供了一种HTML广告文件的播放方法，包括： 

打开加载HTML格式的广告文件；判断当前设备的浏览器播放环境是否支持所述广告文件内所有的HTML标签，如果是，则返回支持消息； 

否则，返回不支持消息，并获取当前设备的浏览器播放环境，根据当前设备的浏览器播放环境和各所述HTML标签的数据信息，将所述不支持的HTML标签替换为当前浏览器支持的HTML标签； 

获取HTML标签内各区域的尺寸百分比和屏幕大小，并根据各区域尺寸百分比和屏幕大小计算各HTML标签的显示尺寸； 

根据各HTML标签的显示尺寸，设置各HTML标签的显示长宽； 

获取各HTML标签中的相对路径和播放时长，根据所述相对路径和播放时长，建立各HTML标签的播放列表； 

根据所述播放列表，依次对各HTML标签设置路径指向属性，依次播放各HTML标签内的素材，实现广告播放。 

进一步的，所述根据HTML标签内各区域尺寸百分比和屏幕大小计算各HTML标签的显示尺寸，具体为： 

对各HTML标签进行文档对象操作，获取各HTML标签上各区域的宽度百分比和高度百分比，将区域的宽度百分比与屏幕的长度相乘，将区域的高度百分比与屏幕的宽度相乘，计算获得各HTML标签在当前显示屏的显示尺寸。 

进一步的，所述获取当前设备的浏览器环境，具体为：获取当前设备的浏览器厂商信息和浏览器版本信息。 

进一步的，所述获取各HTML标签中的相对路径和播放时长，具体为：对各HTML标签执行文档对象操作，获取各HTML标签中的相对路径和播放时长。 

由上可见，实施本发明实施例，具有如下有益效果： 

本发明实施例提供的HTML广告文件的制作方法，在画布上制作或者选择相应的广告模版，对广告模版内的各区域添加素材，并将需添加的素材拷贝到固定的目录中，获得各拷贝素材的相对路径。再将各素材的相对路径与各区域的唯一标识进行映射，结合当前设备的浏览器播放环境，将各区域中的数据信息生成相应的HTML标签，各HTML标签转换成多个HTML格式的字符串。最后拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成对应的HTML格式的广告文件。 

相应地，本发明实施例提供的HTML广告文件的播放方法，在打开HTML格式的广告文件后，判断当前设备的浏览器播放环境是否支持广告文件内所有的HTML标签，如果是，返回支持消息，执行下一步。如果不是，在获取当前浏览器的播放环境，并根据当前的播放环境和HTML标签的信息，替换不支持的HTML标签。然后计算各HTML标签的尺寸，并设置对应的显示长宽，根据各HTML标签内的相对路径和播放时长，建立各HTML标签的播放列表。最后根据播放列表，依次对各HTML标签设置路径指向属性，依次播放各HTML标签内的素材，实现广告播放。 

可见，相比于现有技术采用广告制作和播放分离的方法，采用本发明技术方案能制作出通用的HTML格式的广告文件，并适用在各具有浏览器的设备上 播放，使得广告节目制作端和播放端一体化，增强了广告制作和播放的灵活性和便利性。 

附图说明

图1是本发明提供的一种HTML广告文件的制作方法的流程示意图； 

图2是本发明提供的一种HTML广告文件的播放方法的流程示意图。 

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。 

实施例1 

参见图1，是本发明提供的一种HTML广告文件的制作方法的流程示意图，该方法包括以下步骤： 

步骤101：获取广告模板的数据信息。 

在本实施例中，本发明的广告模版制作基于HTML5的Canvas画布而制作。广告模版的数据信息包括：模板所在的画布尺寸信息、模板内各区域的类型和数量、各区域在画布上的位置信息。 

在本实施例中，获取广告模版的数据信息具体为：获取预存广告模板的数据信息；或者获取用户自定义广告模板的数据信息。用户创建自定义广告模版的步骤具体如下：创建一个Canvas画布，用户在该画布上设置对应的区域，在用户选择区域的类型(包括视频、图片、画廊、文字等)时，程序在画布上绘制一块对应的区域。用户可以在画布上任意拖动和编辑选择的区域。在编辑完成后，程序会对模板进行保存，程序将各区域在画布上的位置和大小进行计算。计算各区域位置时，利用区域左上角顶点距离画布左边缘的距离与画布宽度的比值来生成该区域相对于画布的X坐标，利用区域左上角顶点距离画布上边缘 的距离与画布高度的比值来生成该区域相对于画布的Y坐标。计算区域大小时，利用区域当前宽度与画布宽度的比值来生成区域宽度的百分比，利用区域当前高度与画布高度的比值来生成区域高度的百分比。计算获得的区域位置和大小结合为各区域在画布上的位置信息，存储在广告模板的数据信息中。 

用户可以对预存的广告模版和上一次自定义的广告模板进行二次编辑，获得需要的广告模版。 

步骤102：对广告模版内的各区域添加素材，将需添加的素材拷贝到固定的目录中，获得各拷贝素材的相对路径。 

在本实施例中，用户对各区域添加素材，为广告文件添加不同的元素。对于需添加的素材，系统将其拷贝到固定的目录中，此目录的路径为相对路径，相对于将来要生成的HTML标签。用户可以对一个区域添加多个素材。以添加视频元素为例子，用户选定某个区域，弹出视频文件选择框，选择一个或多个的视频文件，系统采用调用函数将该视频文件拷贝到固定目录中，获得相应的相对路径。 

在本实施例中，在添加的素材进行拷贝前，根据信息摘要算法(MD5算法)判断该需拷贝素材是否已在固定目录中，如果是，则取消拷贝，直接执行下一步，否则执行拷贝。 

步骤103：将各相对路径与各区域的唯一标识进行映射。 

在本实施例中，拷贝后的素材均拥有一个相对路径，可创建相对路径列表对该相对路径进行管理。为了将各区域与添加的素材进行关联，本发明将相对路径列表中的各相对路径与各区域的唯一标识进行映射。一个相对路径可以映射多个区域的唯一标识，另外，一个区域可以关联多个素材。 

步骤104：根据各区域中的数据信息和当前设备的浏览器播放环境，将各区域中的数据信息生成相应的HTML标签，并将各HTML标签转换成相应的HTML格式的字符串。 

在本实施例中，各区域中的数据信息可以但不限于包括：与区域映射的各相对路径、拷贝目录中的素材、区域的类型、区域在画布上的位置信息和各元 素设定的播放时长。浏览器播放环境包括：浏览器的厂商信息和浏览器的版本信息。由于本发明采用的是HTML5Canvas的画布制作的广告模版，所以根据浏览器播放环境，判断当前浏览器是否支持HTML标签，如果支持，则将各区域中的数据信息生成相应的HTML标签，否则，将各区域中的数据信息生成通用的HTML标签。该通用的HTML标签支持多种类型的浏览器。在生成HTML标签后，在将各HTML标签转换成相应的HTML格式的字符串。 

步骤105：拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成HTML格式的广告文件。 

为了更好的说明本制作方法，以视频广告为例子，首先用户选择合适的广告模版，系统会获取该广告模版的数据信息。用户对广告模版内的各区域添加素材，添加时，系统将需添加的素材拷贝到固定的目录中，并将相对路径与选中的区域进行映射。然后根据各区域内的数据信息和当前浏览器的播放环境，自动生成相应的HTML标签，将各HTML标签转换成相应的字符串，拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成HTML格式的广告文件，完成广告制作。需要说明的是，本发明采用的广告模块的数据信息包括模板所在的画布尺寸信息、模板内各区域的类型、各区域在画布上的位置信息。该数据信息能确保Canvas数据与HTML代码块之间的动态映射，而且能保证本方法制作的广告文件，适用于各类型的浏览器。 

由上可见，本发明实施例提供的HTML广告文件的制作方法，在画布上制作或者选择相应的广告模版，对广告模版内的各区域添加素材，并将需添加的素材拷贝到固定的目录中，获得各拷贝素材的相对路径。再将各素材的相对路径与各区域的唯一标识进行映射，结合当前设备的浏览器播放环境，将各区域中的数据信息生成相应的HTML标签，各HTML标签转换成多个HTML格式的字符串。最后拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成对应的HTML格式的广告文件。本发明生成的HTML格式的广告文件适用于多个浏览器的播放，使得广告文件对平台和屏幕尺寸的依赖性降低，同时提高广告制作的灵活性和便利性。 

实施例2 

参见图2，图2为本实施例提供了一种HTML广告文件的播放方法，适用于播放HTML格式的广告文件，其主要包括以下步骤： 

步骤201：打开加载HTML格式的广告文件。 

在本实施例中，打开HTML格式的广告文件主要有两种方式，一种为直接双击HTML格式的广告文件，另一种是通过浏览器加载HTML广告文件打开。采用浏览器打开播放广告时，系统需加载广告文件中的数据信息，以便于脚本文件控制HTML中的视频或图片素材的大小、位置、切换和动画效果。 

在本实施例中，需加载的广告文件中的数据信息可以但不限于包括：当前设备屏幕的长和宽、各HTML标签的文档对象模型元素(即DOM元素)和各HTML标签的相对路径和播放时长。 

在本实施例中，广告文件在加载后会获得各HTML标签以及各HTML标签内的数据信息。 

步骤202：判断当前设备的浏览器播放环境是否支持广告文件内所有的HTML标签，如果是，则返回支持消息，并执行步骤204，否则，执行步骤203。 

在本实施例中，由于需播放的广告文件的制作与播放不一定在同一设备上，故在播放前，需要判断当前浏览器的播放环境是否支持广告文件中所有的HTML标签。如果是，则返回支持消息，并直接执行步骤204。 

步骤203：返回不支持消息，并获取当前设备的浏览器播放环境，根据当前设备的浏览器播放环境和各HTML标签的数据信息，将不支持的HTML标签替换为当前浏览器支持的HTML标签。 

在本实施例中，替换的HTML标签为通用标签，适用于各个版本的浏览器。 

在本实施例中，获取当前设备的浏览器播放环境，具体为获取浏览器的厂商信息和浏览器的版本信息，通过该信息可将不支持的HTML标签转换为支持的HTML标签。 

步骤204：获取HTML标签内各区域的尺寸百分比和屏幕大小，并根据各区域尺寸百分比和屏幕大小计算各HTML标签的尺寸。 

在本实施例中，各HTML标签中包含一个或多个区域，由于本发明采用画布对区域进行布局，故各区域在画布的位置信息存储在各HTML标签中。系统获取各区域的尺寸百分比，尺寸百分比具体为：区域内宽度与画布宽度之间的比值生成相应的宽度百分比，区域内高度与画布高度之间的比值生成相应的高度百分比。计算时，将宽度百分比与屏幕长度相乘，将高度百分比与屏幕宽度相乘，计算获得区域在显示屏上实际的尺寸，从而获得各HTML标签的显示尺寸。 

在本实施例中，在计算显示尺寸时，系统会对各HTML标签进行文档对象操作(DOM操作)，获取各HTML标签上各区域的宽度百分比值和高度百分比值。 

步骤205：根据各HTML标签的显示尺寸，设置各HTML标签的显示长宽。 

在本实施例中，根据HTML标签的显示尺寸，通过Javascript扫描DOM元素动态设置节目区域大小，从而设置各HTML标签的显示长宽。 

步骤206：获取各HTML标签中的相对路径和播放时长，根据该相对路径和播放时长，建立各HTML标签的播放列表。 

在本实施例中，通过对各HTML标签执行文档对象操作(DOM操作)，获取各HTML标签中的相对路径和播放时长。 

步骤207：根据播放列表，依次对各HTML标签设置路径指向属性，依次播放各HTML标签内的素材，实现广告播放。 

在本实施例中，通过文档对象操作(DOM操作)对各HTML标签设置路径指向属性(src属性)，浏览器根据路径指向属性和播放时长，依次播放各HTML标签，在一个HTML标签播放完成后，自动切换播放下一个。 

在本实施例中，可以通过各HTML标签的播放时长导入setTimeout定时器，以控制视频播放时间。 

为了更好的说明本广告播放方法，以播放视频广告为例说明本发明技术方案。首先，用户打开HTML格式的视频广告，浏览器加载获取相应的数据信息，并判断该当前浏览器的播放环境是否支持该视频广告内所有的HTML标签。如 果支持就执行下一步，如果不支持，则将不支持的HTML标签替换为当前浏览器支持的HTML标签。然后通过DOM操作，获取各标签内各区域的尺寸百分比和屏幕大小，计算获得各标签的显示长宽。在设置完各标签的显示长宽后，通过DOM操作获取各标签的播放时长和相对路径，并对各标签设置路径指向属性(src属性)，浏览器会根据设定的src属性，对各HTML标签的视频内容进行逻辑播放。 

由上可见，本发明实施例提供的HTML广告文件的播放方法，在打开HTML格式的广告文件后，判断当前设备的浏览器播放环境是否支持广告文件内所有的HTML标签，如果是，返回支持消息，执行下一步。如果不是，在获取当前浏览器的播放环境，并根据当前的播放环境和HTML标签的信息，替换不支持的HTML标签。然后计算各HTML标签的尺寸，并设置对应的显示长宽，根据各HTML标签内的相对路径和播放时长，建立各HTML标签的播放列表。最后根据播放列表，依次对各HTML标签设置路径指向属性，依次播放各HTML标签内的素材，实现广告播放。采用本实施例的广告播放方法，能播放不同设备制作的HTML广告文件，降低对屏幕尺寸和平台的依赖性，同时提高广告制作的灵活性和便利性。 

综上所述，本发明提供的HTML广告文件的制作和播放方法，相比于现有技术采用广告制作和播放分离的方法，采用本发明技术方案能制作出通用的HTML格式的广告文件，并适用在各具有浏览器的设备上播放，使得广告节目制作端和播放端一体化，增强了广告制作和播放的灵活性和便利性。 

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。 

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这 些改进和润饰也视为本发明的保护范围。 

Claims (7)

1.一种HTML广告文件的制作方法，其特征在于，包括：

获取广告模板的数据信息，所述广告模板的数据信息包括：所述模板所在的画布尺寸信息、所述模板内各区域的类型、所述各区域在所述画布上的位置信息；

对所述广告模板内的各区域添加素材，将所述需添加的素材拷贝到固定的目录中，获得各拷贝素材的相对路径；

将各所述相对路径与各所述区域的唯一标识进行映射；

根据各所述区域中的数据信息和当前设备的浏览器播放环境，将各区域中的数据信息生成相应的HTML标签，并将各所述HTML标签转换成相应的HTML格式的字符串；

拼接所有HTML格式的字符串，生成HTML页面的源代码，并生成HTML格式的广告文件。

2.根据权利要求1所述的制作方法，其特征在于，所述获取广告模板的数据信息，具体为：

获取预存广告模板的数据信息；

或者获取用户自定义广告模板的数据信息。

3.根据权利要求1所述的制作方法，其特征在于，在将所述需添加的素材拷贝到固定的目录中之前，还包括：

根据消息摘要算法判断所述需拷贝素材是否已在所述固定目录中，如果是，则取消拷贝，直接执行下一步，否则，执行拷贝。

4.一种HTML广告文件的播放方法，其特征在于，包括：

打开加载HTML格式的广告文件；判断当前设备的浏览器播放环境是否支持所述广告文件内所有的HTML标签，如果是，则返回支持消息；

否则，返回不支持消息，并获取当前设备的浏览器播放环境，根据当前设备的浏览器播放环境和各所述HTML标签的数据信息，将所述不支持的HTML标签替换为当前浏览器支持的HTML标签；

获取HTML标签内各区域的尺寸百分比和屏幕大小，并根据各区域尺寸百分比和屏幕大小计算各HTML标签的显示尺寸；

根据各HTML标签的显示尺寸，设置各HTML标签的显示长宽；

获取各HTML标签中的相对路径和播放时长，根据所述相对路径和播放时长，建立各HTML标签的播放列表；

根据所述播放列表，依次对各HTML标签设置路径指向属性，依次播放各HTML标签内的素材，实现广告播放。

5.根据权利要求4所述的播放方法，其特征在于，所述根据HTML标签内各区域尺寸百分比和屏幕大小计算各HTML标签的显示尺寸，具体为：

对各HTML标签进行文档对象操作，获取各HTML标签上各区域的宽度百分比和高度百分比，将区域的宽度百分比与屏幕的长度相乘，将区域的高度百分比与屏幕的宽度相乘，计算获得各HTML标签在当前显示屏的显示尺寸。

6.根据权利要求4所述的播放方法，其特征在于，所述获取当前设备的浏览器环境，具体为：

获取当前设备的浏览器厂商信息和浏览器版本信息。

7.根据权利要求4所述的播放方法，其特征在于，所述获取各HTML标签中的相对路径和播放时长，具体为：

对各HTML标签执行文档对象操作，获取各HTML标签中的相对路径和播放时长。