CN114979719B - 视频播放方法、装置、介质和电子设备 - Google Patents

视频播放方法、装置、介质和电子设备 Download PDF

Info

Publication number
CN114979719B
CN114979719B CN202110207907.5A CN202110207907A CN114979719B CN 114979719 B CN114979719 B CN 114979719B CN 202110207907 A CN202110207907 A CN 202110207907A CN 114979719 B CN114979719 B CN 114979719B
Authority
CN
China
Prior art keywords
video
data
frame
target
metadata
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.)
Active
Application number
CN202110207907.5A
Other languages
English (en)
Other versions
CN114979719A (zh
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.)
Beijing Kingsoft Cloud Network Technology Co Ltd
Original Assignee
Beijing Kingsoft Cloud Network 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 Beijing Kingsoft Cloud Network Technology Co Ltd filed Critical Beijing Kingsoft Cloud Network Technology Co Ltd
Priority to CN202110207907.5A priority Critical patent/CN114979719B/zh
Publication of CN114979719A publication Critical patent/CN114979719A/zh
Application granted granted Critical
Publication of CN114979719B publication Critical patent/CN114979719B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/23—Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/239—Interfacing the upstream path of the transmission network, e.g. prioritizing client content requests
    • H04N21/2393—Interfacing the upstream path of the transmission network, e.g. prioritizing client content requests involving handling client requests
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/44004—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving video buffer management, e.g. video decoder buffer or video display buffer
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving rendering scenes according to scene graphs, e.g. MPEG-4 scene graphs
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
    • H04N21/4782—Web browsing, e.g. WebTV
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/485—End-user interface for client configuration

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

本发明涉及一种视频播放方法、装置、介质和电子设备，其中所述方法包括：获取视频的元数据，元数据至少包含视频的每帧数据的标识及对应的每帧数据的存储位置；接收用户输入的待查询视频帧的目标标识，基于目标标识和元数据，确定待查询视频帧对应的目标帧数据的目标存储位置；基于目标存储位置获取目标帧数据，解封装目标帧数据得到视频数据；解码视频数据得到视频解码数据，基于视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像。本实施方案可以在浏览器中实现逐帧查看视频帧画面，且该实现方式的处理速度较快，同时节省带宽资源。

Description

