CN112929733B - 视频预览播放方法及装置 - Google Patents

视频预览播放方法及装置 Download PDF

Info

Publication number
CN112929733B
CN112929733B CN202110063617.8A CN202110063617A CN112929733B CN 112929733 B CN112929733 B CN 112929733B CN 202110063617 A CN202110063617 A CN 202110063617A CN 112929733 B CN112929733 B CN 112929733B
Authority
CN
China
Prior art keywords
video
browser
effect processing
playing
played
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
CN202110063617.8A
Other languages
English (en)
Other versions
CN112929733A (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.)
Draft Xiamen Information Service Co ltd
Gaoding Xiamen Technology Co Ltd
Original Assignee
Gaoding Xiamen 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 Gaoding Xiamen Technology Co Ltd filed Critical Gaoding Xiamen Technology Co Ltd
Priority to CN202110063617.8A priority Critical patent/CN112929733B/zh
Publication of CN112929733A publication Critical patent/CN112929733A/zh
Priority to PCT/CN2021/106949 priority patent/WO2022151688A1/zh
Application granted granted Critical
Publication of CN112929733B publication Critical patent/CN112929733B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • 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/235—Processing of additional data, e.g. scrambling of additional data or processing content descriptors
    • H04N21/2355—Processing of additional data, e.g. scrambling of additional data or processing content descriptors involving reformatting operations of additional data, e.g. HTML pages
    • 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/44008—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 operations for analysing video streams, e.g. detecting features or characteristics in the video stream
    • 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/472—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content
    • H04N21/47217—End-user interface for requesting content, additional data or services; End-user interface for interacting with content, e.g. for content reservation or setting reminders, for requesting event notification, for manipulating displayed content for controlling playback functions for recorded or on-demand content, e.g. using progress bars, mode or play-point indicators or bookmarks

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Television Signal Processing For Recording (AREA)

Abstract

本发明公开了一种视频预览播放方法、介质、设备及装置，其中方法包括：通过浏览器的不同元素数据类型获取对应的待播放元素；依次将所述对应的待播放元素中的每一帧图像渲染到所述浏览器支持的视频处理元素中；通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中，以便所述效果处理空间对添加的每一帧图像进行效果处理后绘制到所述视频处理元素中以进行视频预览播放；由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。

Description

