CN106528695A - 一种通过鼠标拖动展示视频缩略图的方法 - Google Patents

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

Info

Publication number
CN106528695A
CN106528695A CN201610943527.7A CN201610943527A CN106528695A CN 106528695 A CN106528695 A CN 106528695A CN 201610943527 A CN201610943527 A CN 201610943527A CN 106528695 A CN106528695 A CN 106528695A
Authority
CN
China
Prior art keywords
video
thumbnail
front cover
mouse
video front
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201610943527.7A
Other languages
English (en)
Inventor
谭兆歆
刘浩
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Huandian Information Technology Co Ltd
Original Assignee
Shanghai Huandian Information Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Huandian Information Technology Co Ltd filed Critical Shanghai Huandian Information Technology Co Ltd
Priority to CN201610943527.7A priority Critical patent/CN106528695A/zh
Publication of CN106528695A publication Critical patent/CN106528695A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/70—Information retrieval; Database structures therefor; File system structures therefor of video data
    • G06F16/74—Browsing; Visualisation therefor
    • G06F16/745—Browsing; Visualisation therefor the internal structure of a single video sequence
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Multimedia (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明涉及一种通过鼠标拖动展示视频缩略图的方法，当鼠标移动到所展示的视频封面上时，向服务器请求视频略缩图集；所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵，以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息；根据鼠标在视频封面上的当前位置，计算视频时间轴上与该当前位置对应的关键帧出现时间，并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。本发明在展示视频封面的同时，增加了视频的快速预览功能，极大地提升用户体验。

Description

一种通过鼠标拖动展示视频缩略图的方法
技术领域
本发明涉及视频内容人性化体验技术，特别涉及一种通过鼠标拖动展示视频缩略图的方法。
背景技术
一般在客户端、浏览器等的视频列表页面上展示有一个或多个视频的封面，可以通过鼠标点击某个视频封面等方式，跳转到相应的播放页面进行视频播放。然而，基于现有技术，如果用户不打开视频的情况下，无法对其进行预览，难以对视频内容进行快速筛选，用户体验不佳。
发明内容
本发明的目的在于提供一种通过鼠标拖动展示视频缩略图的方法，在展示视频封面的同时，增加视频的快速预览功能。
为了达到上述目的，本发明的技术方案在于提供一种通过鼠标拖动展示视频缩略图的方法，当鼠标移动到所展示的视频封面上时，向服务器请求视频略缩图集；所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵，以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息；
根据鼠标在视频封面上的当前位置，计算视频时间轴上与该当前位置对应的关键帧出现时间，并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。
优选地，根据鼠标在视频封面上移动后的位置，重新计算视频时间轴上与移动后的位置所对应的关键帧出现时间及其对应的略缩图块进行展示。
优选地，计算视频封面的大小与单个略缩图块的大小之间的比例，根据该比例对根据鼠标位置计算获得的对应略缩图块进行大小调整后进行展示。
优选地，鼠标移动到所展示的视频封面上，使视频封面上的元素淡出后，淡入一个半透明蒙层，根据鼠标位置计算获得的对应略缩图块在该蒙层处展示；
鼠标移动到所展示的视频封面之外时，所述略缩图块及蒙层淡出后，使视频封面上的元素淡入，恢复视频封面原有状态。
优选地，将鼠标在视频封面上的停留时间与第一设定值进行比较，当实际的停留时间达到第一设定值时，使视频封面上的元素淡出而蒙层淡入；
将鼠标移动到所展示的视频封面之外的时间与第二设定值进行比较，当实际在视频封面之外的时间达到第二设定值时，使蒙层淡出而视频封面上的元素淡入，恢复视频封面原有状态。
优选地，对服务器请求视频略缩图集时，将视频略缩图集相应数据处理后进行缓存，或者直接读取缓存中的视频略缩图集相应数据。
本发明在展示视频封面的同时，增加了视频的快速预览功能。用户在未打开视频的情况下，即可快速了解视频的内容，预览视频中精彩的部分，同时用户可以通过这项功能方便地对自己喜好的视频内容进行筛选，从而极大地提升了用户体验。
附图说明
图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推进到相应的关键帧出现时间；在视频略缩图集包含的图片坐标信息中基于该时间计算，得到视频略缩图集中要对应展示的略缩图块的坐标信息，进而将略缩图块按视频封面的大小缩放后在蒙层处展示相应的视频缩略图像。
尽管本发明的内容已经通过上述优选实施例作了详细介绍，但应当认识到上述的描述不应被认为是对本发明的限制。在本领域技术人员阅读了上述内容后，对于本发明的多种修改和替代都将是显而易见的。因此，本发明的保护范围应由所附的权利要求来限定。

Claims (6)

1.一种通过鼠标拖动展示视频缩略图的方法，其特征在于，
当鼠标移动到所展示的视频封面上时，向服务器请求视频略缩图集；所述视频略缩图集中包含所整合的多个略缩图块对应于视频多个关键帧图像的图像矩阵，以及体现略缩图块与关键帧出现时间对应关系的图片坐标信息；
根据鼠标在视频封面上的当前位置，计算视频时间轴上与该当前位置对应的关键帧出现时间，并配合所述图片坐标信息进一步计算获得与该关键帧出现时间对应的略缩图块进行展示。
2.如权利要求1所述的方法，其特征在于，
根据鼠标在视频封面上移动后的位置，重新计算视频时间轴上与移动后的位置所对应的关键帧出现时间及其对应的略缩图块进行展示。
3.如权利要求1或2所述的方法，其特征在于，
计算视频封面的大小与单个略缩图块的大小之间的比例，根据该比例对根据鼠标位置计算获得的对应略缩图块进行大小调整后进行展示。
4.如权利要求3所述的方法，其特征在于，
鼠标移动到所展示的视频封面上，使视频封面上的元素淡出后，淡入一个半透明蒙层，根据鼠标位置计算获得的对应略缩图块在该蒙层处展示；
鼠标移动到所展示的视频封面之外时，所述略缩图块及蒙层淡出后，使视频封面上的元素淡入，恢复视频封面原有状态。
5.如权利要求4所述的方法，其特征在于，
将鼠标在视频封面上的停留时间与第一设定值进行比较，当实际的停留时间达到第一设定值时，使视频封面上的元素淡出而蒙层淡入；
将鼠标移动到所展示的视频封面之外的时间与第二设定值进行比较，当实际在视频封面之外的时间达到第二设定值时，使蒙层淡出而视频封面上的元素淡入，恢复视频封面原有状态。
6.如权利要求1所述的方法，其特征在于，
对服务器请求视频略缩图集时，将视频略缩图集相应数据处理后进行缓存，或者直接读取缓存中的视频略缩图集相应数据。
CN201610943527.7A 2016-11-02 2016-11-02 一种通过鼠标拖动展示视频缩略图的方法 Pending CN106528695A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610943527.7A CN106528695A (zh) 2016-11-02 2016-11-02 一种通过鼠标拖动展示视频缩略图的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610943527.7A CN106528695A (zh) 2016-11-02 2016-11-02 一种通过鼠标拖动展示视频缩略图的方法

Publications (1)

Publication Number Publication Date
CN106528695A true CN106528695A (zh) 2017-03-22

Family

ID=58292184

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610943527.7A Pending CN106528695A (zh) 2016-11-02 2016-11-02 一种通过鼠标拖动展示视频缩略图的方法

Country Status (1)

Country Link
CN (1) CN106528695A (zh)

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107872729A (zh) * 2017-11-15 2018-04-03 暴风集团股份有限公司 获取、生成视频帧缩略图的方法和装置及获取系统
CN108965922A (zh) * 2018-08-22 2018-12-07 广州酷狗计算机科技有限公司 视频封面生成方法、装置和存储介质
CN110597424A (zh) * 2019-08-01 2019-12-20 北京悉见科技有限公司 用于图片显示的方法、设备及存储介质
CN111031404A (zh) * 2018-10-09 2020-04-17 腾讯科技（深圳）有限公司 媒体预览方法、装置、计算机可读存储介质和计算机设备
CN111757156A (zh) * 2019-03-29 2020-10-09 杭州海康威视数字技术股份有限公司 一种视频播放方法、装置及设备
CN112131076A (zh) * 2020-09-17 2020-12-25 上海上讯信息技术股份有限公司 一种用于获取鼠标操作事件信息的方法、设备与系统
CN114025199A (zh) * 2022-01-10 2022-02-08 北京美摄网络科技有限公司 一种直播视频剪辑方法、装置和系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103325396A (zh) * 2012-03-23 2013-09-25 深圳市快播科技有限公司 一种用于播放器的播放预览方法和系统
CN104238893A (zh) * 2013-06-08 2014-12-24 腾讯科技（深圳）有限公司 一种对视频预览图片进行显示的方法和装置
CN105100961A (zh) * 2015-07-23 2015-11-25 华为技术有限公司 视频缩略图生成方法及生成装置
CN105898610A (zh) * 2015-10-15 2016-08-24 乐视网信息技术（北京）股份有限公司 视频列表的自动播放方法和装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103325396A (zh) * 2012-03-23 2013-09-25 深圳市快播科技有限公司 一种用于播放器的播放预览方法和系统
CN104238893A (zh) * 2013-06-08 2014-12-24 腾讯科技（深圳）有限公司 一种对视频预览图片进行显示的方法和装置
CN105100961A (zh) * 2015-07-23 2015-11-25 华为技术有限公司 视频缩略图生成方法及生成装置
CN105898610A (zh) * 2015-10-15 2016-08-24 乐视网信息技术（北京）股份有限公司 视频列表的自动播放方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
DREAM__HEART: ""jQuery实现鼠标悬浮在div上时候动态浮动另外一个div层盖住第一个div层"", 《HTTPS://BLOG.CSDN.NET/A1321941138/ARTICLE/DETAILS/44459487》 *

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107872729A (zh) * 2017-11-15 2018-04-03 暴风集团股份有限公司 获取、生成视频帧缩略图的方法和装置及获取系统
CN108965922A (zh) * 2018-08-22 2018-12-07 广州酷狗计算机科技有限公司 视频封面生成方法、装置和存储介质
CN111031404A (zh) * 2018-10-09 2020-04-17 腾讯科技（深圳）有限公司 媒体预览方法、装置、计算机可读存储介质和计算机设备
CN111031404B (zh) * 2018-10-09 2021-12-14 腾讯科技（深圳）有限公司 媒体预览方法、装置、计算机可读存储介质和计算机设备
CN114449361A (zh) * 2018-10-09 2022-05-06 腾讯科技（深圳）有限公司 媒体数据的播放方法、装置、可读存储介质和计算机设备
CN111757156A (zh) * 2019-03-29 2020-10-09 杭州海康威视数字技术股份有限公司 一种视频播放方法、装置及设备
CN110597424A (zh) * 2019-08-01 2019-12-20 北京悉见科技有限公司 用于图片显示的方法、设备及存储介质
CN112131076A (zh) * 2020-09-17 2020-12-25 上海上讯信息技术股份有限公司 一种用于获取鼠标操作事件信息的方法、设备与系统
CN114025199A (zh) * 2022-01-10 2022-02-08 北京美摄网络科技有限公司 一种直播视频剪辑方法、装置和系统

Similar Documents

Publication Publication Date Title
CN106528695A (zh) 一种通过鼠标拖动展示视频缩略图的方法
US11538066B2 (en) Method for serving interactive content to a user
CN105745938B (zh) 多视角音频和视频交互式回放
DE112009000002B4 (de) Verarbeitung von Berührungsereignissen für Webseiten
US9240070B2 (en) Methods and systems for viewing dynamic high-resolution 3D imagery over a network
WO2017173781A1 (zh) 视频帧截取方法和装置
US20090044133A1 (en) Updating Content Display Based on Cursor Position
US20100329642A1 (en) Dynamic Icons Associated with Remote Content
US20150248722A1 (en) Web based interactive multimedia system
DE102014008038A1 (de) Anordnen von unaufdringlichen Oberlagerungen in einem Videocontent
JP5883821B2 (ja) 画像検索装置およびその動作制御方法ならびに画像検索サーバ
CN105245937A (zh) 视频场景控制系统及方法
US20140223271A1 (en) Systems and methods of creating an animated content item
WO2015035898A1 (en) Method, system and apparatus for adding network comment information
CN110633436B (zh) 可视化、自定义全景编辑方法、系统、存储介质及设备
WO2024077909A1 (zh) 基于视频的交互方法、装置、计算机设备和存储介质
CN108509589B (zh) 信息流展示方法及系统、计算机可读存储介质
KR101656167B1 (ko) 애니메이션 재생 방법, 장치, 기기, 프로그램 및 기록매체
CN106548504B (zh) 网页动画生成方法及装置
US20160012859A1 (en) System and method for generating and using spatial and temporal metadata
US20090019370A1 (en) System for controlling objects in a recursive browser system: forcefield
CN111581564B (zh) 一种应用Canvas实现的网页同步交流方法
CN113099288A (zh) 视频制作方法及装置
US9092912B1 (en) Apparatus and method for parallax, panorama and focus pull computer graphics
CN112954441A (zh) 视频编辑及播放方法、装置、设备、介质

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20170322

RJ01 Rejection of invention patent application after publication