视频播放方法、装置、介质和电子设备
技术领域
本公开实施例涉及计算机技术领域，尤其涉及一种视频播放方法，视频播放装置，实现视频播放方法的计算机可读存储介质和电子设备。
背景技术
传统的Web浏览器中网页视频主要是Flash视频，通常需要通过Flash插件进行播放。通过Flash插件本身提供的接口，用户可直接获取视频播放信息，如视频的分辨率、播放进度、视频帧信息等。
相关技术中，通过超文本标记语言第五次版本(Hyper Text Markup Language5，HTML5)中的新标签<video>，可在HTML网页嵌入视频元素，从而不需要插件的支持而简捷快速地实现网页中的视频播放。
但是，目前用户仅能在HTML网页中查看视频播放进度和分辨率等信息，无法在HTML5网页中逐帧查看视频帧画面。
发明内容
为了解决上述技术问题或者至少部分地解决上述技术问题，本公开实施例提供了一种视频播放方法，视频播放装置，实现视频播放方法的计算机可读存储介质和电子设备。
第一方面，本公开实施例提供一种视频播放方法，包括：
获取视频的元数据，所述元数据至少包含所述视频的每帧数据的标识及对应的每帧数据的存储位置；
接收待查询视频帧的目标标识；
基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置；
基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据；
解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像。
在本公开的一些实施例中，所述获取视频的元数据，包括：
向服务器发送视频数据获取请求；
接收所述服务器响应所述视频数据获取请求而下发的部分数据；
解封装所述部分数据得到所述视频的文件头数据；
解析所述文件头数据得到所述元数据。
在本公开的一些实施例中，所述元数据还包含所述视频的总帧数；所述接收待查询视频帧的目标标识，包括：
在所述视频暂停播放时，显示逐帧查看控件，所述逐帧查看控件中显示所述视频的总帧数以及虚拟选择按钮；
响应对所述虚拟选择按钮的预设操作，从而确定当前选择的待查询视频帧的目标标识，并显示当前选择的所述目标标识。
在本公开的一些实施例中，所述解码所述视频数据得到视频解码数据，包括：
通过视频解码器解码所述视频数据得到YUV数据；
其中，所述视频解码器是以字节码文件形式嵌入所述浏览器中。
在本公开的一些实施例中，所述基于所述视频解码数据进行渲染处理，包括：
基于所述YUV数据，通过超文本标记语言第五次版本的画布标签和Web图形库在浏览器中进行渲染处理。
在本公开的一些实施例中，所述方法还包括：
获取所述视频的封装格式；
基于所述封装格式调用对应的解析器，其中不同的封装格式对应不同的解析器；
通过所述解析器解封装所述目标帧数据。
在本公开的一些实施例中，所述方法还包括：
缓存所述元数据到缓存单元中；
所述基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置，包括：
基于所述目标标识，在所述缓存单元中查找所述元数据中与所述目标标识匹配的一帧数据的标识；
基于匹配到的一帧数据的标识，查找对应的一帧数据的存储位置作为所述目标存储位置。
第二方面，本公开实施例还提供一种视频播放装置，包括：
元数据获取模块，用于获取视频的元数据，所述元数据至少包含所述视频的每帧数据的标识及对应的每帧数据的存储位置；
标识接收模块，用于接收待查询视频帧的目标标识；
存储位置确定模块，用于基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置；
解封装模块，用于基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据；
解码渲染模块，用于解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像。
在本公开的一些实施例中，所述元数据获取模块，包括：
信息发送模块，用于向服务器发送视频数据获取请求；
信息接收模块，用于接收所述服务器响应所述视频数据获取请求而下发的部分数据；
解封装子模块，用于解封装所述部分数据得到所述视频的文件头数据；
数据解析模块，用于解析所述文件头数据得到所述元数据。
在本公开的一些实施例中，所述元数据还包含所述视频的总帧数；所述标识接收模块，包括：
控件呈现模块，用于在所述视频暂停播放时，显示逐帧查看控件，所述逐帧查看控件中显示所述视频的总帧数以及虚拟选择按钮；
标识选择模块，用于响应对所述虚拟选择按钮的预设操作，从而确定当前选择的待查询视频帧的目标标识，并显示当前选择的所述目标标识。
在本公开的一些实施例中，所述解码渲染模块，具体用于：
通过视频解码器解码所述视频数据得到YUV数据；
其中，所述视频解码器是以字节码文件形式嵌入所述浏览器中。
在本公开的一些实施例中，所述解码渲染模块，具体用于：
基于所述YUV数据，通过超文本标记语言第五次版本的画布标签和Web图形库在浏览器中进行渲染处理。
在本公开的一些实施例中，所述装置还包括：
封装格式获取模块，用于获取所述视频的封装格式；
解析器确定模块，用于基于所述封装格式调用对应的解析器，其中不同的封装格式对应不同的解析器；
所述解封装模块，还用于通过所述解析器解封装所述目标帧数据。
在本公开的一些实施例中，所述装置还包括：
数据缓存模块，用于缓存所述元数据到缓存单元中；
所述存储位置确定模块，具体用于：
基于所述目标标识，在所述缓存单元中查找所述元数据中与所述目标标识匹配的一帧数据的标识；
基于匹配到的一帧数据的标识，查找对应的一帧数据的存储位置作为所述目标存储位置。
第三方面，本公开实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述任一实施例所述视频播放方法的步骤。
第四方面，本公开实施例提供一种电子设备，包括：
处理器；以及
存储器，用于存储所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行上述任一实施例所述视频播放方法的步骤。
本公开实施例提供的技术方案与现有技术相比具有如下优点：
本公开实施例的方案中，先获取视频的元数据，该元数据包含所述视频的每帧数据的标识及对应的每帧数据的存储位置，然后接收用户输入的待查询视频帧的目标标识，基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置，接着基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据，最后解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在所述浏览器中显示待查询视频帧对应的图像。这样，本实施例的方案可以在浏览器中实现逐帧查看视频帧画面，且该实现方式在查看一个视频帧画面时，可仅获取该视频帧单独对应的数据进行解封装、视频解码和渲染等处理，其每次处理的数据量较小，因此处理速度较快，可简单快速地实现视频帧画面的查看，避免例如出现卡顿或等待时间较长等问题，同时可以节省带宽资源。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。
为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1为本公开实施例视频播放方法流程图；
图2为本公开另一实施例视频播放方法流程图；
图3为本公开又一实施例视频播放方法流程图；
图4为本公开实施例视频逐帧查看场景示意图；
图5为本公开实施例视频播放装置示意图；
图6为本公开实施例实现视频播放方法的电子设备示意图。
具体实施方式
为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。
应当理解，在下文中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。
图1为本公开实施例示出的视频播放方法流程图，该视频播放方法可以在一台计算机设备或终端设备上实现，该视频播放方法可以包括以下步骤：
步骤S101：获取视频的元数据，所述元数据至少包含所述视频的每帧数据的标识及对应的每帧数据的存储位置。
示例性的，元数据是描述数据的数据(Data About Data)，主要是描述数据属性信息，用来支持例如指示数据存储位置、文件记录等功能。本实施例中，视频的元数据可以包含该视频的每帧数据的标识及对应的每帧数据的存储位置，每帧数据的标识可以是帧序号、每帧数据的存储位置可以是字节位置，每个帧序号对应一个存储位置。例如一个视频共有500帧，每帧数据的帧序号依次可以是1～500，对应的每帧数据的存储位置依次可以是Addr1～Addr500。每个存储位置如Addr1存储有对应的帧序号是1的一帧数据，该一帧数据可以包含视频轨信息和音频轨信息，但不限于此。
具体的，例如在一台计算机设备如电脑的浏览器中基于HTML5页面播放一个视频，在播放视频开始时可以基于该视频的统一资源定位符URL(Uniform Resource Locator)从存储该视频对应的视频文件的服务器上获取该视频的元数据。也可以在播放视频时响应用户的操作从服务器上获取该视频的元数据，当然并不限于此。
步骤S102：接收待查询视频帧的目标标识。
具体的，在HTML5页面播放一个视频时，可以在视频页面显示视频帧查看的用户界面，如用户想查看一帧的视频画面，可以在该用户界面中输入待查询视频帧的目标标识如目标帧序号，例如用户查看目标帧序号是2的视频帧，可以输入目标帧序号2。
步骤S103：基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置。
具体的，例如用户输入目标帧序号2，即目标标识是帧序号2，则可以在元数据的每帧数据的帧序号如1～500中确定与目标帧序号2对应的即相同的帧序号2，进而确定对应的存储位置是Addr2，该存储位置Addr2即为目标存储位置。
步骤S104：基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据。
具体的，确定目标存储位置如存储位置Addr2之后，计算机设备如电脑可以基于存储位置Addr2从服务器上请求获取该存储位置Addr2中存储的目标帧数据，该目标帧数据至少可包含音频轨信息和视频轨信息，但不限于此。本实施例中解封装目标帧数据得到视频数据如视频轨信息，音频轨信息可以忽略不作处理。示例性的，以MP4格式的视频为例，可以解封装得到moov box，从moov box中解析获取视频轨信息，这些具体可以参考现有技术，此处不再赘述。
步骤S105：解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像。
具体的，计算机设备如电脑获取到视频数据后，通常该视频数据时已经编码数据，如基于H.264或H.265的编码数据，此时需要解码得到视频解码数据，即实现对已编码的数字视频进行还原解码的操作。示例性的，对于H.264编码数据可以使用X264解码器，对于H.265编码数据可以使用金山云的KSC265解码器，但不限于此。解码之后可以得到视频解码数据如YUV数据，然后基于如YUV数据进行渲染处理，从而在Web浏览器中显示待查询视频帧对应的图像，即查看到例如目标帧序号2对应的视频帧的图像画面。
本公开实施例的视频播放方法中，先获取视频的元数据，该元数据包含所述视频的每帧数据的标识及对应的每帧数据的存储位置，然后接收用户输入的待查询视频帧的目标标识，基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置，接着基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据，最后解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在所述浏览器中显示待查询视频帧对应的图像。这样，本实施例的方案可以在浏览器中实现逐帧查看视频帧画面，且该实现方式在查看一个视频帧画面时，可仅获取该视频帧单独对应的数据进行解封装、视频解码和渲染等处理，其每次处理的数据量较小，因此处理速度较快，可简单快速地实现视频帧画面的查看，避免例如出现卡顿或等待时间较长等问题，同时可以节省带宽资源。
可选的，在本公开的一些实施例中，步骤S101中获取视频的元数据，具体可以包括以下步骤：
步骤S201：向服务器发送视频数据获取请求。
具体的，可以使用例如XMLHttpRequest(XHR)技术与服务器交互。通过XMLHttpRequest可以在不刷新页面的情况下请求特定URL，获取数据。关于XMLHttpRequest可以参考现有技术理解，此处不再赘述。
步骤S202：接收所述服务器响应所述视频数据获取请求而下发的部分数据。
具体的，计算机设备如电脑接收服务器响应所述视频数据获取请求而下发的部分数据，即请求获取获取当前播放的视频的部分数据。例如视频大小为500M字节，可以请求1M字节的部分数据，若请求获取部分数据，可以在视频数据获取请求中携带数据请求范围参数来实现，但也不限于此。在另一些示例中，若视频大小不足1M字节，可以请求获取视频的全部数据。
步骤S203：解封装所述部分数据得到所述视频的文件头数据。
具体的，请求获取例如1M字节的部分数据后，可以解封装该部分数据得到所述视频的文件头数据，文件头数据通常包含视频的总帧数、每帧数据的帧序号及对应的存储位置如字节位置等。
步骤S204：解析所述文件头数据得到所述元数据。
具体的，获取文件头数据之后，可以通过解析该文件头数据得到所述元数据中每帧数据的标识如帧序号，以及对应的每帧数据的存储位置如字节位置。步骤S204之后可以继续执行步骤S102～S105。
本实施例中，通过请求获取视频的部分数据之后，解封装部分数据得到文件头数据，进而解析文件头数据得到上述元数据以进行后续查看视频帧的操作。这样无需请求视频的全量数据进行处理，可以节省带宽资源，同时提高数据处理速度，进而实现较为高效地查看视频帧的目的，提高用户体验。
可选的，在本公开的一些实施例中，所述元数据可包含所述视频的总帧数。相应的，步骤S102中接收待查询视频帧的目标标识，具体可以包括以下步骤：
步骤S301：在所述视频暂停播放时，显示逐帧查看控件，所述逐帧查看控件中显示所述视频的总帧数以及虚拟选择按钮。
示例性的，结合图4中所示，例如用户点击暂停按钮403使得视频暂停播放时，显示如图4所示的逐帧查看控件40，逐帧查看控件40中显示所述视频的总帧数如5，以及虚拟选择按钮如前进虚拟按钮401，当用户操作点击前进虚拟按钮401可以切换选择待查询视频帧的目标标识如目标帧序号。
步骤S302：响应对所述虚拟选择按钮的预设操作，从而确定当前选择的待查询视频帧的目标标识，并显示当前选择的所述目标标识。
示例性的，例如当前显示帧序号是1，用户对虚拟选择按钮如前进虚拟按钮401进行预设操作，该预设操作可以是鼠标点击操作，但不限于此。鼠标点击一次前进虚拟按钮401，计算机设备如电脑响应鼠标点击操作而使显示的帧序号切换变为2(图未示)，即确定用户选择的目标标识如目标帧序号是2。步骤S302之后可以继续执行上述步骤S103～S105。当用户想继续播放视频时，可以点击播放按钮402而继续播放视频。
本实施例中，通过显示逐帧查看控件来接收用户选择查看的视频帧的标识如帧序号，如此可以方便用户在逐帧查看视频画面时的操作。
可选的，在上述各实施例的基础上，在本公开的一些实施例中，步骤S105中解码所述视频数据得到视频解码数据，具体可以是：通过视频解码器解码所述视频数据得到YUV数据。其中，所述视频解码器是以字节码文件形式嵌入所述浏览器中。
示例性的，本实施例中的视频解码器可以使用例如C语言或Java语言实现，但不限于此。然后例如C语言编写的视频解码器可以转译成字节码文件如Wasm字节码文件后嵌入浏览器中。
具体的，WebAssembly(简称Wasm)是一种适合于编译到Web的，可移植的，大小和加载时间高效的格式。这是一个新的与平台无关的二进制代码格式，可以解决JavaScript性能问题。本实施例中的视频解码器以Wasm字节码文件形式嵌入浏览器中，可由浏览器的JavaScript引擎直接加载和执行，从而节省从JavaScript到字节码，从字节码到执行前的机器码所花费的即时编译时间。这样，最终使得本实施例中的视频解码过程可以快速执行，从而可快速地实现视频帧画面的查看，避免例如出现卡顿或等待时间较长等问题。
可选的，在上述各实施例的基础上，在本公开的一些实施例中，步骤S105中基于所述视频解码数据进行渲染处理，具体可以是：基于所述YUV数据，通过超文本标记语言第五次版本(HTML5)的画布(Canvas)标签和Web图形库(Web Graphics Library，简称为WebGL)在浏览器中进行渲染处理。
具体的，基于WebGL可以为HTML5 Canvas标签提供硬件3D加速渲染，Web开发人员可以借助系统显卡来在浏览器里更流畅地渲染展示例如图像画面。同时WebGL可免去开发网页专用渲染插件的麻烦，可以较为简单方便地实现画面显示。
可选的，在上述各实施例的基础上，在本公开的一些实施例中，所述方法还可以包括以下步骤：
步骤i)：获取所述视频的封装格式。
示例性的，封装格式是将已经编码压缩好的视频轨和音频轨数据按照一定的格式放到一个文件中。例如封装格式可以是动态图像专家组(Moving Picture Experts Group)制定的MPEG-4，音频视频交错格式AVI(Audio Video Interleave)、流媒体格式FLV(FlashVideo)以及MOV等，但不限于此。具体的，通过获取视频的属性信息可以确定视频的封装格式。
步骤ii)：基于所述封装格式调用对应的解析器，其中不同的封装格式对应不同的解析器。
示例性的，不同封装格式的视频需要对应不同的解析器，比如MP4封装格式的视频的解析器可基于IOS/IEC14496-12标准实现。这些不同的解析器可预先编写好后嵌入浏览器中，但也不限于此。
步骤iii)：通过所述解析器解封装所述目标帧数据。
具体的，例如视频的封装格式是MOV，则可以调用与MOV匹配的解析器来解封装目标帧数据。步骤iii)之后可以执行步骤S105。
本实施例中通过调用与视频的封装格式对应的解析器来解封装目标帧数据，可以提高该实施方案的适用范围，使其应用范围得以扩展，从而可以实现多种不同封装格式的视频的逐帧画面查看。
可选的，在上述各实施例的基础上，在本公开的一些实施例中，所述方法还可以包括以下步骤：
步骤a)：缓存所述元数据到缓存单元中。
示例性的，缓存单元可以是容器或数组等，但不限于此。本实施例中的上述元数据获取后可以先缓存到容器中。
相应的，步骤S103中基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置，具体可以包括以下步骤：
步骤b)：基于所述目标标识，在所述缓存单元中查找所述元数据中与所述目标标识匹配的一帧数据的标识。
示例性的，目标标识可以是帧序号如目标帧序号2，此时则可以从容器中查找元数据中与目标帧序号2匹配的一帧数据的标识。例如下表1所示元数据包含每帧数据的帧序号如1～500，以及每帧数据的存储位置Addr1～Addr500，则可以先确定与目标帧序号2匹配的一帧数据的标识，即在表1中查找与用户输入的目标帧序号2相同的帧序号2。
表1
帧序号 存储位置
1 Addr1
2 Addr2
……
500 Addr500
步骤c)：基于匹配到的一帧数据的标识，查找对应的一帧数据的存储位置作为所述目标存储位置。
示例性的，确定与目标帧序号2相同的帧序号2后，进而可查找确定帧序号2对应的一帧数据的存储位置是Addr2，该存储位置Addr2即为目标存储位置。之后可以执行上述步骤S104～S105。
需要说明的是，尽管在附图中以特定顺序描述了本公开中方法的各个步骤，但是，这并非要求或者暗示必须按照该特定顺序来执行这些步骤，或是必须执行全部所示的步骤才能实现期望的结果。附加的或备选的，可以省略某些步骤，将多个步骤合并为一个步骤执行，以及/或者将一个步骤分解为多个步骤执行等。另外，也易于理解的是，这些步骤可以是例如在多个模块/进程/线程中同步或异步执行。
基于同一构思，本公开实施例还提供一种视频播放装置，如图5所示视频播放装置可包括元数据获取模块501、标识接收模块502、存储位置确定模块503、解封装模块504和解码渲染模块505。其中，元数据获取模块501用于获取视频的元数据，所述元数据至少包含所述视频的每帧数据的标识及对应的每帧数据的存储位置。标识接收模块502用于接收待查询视频帧的目标标识。存储位置确定模块503用于基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置。解封装模块504用于基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据。解码渲染模块505用于解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像。
本公开实施例的视频播放装置中，先获取视频的元数据，该元数据包含所述视频的每帧数据的标识及对应的每帧数据的存储位置，然后接收用户输入的待查询视频帧的目标标识，基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置，接着基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据，最后解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在所述浏览器中显示待查询视频帧对应的图像。这样，本实施例的方案可以在浏览器中实现逐帧查看视频帧画面，且该实现方式在查看一个视频帧画面时，可仅获取该视频帧单独对应的数据进行解封装、视频解码和渲染等处理，其每次处理的数据量较小，因此处理速度较快，可简单快速地实现视频帧画面的查看，避免例如出现卡顿或等待时间较长等问题，同时可以节省带宽资源。
可选的，在本公开的一些实施例中，所述元数据获取模块501，具体可以包括：信息发送模块，用于向服务器发送视频数据获取请求；信息接收模块，用于接收所述服务器响应所述视频数据获取请求而下发的部分数据；解封装子模块，用于解封装所述部分数据得到所述视频的文件头数据；数据解析模块，用于解析所述文件头数据得到所述元数据。
可选的，在本公开的一些实施例中，所述元数据还可包含所述视频的总帧数。相应的，所述标识接收模块502可包括控件呈现模块和标识选择模块；其中，控件呈现模块用于在所述视频暂停播放时，显示逐帧查看控件，所述逐帧查看控件中显示所述视频的总帧数以及虚拟选择按钮。标识选择模块用于响应对所述虚拟选择按钮的预设操作，从而确定当前选择的待查询视频帧的目标标识，并显示当前选择的所述目标标识。
可选的，在本公开的一些实施例中，所述解码渲染模块505，具体用于通过视频解码器解码所述视频数据得到YUV数据。其中，所述视频解码器是以字节码文件形式嵌入所述浏览器中。
可选的，在本公开的一些实施例中，所述解码渲染模块505，具体用于：基于所述YUV数据，通过超文本标记语言第五次版本的画布标签和Web图形库在浏览器中进行渲染处理。
可选的，在本公开的一些实施例中，所述装置还可包括封装格式获取模块和解析器确定模块，其中，封装格式获取模块用于获取所述视频的封装格式，解析器确定模块用于基于所述封装格式调用对应的解析器。其中不同的封装格式对应不同的解析器。所述解封装模块504还用于通过所述解析器解封装所述目标帧数据。
可选的，在本公开的一些实施例中，所述装置还包括数据缓存模块，用于缓存所述元数据到缓存单元中。相应的，所述存储位置确定模块503具体用于：基于所述目标标识，在所述缓存单元中查找所述元数据中与所述目标标识匹配的一帧数据的标识；基于匹配到的一帧数据的标识，查找对应的一帧数据的存储位置作为所述目标存储位置。
关于上述实施例中的装置，其中各个模块执行操作的具体方式以及带来的相应技术效果已经在有关该方法的实施例中进行了对应的详细描述，此处将不做详细阐述说明。
应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。作为模块或单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现木公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
本公开实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任一项实施例所述视频播放方法的步骤。
示例性的，该可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。
本公开实施例还提供一种电子设备，包括处理器以及存储器，存储器用于存储所述处理器的可执行指令。其中，所述处理器配置为经由执行所述可执行指令来执行上述任一项实施例中所述视频播放方法的步骤。
下面参照图6来描述根据本发明的这种实施方式的电子设备600。图6显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图6所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640等。
其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述视频播放方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示视频播放方法的步骤。
所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。
所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。
电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、或者网络设备等)执行根据本公开实施方式的上述视频播放方法。
需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (8)