视频预览播放方法及装置
技术领域
本发明涉及视频处理技术领域，特别涉及一种视频预览播放方法、一种计算机可读存储介质、一种计算机设备以及一种视频预览播放装置。
背景技术
相关技术中，在非编剪辑的过程中通常需要进行预览播放以快速得到对已剪辑素材的整体效果反馈从而对剪辑进一步调优，在web非编剪辑应用中，预览播放器通过采用webassembly技术对图像素材(视频和图片)进行解码，因为web环境中webassembly缺乏硬件加速的支持，解码效率受限，进而限制了播放器对高清视频实时预览播放的支持，一般720p是可以流畅播放的极限，从而大大降低了用户体验。
发明内容
本发明旨在至少在一定程度上解决上述技术中的技术问题之一。为此，本发明的一个目的在于提出一种视频预览播放方法，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
本发明的第二个目的在于提出一种计算机可读存储介质。
本发明的第三个目的在于提出一种计算机设备。
本发明的第四个目的在于提出一种视频预览播放装置。
为达到上述目的，本发明第一方面实施例提出了一种视频预览播放方法，包括以下步骤：通过浏览器的不同元素数据类型获取对应的待播放元素；依次将所述对应的待播放元素中的每一帧图像渲染到所述浏览器支持的视频处理元素中；通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中，以便所述效果处理空间对添加的每一帧图像进行效果处理后绘制到所述视频处理元素中以进行视频预览播放。
根据本发明实施例的视频预览播放方法，首先通过浏览器的不同元素数据类型获取对应的待播放元素；接着依次将对应的待播放元素中的每一帧图像渲染到浏览器支持的视频处理元素中；然后通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中，以便效果处理空间对添加的每一帧图像进行效果处理后绘制到视频处理元素中以进行视频预览播放；由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
另外，根据本发明上述实施例提出的视频预览播放方法还可以具有如下附加的技术特征：
可选地，通过调用所述效果处理空间中的Texlmage2D接口将所述对应的待播放元素和所述效果处理空间中的贴图数据源进行绑定，以便通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中。
可选地，所述效果处理空间为WebGL。
可选地，播放器开始进行视频预览播放时包括以下步骤：S1，播放器调用所述浏览器的不同元素数据类型中的HTMLVideoElement进行视频元素同步播放；S2，根据视频刷新频率指定的时间间隔，所述效果处理空间通过Webassembly效果处理器对存储的当前帧图像进行效果处理；S3，根据指定的层级顺序，所述效果处理空间将经过效果处理后的当前帧图像绘制到所述视频处理元素中；S4，获取HTMLVideoElement中各个视频元素的时间，并根据播放器播放的当前帧对应的时刻获取对应的视频元素的播放时间，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间；S5，重复执行步骤S2-S4，直至播放结束。
为达到上述目的，本发明第二方面实施例提出了一种计算机可读存储介质，其上存储有视频预览播放程序，该视频预览播放程序被处理器执行时实现如上述的视频预览播放方法。
根据本发明实施例的计算机可读存储介质，通过存储视频预览播放程序，以使得处理器在执行该视频预览播放程序时，实现如上述的视频预览播放方法，由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
为达到上述目的，本发明第三方面实施例提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如上述的视频预览播放方法。
根据本发明实施例的计算机设备，通过存储器对视频预览播放程序进行存储，以使得处理器在执行该视频预览播放程序时，实现如上述的视频预览播放方法，由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
为达到上述目的，本发明第四方面实施例提出了一种视频预览播放装置，包括：获取模块，所述获取模块用于通过浏览器的不同元素数据类型获取对应的待播放元素；渲染模块，所述渲染模块用于依次将所述对应的待播放元素中的每一帧图像渲染到所述浏览器支持的视频处理元素中；效果处理模块，所述效果处理模块用于通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中，以便所述效果处理空间对添加的每一帧图像进行效果处理后绘制到所述视频处理元素中以进行视频预览播放。
根据本发明实施例的视频预览播放装置，通过设置获取模块用于通过浏览器的不同元素数据类型获取对应的待播放元素；渲染模块用于依次将对应的待播放元素中的每一帧图像渲染到浏览器支持的视频处理元素中；效果处理模块用于通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中，以便效果处理空间对添加的每一帧图像进行效果处理后绘制到视频处理元素中以进行视频预览播放；由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
另外，根据本发明上述实施例提出的视频预览播放装置还可以具有如下附加的技术特征：
可选地，通过调用所述效果处理空间中的Texlmage2D接口将所述对应的待播放元素和所述效果处理空间中的贴图数据源进行绑定，以便通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中。
可选地，所述效果处理空间为WebGL。
可选地，还包括时间换算模块，所述时间换算模块用于在播放器开始进行视频预览播放时获取HTMLVideoElement中各个视频元素的时间，并根据播放器播放的当前帧对应的时刻获取对应的视频元素的播放时间，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间。
附图说明
图1为根据本发明实施例的视频预览播放方法的流程示意图；
图2为根据本发明一个具体实施例的视频预览播放方法的流程示意图；
图3为根据本发明实施例的视频预览播放装置的方框示意图。
具体实施方式
下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。
相关技术中，非编剪辑通过对视频等媒体进行任意时刻帧的访问以实现编辑的提效，主要分为解码取帧、特效编辑和绘制渲染三部分；现有的web非编剪辑技术一般是基于webassembly技术，通过完整编译其他平台的非编剪辑应用移植到web，而通过完整编译移植而来的应用往往包含webaseembly编译而来的线程同步，在web平台兼容性差，另外，webassembly在web平台无法利用硬件加速，处理速度受限无法支持高清视频的实时解码和处理；为此，本发明提出了一种视频预览播放方法，拆分和细化了移植的颗粒度，按模块单独接入并在模块间使用回调等支持度更广泛的方式来代替线程同步；解码使用WebGL的Texture承载，利用浏览器原生能力解码得到图层素材数据，处理并绘制到Canvas以实现最终的预览播放，流程中利用浏览器的能力进行硬件加速，并且避免了图层数据在CPU和GPU之间的来回传输；从而大大提高了用户体验。
为了更好的理解上述技术方案，下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。
为了更好的理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。
图1为根据本发明实施例的视频预览播放方法的流程示意图，如图1所示，该视频预览播放方法包括以下步骤：
步骤101，通过浏览器的不同元素数据类型获取对应的待播放元素。
作为一个实施例，上述不同元素数据类型包括：ImageBitmap,HTMLCanvasElement,HTMLVideoElement和HTMLImageElement，其中，通过浏览器HTMLVideoElement载入视频元素，通过浏览器HTMLImageElement载入图片元素，或者通过浏览器ImageBitmap直接获取外部已解码元素。
步骤102，依次将对应的待播放元素中的每一帧图像渲染到浏览器支持的视频处理元素中。
作为一个示例，视频处理元素为Canvas。
也就是说，将HTMLVideoElement,HTMLImageElement,ImageBitmap形式的元素按帧渲染到Canvas中。
步骤103，通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中，以便效果处理空间对添加的每一帧图像进行效果处理后绘制到视频处理元素中以进行视频预览播放。
作为一个实施例，上述效果处理空间为WebGL。
也就是说，将HTMLVideoElement,HTMLImageElement,ImageBitmap形式的元素通过Texture从Canvas添加到WebGL中，以便WebGL对添加的HTMLVideoElement,HTMLImageElement,ImageBitmap形式的元素进行效果处理后绘制到Canvas中以进行视频预览播放。
需要说明的是，通过调用效果处理空间中的Texlmage2D接口将对应的待播放元素和效果处理空间中的贴图数据源进行绑定，以便通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中。
也就是说，调用WebGL的Texlmage2D接口将HTMLVideoElement,HTMLImageElement,ImageBitmap形式的元素和WebGL的Texture的数据源绑定。
作为一个实施例，播放器开始进行视频预览播放时包括以下步骤：
S1，播放器调用浏览器的不同元素数据类型中的HTMLVideoElement进行视频元素同步播放；
S2，根据视频刷新频率指定的时间间隔，效果处理空间通过Webassembly效果处理器对存储的当前帧图像进行效果处理；
S3，根据指定的层级顺序，效果处理空间将经过效果处理后的当前帧图像绘制到视频处理元素中；
S4，获取HTMLVideoElement中各个视频元素的时间，并根据播放器播放的当前帧对应的时刻获取对应的视频元素的播放时间，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间；
S5，重复执行步骤S2-S4，直至播放结束。
需要说明的是，在视频预览播放的过程中可对视频剪辑进行调优处理，由于视频进行预览播放前的处理过程需要耗费一定的时间，导致各个视频元素出现延时问题，所以需要对延时进行同步处理，即，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间。
作为一个实施例，假设所有在播放的视频元素包括元素A和元素B，元素A时长为5S，元素B时长为10S，且元素A和元素B首位连接播放，如果播放器的当前播放时间为第3S，则对应换算的元素A的播放时间为第3S，对应换算的元素B的播放时间为第0S；如果播放器的当前播放时间为第7S，则对应换算的元素A的播放时间为第5S，对应换算的元素B的播放时间为第2S，以此类推；假设换算的播放器的当前播放时间为第3S，则只需要比较元素A的时间差，即比较元素A的播放时间与HTMLVideoElement中元素A的时间之间的误差，如果误差大于100ms，则调用HTMLVideoElemnt.seek使HTMLVideoElement中元素A的时间跳转到元素A的播放时间，如果小于等于100ms，则不进行处理。
也就是说，针对所有在播放的视频元素，换算播放器时刻到各自视频的时刻，如果误差大于100ms，调用HTMLVideoElemnt.seek跳转到指定时刻。
作为一个具体实施例，如图2所示，视频预览播放方法包括以下步骤：
步骤201，启动效果处理模块，初始化其中的WebGL以作为效果处理的场所。
步骤202，启动渲染模块，初始化Canvas，并设置为WebGL的输出目标，以作为渲染输出的场所。
步骤203，使用浏览器HTMLVideoElement载入视频元素，HTMLImageElement载入图片元素或者获取外部给入的已解码得到的ImageBitmap。
步骤204，将HTMLVideoElement,HTMLImageElement,ImageBitmap形式的素材通过Texture添加到WebGL中。
步骤205，播放器开启播放，调用HTMLVideoElement.play让视频素材开始同步播放。
步骤206，按照视频刷新频率指定的时间间隔，WebGL对Texture应用Webassembly中的效果处理。
步骤207，按照指定的层级顺序，webGL将经过效果处理后的Texture绘制到Canvas上。
步骤208，针对所有在播放的视频元素，换算播放器时刻到各自视频的时刻，如果误差大于100ms，调用HTMLVideoElemnt.seek跳转到指定时刻。
步骤209，重复步骤206-208，直至预览播放结束。
综上所述，根据本发明实施例的视频预览播放方法，首先通过浏览器的不同元素数据类型获取对应的待播放元素；接着依次将对应的待播放元素中的每一帧图像渲染到浏览器支持的视频处理元素中；然后通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中，以便效果处理空间对添加的每一帧图像进行效果处理后绘制到视频处理元素中以进行视频预览播放；由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
为了实现上述实施例，本发明实施例提出了一种计算机可读存储介质，其上存储有视频预览播放程序，该视频预览播放程序被处理器执行时实现如上述的视频预览播放方法。
根据本发明实施例的计算机可读存储介质，通过存储视频预览播放程序，以使得处理器在执行该视频预览播放程序时，实现如上述的视频预览播放方法，由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
为了实现上述实施例，本发明实施例提出了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时，实现如上述的视频预览播放方法。
根据本发明实施例的计算机设备，通过存储器对视频预览播放程序进行存储，以使得处理器在执行该视频预览播放程序时，实现如上述的视频预览播放方法，由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
为了实现上述实施例，本发明实施例提出了一种视频预览播放装置，如图3所示，该视频预览播放装置包括：获取模块10、渲染模块20和效果处理模块30。
其中，获取模块10用于获取原始视频文件和对应的期望数据信息；
获取模块10用于通过浏览器的不同元素数据类型获取对应的待播放元素；渲染模块20用于依次将对应的待播放元素中的每一帧图像渲染到浏览器支持的视频处理元素中；效果处理模块30用于通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中，以便效果处理空间对添加的每一帧图像进行效果处理后绘制到视频处理元素中以进行视频预览播放。
在一些实施例中，通过调用效果处理空间中的Texlmage2D接口将对应的待播放元素和效果处理空间中的贴图数据源进行绑定，以便通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中。
在一些实施例中，效果处理空间为WebGL。
在一些实施例中，还包括时间换算模块(图中未示出)；时间换算模块用于在播放器开始进行视频预览播放时获取HTMLVideoElement中各个视频元素的时间，并根据播放器播放的当前帧对应的时刻获取对应的视频元素的播放时间，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间。
需要说明的是，上述关于视频预览播放方法的举例说明同样适用于该视频预览播放装置，在此不做赘述。
综上所述，根据本发明实施例的视频预览播放装置，通过设置获取模块用于通过浏览器的不同元素数据类型获取对应的待播放元素；渲染模块用于依次将对应的待播放元素中的每一帧图像渲染到浏览器支持的视频处理元素中；效果处理模块用于通过浏览器中的贴图功能将视频处理元素中的每一帧图像添加到浏览器的效果处理空间中，以便效果处理空间对添加的每一帧图像进行效果处理后绘制到视频处理元素中以进行视频预览播放；由此，通过浏览器WebGL的Texture承载待播放元素，并利用浏览器能力进行解码以享有硬件加速，可以支持高分辨率的视频预览播放，从而大大提高了用户体验。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
应当注意的是，在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的部件或步骤。位于部件之前的单词“一”或“一个”不排除存在多个这样的部件。本发明可以借助于包括有若干不同部件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。
尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
在本发明的描述中，需要理解的是，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本发明的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。
在本发明中，除非另有明确的规定和限定，第一特征在第二特征“上”或“下”可以是第一和第二特征直接接触，或第一和第二特征通过中间媒介间接接触。而且，第一特征在第二特征“之上”、“上方”和“上面”可是第一特征在第二特征正上方或斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”可以是第一特征在第二特征正下方或斜下方，或仅仅表示第一特征水平高度小于第二特征。
在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不应理解为必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (8)

