一种通过鼠标拖动展示视频缩略图的方法技术

技术编号:14886773 阅读:70 留言:0更新日期:2017-03-25 20:01
本发明专利技术涉及一种通过鼠标拖动展示视频缩略图的方法,当鼠标移动到所展示的视频封面上时,向服务器请求视频略缩图集;所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵,以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息;根据鼠标在视频封面上的当前位置,计算视频时间轴上与该当前位置对应的关键帧出现时间,并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。本发明专利技术在展示视频封面的同时,增加了视频的快速预览功能,极大地提升用户体验。

【技术实现步骤摘要】

本专利技术涉及视频内容人性化体验技术,特别涉及一种通过鼠标拖动展示视频缩略图的方法
技术介绍
一般在客户端、浏览器等的视频列表页面上展示有一个或多个视频的封面,可以通过鼠标点击某个视频封面等方式,跳转到相应的播放页面进行视频播放。然而,基于现有技术,如果用户不打开视频的情况下,无法对其进行预览,难以对视频内容进行快速筛选,用户体验不佳。
技术实现思路
本专利技术的目的在于提供一种通过鼠标拖动展示视频缩略图的方法,在展示视频封面的同时,增加视频的快速预览功能。为了达到上述目的,本专利技术的技术方案在于提供一种通过鼠标拖动展示视频缩略图的方法,当鼠标移动到所展示的视频封面上时,向服务器请求视频略缩图集;所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵,以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息;根据鼠标在视频封面上的当前位置,计算视频时间轴上与该当前位置对应的关键帧出现时间,并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。优选地,根据鼠标在视频封面上移动后的位置,重新计算视频时间轴上与移动后的位置所对应的关键帧出现时间及其对应的略缩图块进行展示。优选地,计算视频封面的大小与单个略缩图块的大小之间的比例,根据该比例对根据鼠标位置计算获得的对应略缩图块进行大小调整后进行展示。优选地,鼠标移动到所展示的视频封面上,使视频封面上的元素淡出后,淡入一个半透明蒙层,根据鼠标位置计算获得的对应略缩图块在该蒙层处展示;鼠标移动到所展示的视频封面之外时,所述略缩图块及蒙层淡出后,使视频封面上的元素淡入,恢复视频封面原有状态。优选地,将鼠标在视频封面上的停留时间与第一设定值进行比较,当实际的停留时间达到第一设定值时,使视频封面上的元素淡出而蒙层淡入;将鼠标移动到所展示的视频封面之外的时间与第二设定值进行比较,当实际在视频封面之外的时间达到第二设定值时,使蒙层淡出而视频封面上的元素淡入,恢复视频封面原有状态。优选地,对服务器请求视频略缩图集时,将视频略缩图集相应数据处理后进行缓存,或者直接读取缓存中的视频略缩图集相应数据。本专利技术在展示视频封面的同时,增加了视频的快速预览功能。用户在未打开视频的情况下,即可快速了解视频的内容,预览视频中精彩的部分,同时用户可以通过这项功能方便地对自己喜好的视频内容进行筛选,从而极大地提升了用户体验。附图说明图1是本专利技术所述通过鼠标拖动展示视频缩略图的方法流程图;图2是本专利技术所述方法的效果展示图。具体实施方式本专利技术提供一种通过鼠标拖动展示视频缩略图的方法,当鼠标移动到展示的视频封面上时,向服务器请求视频略缩图集信息,视频略缩图集包含有体现略缩图块(即关键帧图像)与关键帧出现时间对应关系的图片坐标信息,从而利用层叠样式表技术,根据鼠标在视频封面上的位移,按时间轴展示比例缩放的对应略缩图块。本专利技术中涉及的技术包含:关键帧:指角色或者物体运动或变化中的关键动作所处的那一帧,相当于二维动画中的原画,是用来定义动画变化的帧,是动画制作过程中最重要的帧类型。一段视频含有多个关键帧。视频略缩图集:通过计算对关键帧图像进行提取,将图像按固定长度宽度的方式拼接成图像矩阵,并把该关键帧出现时间存储到列表中保存在服务器。层叠样式表(CSS):是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。层叠样式表能够对网页中的对象的位置排版进行像素级的精确控制,在一个固定的矩形空间内按显示坐标展示一张大图的不同位置内容。如图1所示,本专利技术所述通过鼠标拖动展示视频缩略图的方法,包含以下的实施过程:步骤S1.1用户进入视频列表页,该页展示有一个或多个视频封面。步骤S1.2鼠标在任意一个视频封面上的停留时间达到设定值时,封面上不必要的元素开始淡出,结束后,淡入一个半透明蒙层并显示视频时长信息。步骤S1.3开始向服务器请求视频略缩图集信息。视频略缩图集包含体现略缩图块(即关键帧图像)和关键帧出现时间对应关系的图片坐标信息,及多个略缩图块对应该视频多个关键帧图像的图像矩阵;请求成功后,对原始数据进行必要的处理并缓存处理过的数据以备下一次使用。如果缓存已存在,则直接读取缓存中的数据。步骤S1.4根据鼠标在当前视频封面上的位置,计算出要对应展示的略缩图块。并且,根据当前视频封面的大小、视频略缩图集中单个略缩图块的大小,计算出这两者之间对应的比例关系。步骤S1.5根据步骤S1.4中的数据计算出要对应展示的略缩图块的坐标信息,然后根据此坐标信息设定视频缩略图,并按比例在半透明蒙层处展示出来。步骤S1.6鼠标在当前封面内移动时,重复步骤S1.4和步骤S1.5计算出新的坐标信息,并以此更新略缩图块的坐标信息,从而达到随着鼠标移动而对视频略缩图推进展示的效果。步骤S1.7在鼠标移出当前的视频封面时,短暂的延迟后,略缩图块以及背景蒙层开始淡出,结束后,步骤S1.2中淡出的元素开始淡入,恢复到视频封面的原有状态。如图2的效果展示图所示,abc三个图例的画面底部显示有视频的标题,画面顶部分别包含视频的时间轴10,鼠标在画面(视频封面或其蒙层)上沿时间轴10的轴向移动到不同位置时,根据鼠标指针的位置将时间轴10上的节点11推进到相应的关键帧出现时间;在视频略缩图集包含的图片坐标信息中基于该时间计算,得到视频略缩图集中要对应展示的略缩图块的坐标信息,进而将略缩图块按视频封面的大小缩放后在蒙层处展示相应的视频缩略图像。尽管本专利技术的内容已经通过上述优选实施例作了详细介绍,但应当认识到上述的描述不应被认为是对本专利技术的限制。在本领域技术人员阅读了上述内容后,对于本专利技术的多种修改和替代都将是显而易见的。因此,本专利技术的保护范围应由所附的权利要求来限定。本文档来自技高网...
一种通过鼠标拖动展示视频缩略图的方法

【技术保护点】
一种通过鼠标拖动展示视频缩略图的方法,其特征在于,当鼠标移动到所展示的视频封面上时,向服务器请求视频略缩图集;所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵,以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息;根据鼠标在视频封面上的当前位置,计算视频时间轴上与该当前位置对应的关键帧出现时间,并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。

【技术特征摘要】
1.一种通过鼠标拖动展示视频缩略图的方法,其特征在于,当鼠标移动到所展示的视频封面上时,向服务器请求视频略缩图集;所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵,以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息;根据鼠标在视频封面上的当前位置,计算视频时间轴上与该当前位置对应的关键帧出现时间,并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。2.如权利要求1所述的方法,其特征在于,根据鼠标在视频封面上移动后的位置,重新计算视频时间轴上与移动后的位置所对应的关键帧出现时间及其对应的略缩图块进行展示。3.如权利要求1或2所述的方法,其特征在于,计算视频封面的大小与单个略缩图块的大小之间的比例,根据该比例对根据鼠标位置计算获得的对应略缩图块进行大小调整后进行展示。4....

【专利技术属性】
技术研发人员:谭兆歆刘浩
申请(专利权)人:上海幻电信息科技有限公司
类型:发明
国别省市:上海;31

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1