1.一种视频播放方法，其特征在于，包括：
获取视频的元数据，所述元数据至少包含所述视频的每帧数据的标识及对应的每帧数据的存储位置；所述视频的每帧数据包含视频轨信息和音频轨信息；
接收待查询视频帧的目标标识；
基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置；
基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据；
解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像；
所述解码所述视频数据得到视频解码数据，包括：
通过视频解码器解码所述视频数据得到YUV数据；
其中，所述视频解码器是以字节码文件形式嵌入所述浏览器中；
所述基于所述视频解码数据进行渲染处理，包括：
基于所述YUV数据，通过超文本标记语言第五次版本的画布标签和Web图形库在浏览器中进行渲染处理。
2.根据权利要求1所述的视频播放方法，其特征在于，所述获取视频的元数据，包括：
向服务器发送视频数据获取请求；
接收所述服务器响应所述视频数据获取请求而下发的部分数据；
解封装所述部分数据得到所述视频的文件头数据；
解析所述文件头数据得到所述元数据。
3.根据权利要求1所述的视频播放方法，其特征在于，所述元数据还包含所述视频的总帧数；所述接收待查询视频帧的目标标识，包括：
在所述视频暂停播放时，显示逐帧查看控件，所述逐帧查看控件中显示所述视频的总帧数以及虚拟选择按钮；
响应对所述虚拟选择按钮的预设操作，从而确定当前选择的待查询视频帧的目标标识，并显示当前选择的所述目标标识。
4.根据权利要求1~3任一项所述的视频播放方法，其特征在于，所述方法还包括：
获取所述视频的封装格式；
基于所述封装格式调用对应的解析器，其中不同的封装格式对应不同的解析器；
通过所述解析器解封装所述目标帧数据。
5.根据权利要求1~3任一项所述的视频播放方法，其特征在于，所述方法还包括：
缓存所述元数据到缓存单元中；
所述基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置，包括：
基于所述目标标识，在所述缓存单元中查找所述元数据中与所述目标标识匹配的一帧数据的标识；
基于匹配到的一帧数据的标识，查找对应的一帧数据的存储位置作为所述目标存储位置。
6.一种视频播放装置，其特征在于，包括：
元数据获取模块，用于获取视频的元数据，所述元数据至少包含所述视频的每帧数据的标识及对应的每帧数据的存储位置；所述视频的每帧数据包含视频轨信息和音频轨信息；
标识接收模块，用于接收待查询视频帧的目标标识；
存储位置确定模块，用于基于所述目标标识和所述元数据，确定所述待查询视频帧对应的目标帧数据的目标存储位置；
解封装模块，用于基于所述目标存储位置获取目标帧数据，解封装所述目标帧数据得到视频数据；
解码渲染模块，用于解码所述视频数据得到视频解码数据，基于所述视频解码数据进行渲染处理，以在浏览器中显示待查询视频帧对应的图像；
所述解码渲染模块，具体用于通过视频解码器解码所述视频数据得到YUV数据；其中，所述视频解码器是以字节码文件形式嵌入所述浏览器中；基于所述YUV数据，通过超文本标记语言第五次版本的画布标签和Web图形库在浏览器中进行渲染处理。
7.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现权利要求1~5任一项所述视频播放方法的步骤。
8.一种电子设备，其特征在于，包括：
处理器；以及
存储器，用于存储所述处理器的可执行指令；
其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1~5任一项所述视频播放方法的步骤。
CN202110207907.5A 2021-02-24 2021-02-24 视频播放方法、装置、介质和电子设备 Active CN114979719B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110207907.5A CN114979719B (zh) 2021-02-24 2021-02-24 视频播放方法、装置、介质和电子设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110207907.5A CN114979719B (zh) 2021-02-24 2021-02-24 视频播放方法、装置、介质和电子设备