1.一种视频预览播放方法，其特征在于，包括以下步骤：
通过浏览器的不同元素数据类型获取对应的待播放元素；
依次将所述对应的待播放元素中的每一帧图像渲染到所述浏览器支持的视频处理元素中；
通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中，以便所述效果处理空间对添加的每一帧图像进行效果处理后绘制到所述视频处理元素中以进行视频预览播放；
其中，播放器开始进行视频预览播放时包括以下步骤：
S1，播放器调用所述浏览器的不同元素数据类型中的HTMLVideoElement进行视频元素同步播放；
S2，根据视频刷新频率指定的时间间隔，所述效果处理空间通过Webassembly效果处理器对存储的当前帧图像进行效果处理；
S3，根据指定的层级顺序，所述效果处理空间将经过效果处理后的当前帧图像绘制到所述视频处理元素中；
S4，获取HTMLVideoElement中各个视频元素的时间，并根据播放器播放的当前帧对应的时刻获取对应的视频元素的播放时间，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间；
S5，重复执行步骤S2-S4，直至播放结束。
2.如权利要求1所述的视频预览播放方法，其特征在于，通过调用所述效果处理空间中的Texlmage2D接口将所述对应的待播放元素和所述效果处理空间中的贴图数据源进行绑定，以便通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中。
3.如权利要求1所述的视频预览播放方法，其特征在于，所述效果处理空间为WebGL。
4.一种计算机可读存储介质，其特征在于，其上存储有视频预览播放程序，该视频预览播放程序被处理器执行时实现如权利要求1-3中任一项所述的视频预览播放方法。
5.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时，实现如权利要求1-3中任一项所述的视频预览播放方法。
6.一种视频预览播放装置，其特征在于，包括：
获取模块，所述获取模块用于通过浏览器的不同元素数据类型获取对应的待播放元素；
渲染模块，所述渲染模块用于依次将所述对应的待播放元素中的每一帧图像渲染到所述浏览器支持的视频处理元素中；
效果处理模块，所述效果处理模块用于通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中，以便所述效果处理空间对添加的每一帧图像进行效果处理后绘制到所述视频处理元素中以进行视频预览播放；
其中，还包括时间换算模块，所述时间换算模块用于在播放器开始进行视频预览播放时获取HTMLVideoElement中各个视频元素的时间，并根据播放器播放的当前帧对应的时刻获取对应的视频元素的播放时间，如果对应的视频元素的播放时间与HTMLVideoElement中的对应视频元素的时间之间的误差大于第一阈值，则调用HTMLVideoElemnt.seek使HTMLVideoElement中的对应视频元素的时间跳转到对应的视频元素的播放时间。
7.如权利要求6所述的视频预览播放装置，其特征在于，通过调用所述效果处理空间中的Texlmage2D接口将所述对应的待播放元素和所述效果处理空间中的贴图数据源进行绑定，以便通过所述浏览器中的贴图功能将所述视频处理元素中的每一帧图像添加到所述浏览器的效果处理空间中。
8.如权利要求6所述的视频预览播放装置，其特征在于，所述效果处理空间为WebGL。
CN202110063617.8A 2021-01-18 2021-01-18 视频预览播放方法及装置 Active CN112929733B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202110063617.8A CN112929733B (zh) 2021-01-18 2021-01-18 视频预览播放方法及装置
PCT/CN2021/106949 WO2022151688A1 (zh) 2021-01-18 2021-07-16 视频预览播放方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110063617.8A CN112929733B (zh) 2021-01-18 2021-01-18 视频预览播放方法及装置

