本发明涉及移动互联网领域，特别涉及一种基于移动web平台上自动播放视频图像的方法。
背景技术：
近年来，随着移动互联网和HTML5的快速发展，越来越多的web页面开始嵌入视频以增加用户互动和阅读内容。
在当前移动终端的浏览器中播放视频，存在着以下两个问题：
(1)浏览器会自动强制全屏幕播放视频，且无法通过技术手段在非全屏模式下播放。
(2)浏览器会强制要求用户确认后才能播放视频，且无法通过技术手段实现自动播放。
由于这两项限制，导致视频无法直接在页面上自动播放，同时页面内容也无法与视频进行互动，例如弹幕、弹窗等。一些基于视频播放的互动广告展示效果将大打折扣。
技术实现要素：
本发明的目的在于克服现有技术的缺点与不足，提供一种基于移动web平台上自动播放视频图像的方法。
本发明的目的通过以下的技术方案实现：
一种基于移动web平台上自动播放视频图像的方法，包含以下步骤：
S1、获取整个或是一部分视频，通过视频抓图工具按照帧速率将视频转码为对应的多张图片，根据实际情况设置视频抓图工具的参数，所述视频抓图工具的参数用于进行帧频的大小与拆分下来图片尺寸的选择；
S2、将视频所生成的多张图片用图片合成工具拼合成一张大图片；合成的图片尺寸大小应该与拆分下来的图片尺寸大小一样；
S3、浏览器获取到该大图片，并初始化画布接口(canvas api)与定时器；开始加载时，设置整个录屏流程需要的总时间，以毫秒为单位进行记录，设置关键位置(例如：当游戏运行到此处时，当前画面时，进行暂停，进行其他操作)，到达该关键位置时，进行操作(例如暂停，画面停止)，同时操作的时间暂停，当此时暂停的时间值不变，进行外部操作，操作完成之后，得到之前时间值，以此时间值为基础，再次进行自动播放视频图像；以此类推进行流程操作；
S4、根据外部的指令操作，按照播放速度、顺序与起始位置，将大图片特定区域绘制到页面的画布(canvas)中进行播放；
S5、当大图片所有区域都绘制完成时，则说明视频已经播放完成，画面可设置停留在指定的位置，然后清除定时器，整个互动已完成。
步骤S1中，所述视频抓图工具优选为ffmpeg工具。ffmpeg工具的优势功能强大，易操作，并且跨操作系统，包括Windows、Mac OS X等。
步骤S2中，所述图片合成工具为Montage Guide。
所述图片合成工具能够进行以下操作：
调整(允许更改的图像大小)、裁剪(可以裁剪图像的区域)、文本(用于题写图像设计)、分离(允许从背景中分离对象并将其存储随后转移到另一张照片上)、应用背景效果、粘贴对象(将一个分离的图像粘贴到另一张照片)、智能删除(删除对象而没有痕迹)、智能尺寸(更改图像大小，删除"不必要"的部分同时保持"重要"特征完好无缺)、智能修补(允许从图像中一个区域修补到另一个区域)。依次进行上述操作能够将视频所生成的单张图片拼合成一张大图片；合成的图片尺寸(如长、宽)大小应该与拆分下来的图片尺寸(如长、宽)大小为一致大小；拆分下来的图片尺寸已同设备尺寸，适配好，避免错乱，保持一致。
根据经验若移动设备系统为iOS9.0以下，需要把整个拆分下来的图片拼接合成几块连续的图片，防止设备在此系统下画质模糊不清楚。
步骤S4中，所述播放的过程中还具有暂停或者继续播放功能。具有暂停或者继续播放功能以便同用户进行深度互动操作。
本发明与现有技术相比，具有如下优点和有益效果：
1、本发明能够解决用户手动触发web视频播放、强制全屏播放导致用户体验下降，无法进行更多基于视频的互动交互方案。本发明不需要用户手动触发播放和强制全屏，提高用户体验与互动效果。
2、本发明通过将视频转换为图片集合的方法，能够根据具体情况，选择是否自动或者手动播放视频内容，能够根据视频的播放参数(速度、顺序、起始位置等)，控制视频的播放。同时在播放过程中，能够利用画布相关接口使视频和用户进行深度互动。
附图说明
图1为本发明所述一种基于移动web平台上自动播放视频图像的方法的流程图。
具体实施方式
下面结合实施例及附图对本发明作进一步详细的描述，但本发明的实施方式不限于此。
实施例一
如图1，一种基于移动web平台上自动播放视频图像的方法，包含以下步骤：
一种基于移动web平台上自动播放视频图像的方法，包含以下步骤：
S1、获取整个或是一部分视频，通过视频抓图工具按照帧速率将视频转码为对应的多张图片，根据实际情况设置视频抓图工具的参数，所述视频抓图工具的参数用于进行帧频的大小与拆分下来图片尺寸的选择；
S2、将视频所生成的多张图片用图片合成工具拼合成一张大图片；合成的图片尺寸大小应该与拆分下来的图片尺寸大小一样；
S3、浏览器获取到该图片，并初始化画布接口(canvas api)与定时器；开始加载时，设置整个录屏流程需要的总时间，以毫秒为单位进行记录，设置关键位置(例如：当游戏运行到此处时，当前画面时，进行暂停，进行其他操作)，到达该关键位置时，进行操作(例如暂停，画面停止)，同时操作的时间暂停，当此时暂停的时间值不变，进行外部操作，操作完成之后，得到之前时间值，以此时间值为基础，再次进行自动播放视频图像；以此类推进行流程操作；
S4、根据外部的指令操作，按照播放速度、顺序与起始位置，将大图片特定区域绘制到页面的画布(canvas)中进行播放；
S5、当大图片所有区域都绘制完成时，则说明视频已经播放完成，画面可设置停留在指定的位置，然后清除定时器，整个互动已完成。
步骤S1中，所述视频抓图工具优选为ffmpeg工具。ffmpeg工具的优势功能强大，易操作，并且跨操作系统，包括Windows、Mac OS X等。
步骤S2中，所述图片合成工具为Montage Guide。
所述图片合成工具能够进行以下操作：
调整(允许更改的图像大小)、裁剪(可以裁剪图像的区域)、文本(用于题写图像设计)、分离(允许从背景中分离对象并将其存储随后转移到另一张照片上)、应用背景效果、粘贴对象(将一个分离的图像粘贴到另一张照片)、智能删除(删除对象而没有痕迹)、智能尺寸(更改图像大小，删除"不必要"的部分同时保持"重要"特征完好无缺)、智能修补(允许从图像中一个区域修补到另一个区域)。依次进行上述操作能够将视频所生成的单张图片拼合成一张大图片；合成的图片尺寸(如长、宽)大小应该与拆分下来的图片尺寸(如长、宽)大小为一致大小；拆分下来的图片尺寸已同设备尺寸，适配好，避免错乱，保持一致。
根据经验若移动设备系统为iOS9.0以下，需要把整个拆分下来的图片拼接合成几块连续的图片，防止设备在此系统下画质模糊不清楚。
步骤S4中，所述播放的过程中还具有暂停或者继续播放功能。具有暂停或者继续播放功能以便同用户进行深度互动操作。
实施例二
具体到游戏试玩体验，一种基于移动web平台上自动播放视频图像的方法，包含以下步骤：
(1)游戏是按照iphone6和iphone6s屏幕尺寸为基准屏幕进行录制，视频尺寸也以以上尺寸为基础，此尺寸为最佳，可向上向下进行兼容，以此来兼容iphone5、iphone5s和iphone6 plus、iphone6s plus屏幕尺寸，然后将游戏试玩视频按照特定需求转码成响应的图片集合(若是ipad尺寸，建议换重新匹配素材尺寸，保证游戏清晰度)。
(2)将响应的图片合集拼接成一张大图片，进行操作，对游戏试玩的关键帧进行确认并编写对应的响应动作(比如暂停继续播放游戏、循环部分场景等)。
(3)由于此互动是采用通过视频分拆下来图片，之后在根据需要合成单个或者是多个大图片，此时图片大小相对来对比，比较大，对与后期的加载与用户体验不方便，在互动之前应先进行预加载把所需要的资源县加载出来，以便互动体验，防止出现卡顿等不良现象(由于是在移动端中去操作，整体资源大小最好保持在3M-4M)。
(4)活动游戏的预先加载完成之后，根据播放时间进行相应的响应游戏动作，并触发暂停视频播放、回放跳转到某一帧以及循环部分场景等动作，此间进行的操作设置，找到关键帧，与之相对应的时间进行处理，当所需要的流程进行完毕之后，要进行定时器的清除。
上述实施例为本发明较佳的实施方式，但本发明的实施方式并不受上述实施例的限制，其他的任何未背离本发明的精神实质与原理下所作的改变、修饰、替代、组合、简化，均应为等效的置换方式，都包含在本发明的保护范围之内。