Publications (2)

Publication Number Publication Date
CN114979719A CN114979719A (zh) 2022-08-30
CN114979719B true CN114979719B (zh) 2024-05-14

Family

ID=82972555

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110207907.5A Active CN114979719B (zh) 2021-02-24 2021-02-24 视频播放方法、装置、介质和电子设备

Country Status (1)

Country Link
CN (1) CN114979719B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6076104A (en) * 1997-09-04 2000-06-13 Netscape Communications Corp. Video data integration system using image data and associated hypertext links
KR20000040497A (ko) * 1998-12-18 2000-07-05 이계철 웹브라우저에서의 다중 프레임 동적 구현 장치및 그 방법
CN103177037A (zh) * 2011-12-26 2013-06-26 深圳市蓝韵网络有限公司 在浏览器上快速显示多帧医学图像的方法
WO2017206396A1 (zh) * 2016-05-30 2017-12-07 乐视控股（北京）有限公司 一种视频播放方法及设备
CN107783709A (zh) * 2017-10-20 2018-03-09 维沃移动通信有限公司 一种图像的查看方法及移动终端
CN107948735A (zh) * 2017-12-06 2018-04-20 北京金山安全软件有限公司 一种视频播放方法、装置及电子设备
CN110087137A (zh) * 2018-01-26 2019-08-02 龙芯中科技术有限公司 视频播放帧信息的获取方法、装置、设备及介质
CN110557670A (zh) * 2019-09-17 2019-12-10 广州华多网络科技有限公司 在网页页面中播放视频的方法、装置、终端和存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7979807B2 (en) * 2004-09-07 2011-07-12 Routeone Llc Method and system for communicating and exchanging data between browser frames

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6076104A (en) * 1997-09-04 2000-06-13 Netscape Communications Corp. Video data integration system using image data and associated hypertext links
KR20000040497A (ko) * 1998-12-18 2000-07-05 이계철 웹브라우저에서의 다중 프레임 동적 구현 장치및 그 방법
CN103177037A (zh) * 2011-12-26 2013-06-26 深圳市蓝韵网络有限公司 在浏览器上快速显示多帧医学图像的方法
WO2017206396A1 (zh) * 2016-05-30 2017-12-07 乐视控股（北京）有限公司 一种视频播放方法及设备
CN107783709A (zh) * 2017-10-20 2018-03-09 维沃移动通信有限公司 一种图像的查看方法及移动终端
CN107948735A (zh) * 2017-12-06 2018-04-20 北京金山安全软件有限公司 一种视频播放方法、装置及电子设备
CN110087137A (zh) * 2018-01-26 2019-08-02 龙芯中科技术有限公司 视频播放帧信息的获取方法、装置、设备及介质
CN110557670A (zh) * 2019-09-17 2019-12-10 广州华多网络科技有限公司 在网页页面中播放视频的方法、装置、终端和存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
Chunxi Liu ; Qingming Huang ; Shuqiang Jiang.Query sensitive dynamic web video thumbnail generation.2011 18th IEEE International Conference on Image Processing.2011,全文. *
基于DaVinci技术的嵌入式Web视频监控系统的设计;郭翠娟;盛雨晴;武志刚;;天津工业大学学报;20160425(02);全文 *