Publications (2)

Publication Number Publication Date
CN112929733A CN112929733A (zh) 2021-06-08
CN112929733B true CN112929733B (zh) 2022-06-28

Family

ID=76163016

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110063617.8A Active CN112929733B (zh) 2021-01-18 2021-01-18 视频预览播放方法及装置

Country Status (2)

Country Link
CN (1) CN112929733B (zh)
WO (1) WO2022151688A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112929733B (zh) * 2021-01-18 2022-06-28 稿定（厦门）科技有限公司 视频预览播放方法及装置
CN114071229B (zh) * 2021-12-08 2023-06-09 四川启睿克科技有限公司 一种解决SurfaceView渲染器重载视频解码时回收延迟的方法
CN114666514B (zh) * 2022-03-18 2024-02-02 稿定（厦门）科技有限公司 数据处理方法、装置、电子设备和存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106506525A (zh) * 2016-11-29 2017-03-15 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN110557670A (zh) * 2019-09-17 2019-12-10 广州华多网络科技有限公司 在网页页面中播放视频的方法、装置、终端和存储介质
CN111641838A (zh) * 2020-05-13 2020-09-08 深圳市商汤科技有限公司 一种浏览器视频播放方法、装置以及计算机存储介质

Family Cites Families (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103491452B (zh) * 2013-09-25 2017-01-25 北京奇虎科技有限公司 播放网页中视频的方法及装置
US9712589B2 (en) * 2015-02-25 2017-07-18 Ironsource Ltd. System and method for playing a video on mobile web environments
US20170026721A1 (en) * 2015-06-17 2017-01-26 Ani-View Ltd. System and Methods Thereof for Auto-Playing Video Content on Mobile Devices
WO2017130035A1 (en) * 2016-01-27 2017-08-03 Aniview Ltd. A system and methods thereof for auto-playing video content on mobile devices
CN110322532A (zh) * 2018-03-27 2019-10-11 优酷网络技术（北京）有限公司 动态图像的生成方法及装置
CN110198479B (zh) * 2019-05-24 2021-10-22 浪潮软件股份有限公司 一种基于webassembly的浏览器音视频解码播放方法
CN110225404A (zh) * 2019-06-17 2019-09-10 深圳市正易龙科技有限公司 视频播放方法、终端及计算机可读存储介质
CN111901616B (zh) * 2020-07-15 2022-09-13 天翼视讯传媒有限公司 一种基于H5/WebGL的改进多视角直播渲染的方法
CN112929733B (zh) * 2021-01-18 2022-06-28 稿定（厦门）科技有限公司 视频预览播放方法及装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106506525A (zh) * 2016-11-29 2017-03-15 北京旷视科技有限公司 用于在浏览器上播放视频流的方法及装置
CN110557670A (zh) * 2019-09-17 2019-12-10 广州华多网络科技有限公司 在网页页面中播放视频的方法、装置、终端和存储介质
CN111641838A (zh) * 2020-05-13 2020-09-08 深圳市商汤科技有限公司 一种浏览器视频播放方法、装置以及计算机存储介质

Also Published As

Publication number Publication date
CN112929733A (zh) 2021-06-08
WO2022151688A1 (zh) 2022-07-21

Similar Documents

Publication Publication Date Title
CN112929733B (zh) 视频预览播放方法及装置
US10939069B2 (en) Video recording method, electronic device and storage medium
CN111899322B (zh) 视频处理方法、动画渲染sdk和设备及计算机存储介质
CN113457160B (zh) 数据处理方法、装置、电子设备及计算机可读存储介质
CN1670679A (zh) 显示控制设备、显示控制方法以及记录介质
US20080124045A1 (en) System, method and medium generating frame information for moving images
CN112333536A (zh) 音视频编辑方法、设备以及计算机可读存储介质
CN111408138A (zh) 基于游戏引擎的渲染方法、装置及电子设备
CN109788212A (zh) 一种分段视频的处理方法、装置、终端和存储介质
CN104244087A (zh) 一种视频渲染的方法及设备
CN102044058B (zh) 一种在电子设备中处理图片的方法、系统及电子设备
CN111462283A (zh) 大量相同角色动画播放方法、介质、设备及装置
CN112634409B (zh) 自定义动画曲线生成方法及装置
CN107071550B (zh) 一种视频数据共享方法和装置
CN110727825A (zh) 动画播放的控制方法、装置、服务器和存储介质
CN113938619A (zh) 一种基于浏览器的视频合成方法、系统、储存装置
CN105578290A (zh) 一种基于epg进行计划视频打点的方法及装置
CN114449334A (zh) 视频录制方法、装置、电子设备及计算机存储介质
US20220337908A1 (en) User Interface (UI) Engine for Cloud UI Rendering
CN111445562B (zh) 文字动画生成方法及装置
CN107484004B (zh) 一种视频处理方法及装置
CN102479387A (zh) 生成多媒体动画与播放该多媒体动画的方法和装置
CN114339289B (zh) 视频播放处理的方法
CN112929792B (zh) 基于Sox的音频处理方法、介质、设备及装置
JP2008108296A (ja) 情報再生装置及び情報再生方法

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
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20221012

Address after: 361001 unit R, 2nd floor, No. 33-102, Punan 1st Road, Siming District, Xiamen City, Fujian Province

Patentee after: GAODING (XIAMEN) TECHNOLOGY Co.,Ltd.

Patentee after: Draft (Xiamen) Information Service Co.,Ltd.

Address before: G15-2, 3rd floor, No.10, Punan 1st Road, Dongpu Road, Siming District, Xiamen City, Fujian Province

Patentee before: GAODING (XIAMEN) TECHNOLOGY Co.,Ltd.