Also Published As

Publication number Publication date
CN114979719A (zh) 2022-08-30

Similar Documents

Publication Publication Date Title
US9418172B2 (en) Systems and methods for remote tracking and replay of user interaction with a webpage
CN110062284B (zh) 视频播放方法、装置和电子设备
WO2021082299A1 (zh) 一种视频播放方法及装置
CN108965397A (zh) 云端视频编辑方法及装置、编辑设备及存储介质
CN111277869B (zh) 视频播放方法、装置、设备和存储介质
CN110784750B (zh) 视频播放方法、装置及计算机设备
CN110446114B (zh) 多媒体数据的处理装置、方法、电子设备及存储介质
JP2004533736A (ja) 双方向テレビジョンでの表示のためにコンテンツを再フォーマットする方法及び装置
US20170026721A1 (en) System and Methods Thereof for Auto-Playing Video Content on Mobile Devices
CN111629253A (zh) 视频处理方法及装置、计算机可读存储介质、电子设备
US20180324238A1 (en) A System and Methods Thereof for Auto-playing Video Content on Mobile Devices
JP7538948B2 (ja) 画像処理方法及び装置、並びにコンピュータ可読記憶媒体
CN112449250B (zh) 一种视频资源的下载方法、装置、设备和介质
CN112073750A (zh) 一种远程桌面控制方法及系统
WO2024139129A1 (zh) 一种多媒体播放方法、浏览器及电子设备
US8706803B1 (en) Client-side generation of preliminary version of network page
CN111651966A (zh) 数据报告文件生成方法、装置与电子设备
CN114036431A (zh) 页面缓存跳转方法、装置、电子设备及存储介质
CN113761871A (zh) 富文本渲染方法、装置、电子设备以及存储介质
US20130152145A1 (en) System and method for multi-standard browser for digital devices
CN113873288A (zh) 在直播过程中生成回放的方法和装置
CN109684570A (zh) 网页信息处理方法及装置
CN114979719B (zh) 视频播放方法、装置、介质和电子设备
CN116578795A (zh) 网页页面的生成方法及装置、存储介质、电子设备
CN115659087B (zh) 页面渲染方法、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant