CN113784194A - 一种视频播放器的嵌入方法和装置 - Google Patents
一种视频播放器的嵌入方法和装置 Download PDFInfo
- Publication number
- CN113784194A CN113784194A CN202010915829.XA CN202010915829A CN113784194A CN 113784194 A CN113784194 A CN 113784194A CN 202010915829 A CN202010915829 A CN 202010915829A CN 113784194 A CN113784194 A CN 113784194A
- Authority
- CN
- China
- Prior art keywords
- video
- img
- webpage
- video player
- tag
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000004590 computer program Methods 0.000 claims description 10
- 230000004044 response Effects 0.000 claims description 7
- 238000000605 extraction Methods 0.000 claims description 6
- 230000008569 process Effects 0.000 abstract description 5
- 230000006870 function Effects 0.000 description 16
- 238000010586 diagram Methods 0.000 description 9
- 238000004891 communication Methods 0.000 description 7
- 230000003993 interaction Effects 0.000 description 6
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 239000000835 fiber Substances 0.000 description 2
- 238000003780 insertion Methods 0.000 description 2
- 230000037431 insertion Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
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
-
- 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/81—Monomedia components thereof
- H04N21/8166—Monomedia components thereof involving executable data, e.g. software
- H04N21/8193—Monomedia components thereof involving executable data, e.g. software dedicated tools, e.g. video decoder software or IPMP tool
-
- 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
- H04N21/85—Assembly of content; Generation of multimedia applications
- H04N21/858—Linking data to content, e.g. by linking an URL to a video object, by creating a hotspot
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种视频播放器的嵌入方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：创建img标签，将当前网页中的video标签替换为所述img标签；按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频。该实施方式基于可定制的AVPlayer替换网页中原生视频播放器的方式，AVPlayer与网页融为一体，待视频播放完毕用户关闭该网页后，也可以移除，整体过程对于用户而言是无感的，实现AVPlayer的无痕嵌入。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种视频播放器的嵌入方法和装置。
背景技术
由于网页可以不依赖于APP(Application，应用程序)的发布，可以快速实现功能的迭代，因而现有APP经常会用到网页技术。同时，用户已不满足照片所带来的体验，视频可以包含更多的内容，所以很多场景下的网页都需要使用视频资源，如商品详情页中的视频介绍等。
目前主要使用网页中的<video>标签播放视频，但在实现本发明的过程中，发明人发现现有技术至少存在如下问题：
现有方式播放视频需唤起系统自带的视频播放器，但原生视频播放器无法进行功能和样式定制，导致不能满足用户的个性化体验。
发明内容
有鉴于此，本发明实施例提供一种视频播放器的嵌入方法和装置，至少能够解决现有使用video标签不能定制视频播放器的现象。
为实现上述目的，根据本发明实施例的一个方面，提供了一种视频播放器的嵌入方法，包括：
创建img标签，将当前网页中的video标签替换为所述img标签；
按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述网页中坐标轴的距离；
响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
可选的，在所述创建img标签之后，还包括：响应于对所述视频中一帧图片的提取操作，将所述一帧图片覆盖在所述img标签上，以在所述img标签处插入视频或播放视频。
可选的，所述img标签的标识为插入视频；
在所述按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架之前，还包括：
响应于对所述网页中一位置的点击操作，基于网页注册点击事件，确定点击位置相对于所述坐标轴的坐标值，获取位于所述坐标值处的网页元素；
若所述网页元素为图片元素且所述图片元素的标识为所述插入视频，则确定所述网页元素处待插入可定制的视频播放器；其中，一帧图片包括多个网页元素。
可选的，还包括：设置播放按钮元素，将所述播放按钮元素覆盖在所述img标签上；以及
响应于对所述播放按钮元素的点击操作，通过所述视频播放器播放与所述视频。
为实现上述目的，根据本发明实施例的另一方面，提供了一种视频播放器的嵌入装置，包括：
创建模块，用于创建img标签，将当前网页中的video标签替换为所述img标签；
设置模块，用于按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述网页中坐标轴的距离；
播放模块，用于响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
可选的，所述创建模块，还用于：响应于对所述视频中一帧图片的提取操作，将所述一帧图片覆盖在所述img标签上，以在所述img标签处插入视频或播放视频。
可选的，所述img标签的标识为插入视频；
所述装置还包括识别模块，用于：
响应于对所述网页中一位置的点击操作，基于网页注册点击事件，确定点击位置相对于所述坐标轴的坐标值，获取位于所述坐标值处的网页元素；
若所述网页元素为图片元素且所述图片元素的标识为所述插入视频，则确定所述网页元素处待插入可定制的视频播放器；其中，一帧图片包括多个网页元素。
可选的，还包括按钮播放模块，用于：设置播放按钮元素，将所述播放按钮元素覆盖在所述img标签上；以及
响应于对所述播放按钮元素的点击操作，通过所述视频播放器播放与所述视频。
为实现上述目的，根据本发明实施例的再一方面，提供了一种视频播放器的嵌入电子设备。
本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现上述任一所述的视频播放器的嵌入方法。
为实现上述目的，根据本发明实施例的再一方面，提供了一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现上述任一所述的视频播放器的嵌入方法。
根据本发明所述提供的方案，上述发明中的一个实施例具有如下优点或有益效果：利用oc语言和js语言交互，使用创建的<img>标签替换掉网页中的<video>标签，并将一帧视频图片显示在<img>标签上，之后用户操作时获取<img>标签的位置，将可定制的视频播放器无痕插入到该位置处，解决网页视频功能和样式无法定制的问题，以便更好更多的给用户传递信息，提升交互度，进而提升用户体验。
上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
附图用于更好地理解本发明，不构成对本发明的不当限定。其中：
图1是根据本发明实施例的一种视频播放器的嵌入方法的主要流程示意图；
图2是根据本发明实施例的一种可选的视频播放器的嵌入方法的流程示意图；
图3是根据本发明实施例的一种视频播放器的嵌入装置的主要模块示意图；
图4是本发明实施例可以应用于其中的示例性系统架构图；
图5是适于用来实现本发明实施例的移动设备或服务器的计算机系统的结构示意图。
具体实施方式
以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。
本发明目前主要适用于iOS系统，iOS系统使用的是Objective-C(简写为OC)语言，而网页使用的是js语言，因而整体实施相当于跨语言互通的一个交互特性。另外，虽Android系统也可以实现视频播放器的定制，但其实施方式与本方案可能有所不同。
目前对视频播放器功能和样式的修改已经是一个比较成熟的技术，因而功能和样式的定制不在本发明考虑范围内，本发明最终实现的目的就是将可定制的视频播放器替换网页的原生视频播放器；其中，原生视频播放器的功能和样式不可更改。
参见图1，示出的是本发明实施例提供的一种视频播放器的嵌入方法的主要流程图，包括如下步骤：
S101：创建img标签，将当前网页中的video标签替换为所述img标签；
S102：按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，偏移量表示与所述网页中坐标轴的距离；
S103：响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
上述实施方式中，对于步骤S101，视频播放地址存储于video标签中，一个网页可能包含多个video标签。
利用stringByEvaluatingJavaScriptFromString(系统中的一个函数名)和js交互，通过js的document.getElementsByTagName(‘video’).scr，获取到<video>标签的视频播放地址src；其中，<video>标签中设有属性src，该属性的值即为视频播放地址。
获取与该视频播放地址对应的视频，进而通过人工提取或人为选择视频中的一帧图片。本发明选用<img>标签，<img>标签的作用就是在网页上呈现一张图片(一张视频的预览图)，当用户观看视频时，需要有一个预览图。
动态创建一个<img>标签，并将所得一帧图片显示在<img>标签上，同时给<img>标签添加一个播放按钮元素；其中，播放按钮用以提示用户这是一个视频，点击播放按钮即可以播放视频。
利用replaceChild方法替换掉<video>标签，以将网页原先的视频播放位置替换为新加的图片元素；其中，replaceChild()方法用新节点替换某个子节点，新节点可以是某个已存在的节点或新创建的节点。
实际操作中，创建img标签后，可能需要经过一些渲染、调整步骤，但将video标签替换为img标签时，即表示这些步骤已处理完毕。
对于步骤S102，通过js方法元素的width、height、offsetTop和offsetLeft，获取<img>标签的宽、高、顶部偏移量和左侧偏移量。后将AVPlayer的frame设置为上述CGRectMack(offsetLeft,offsetTop,width,height)；其中，AVPlayer是iOS系统提供给开发者自由开发样式和功能的播放器。
需要说明的是，此处的偏移量代表img标签(中心点或左上角)相对于网页的坐标值，例如，以网页左上角为原点创建坐标轴，获取img标签在该坐标轴内的坐标值。
因为网页使用UIScrollview进行滚动，所以直接将定制后的视频播放器AVPlayer使用addsubview添加到网页的UIScrollview上；其中，UIScrollview是一个能够滚动的视图控件，用以展示内容。
对于步骤S103，通过<video>标签获得的视频播放地址存放在系统的内存中。用户可以点击该视频播放地址，以准确将视频覆盖在<img>标签的一帧图片(即预览图)上，实现在网页上无痕播放原生视频的目的。
除了点击视频播放地址之外，还可以点击<img>标签上的播放按钮进行视频播放。
上述实施例所提供的方法，基于可定制的AVPlayer替换网页中原生视频播放器的方式，AVPlayer与网页融为一体，待视频播放完毕用户关闭该网页后，也可以移除，整体过程对于用户而言是无感的，实现AVPlayer的无痕嵌入。
参见图2，示出了根据本发明实施例的一种可选的视频播放器的嵌入方法流程示意图，包括如下步骤：
S201：确定当前网页video标签中的视频播放地址，获取与所述视频播放地址对应的视频；
S202：创建img标签，响应于对所述视频中一帧图片的提取操作，将所述一帧图片覆盖在所述img标签上，并将所述img标签的标识设置为插入视频；
S203：将video标签替换为所述img标签；
S204：响应于对所述网页中一位置的点击操作，基于网页注册点击事件，确定点击位置相对于所述网页中坐标轴的坐标值，获取位于所述坐标值处的网页元素；
S205：若所述网页元素为图片元素且所述图片元素的标识为所述插入视频，则确定所述网页元素处待插入可定制的视频播放器；其中，一帧图片包括多个网页元素；
S206：按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述坐标轴的距离；
S207：响应于对视频播放地址的点击操作，以通过所述视频播放器播放与所述视频播放地址对应的视频。
上述实施方式中，对于步骤S201～S203、S206和S207可参见图1所示步骤S101～S103的描述，在此不再赘述。
上述实施方式中，对于步骤S204，预先给网页注册点击事件，以获取用户在网页中的点击位置。具体地，网页注册点击事件相当于给网页注册了一个手势，当用户点击网页时就会触发注册的手势事件，用户点击在屏幕上的位置可以转化为在网页坐标轴中的坐标值(x,y)。
通过js方法document.elementFromPoint(x,y)，获取当前被点击位置处的网页元素。直接使用“网页元素获取属性”的方法即可获取到该网页元素的ID，使用函数实现为(元素.id)即可。
对于步骤S205，一个网页中可能包含多个<img>标签，有些标签可能仅仅是图片、文字显示，而对于需要插入视频播放器的<img>标签，将其ID标记为insertVideo。
<img>标签相当于一个容器，容器内存放有一帧图片，网页中对应于<img>标签处的网页元素可能均为图片元素。因而，若用户点击的网页元素为图片元素且该图片元素的标识为insertVideo，则表明用户点击的是网页中的img标签，需要插入视频播放器。
上述实施例所提供的方法，通过标识的不同，判断用户点击位置是否需要插入视频播放器，进而实现视频播放器的无痕嵌入。
本发明所提供的方法，利用oc语言和js语言交互，使用创建的<img>标签替换掉网页中的<video>标签，并将一帧视频图片显示在<img>标签上，之后用户操作时获取<img>标签的位置，将可定制的视频播放器无痕插入到该位置处，解决网页视频功能和样式无法定制的问题，以便更好更多的给用户传递信息，提升交互度，进而提升用户体验。
参见图3，示出了本发明实施例提供的一种视频播放器的嵌入装置300的主要模块示意图，包括：
创建模块301，用于创建img标签，将当前网页中的video标签替换为所述img标签；
设置模块302，用于按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述网页中坐标轴的距离；
播放模块303，用于响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
本发明实施装置中，所述创建模块301，还用于：响应于对所述视频中一帧图片的提取操作，将所述一帧图片覆盖在所述img标签上，以在所述img标签处插入视频或播放视频。
本发明实施装置中，所述img标签的标识为插入视频；
所述方法还包括识别模块304(图中未标出)，用于：
响应于对所述网页中一位置的点击操作，基于网页注册点击事件，确定点击位置相对于所述坐标轴的坐标值，获取位于所述坐标值处的网页元素；
若所述网页元素为图片元素且所述图片元素的标识为所述插入视频，则确定所述网页元素处待插入可定制的视频播放器；其中，一帧图片包括多个网页元素。
本发明实施装置中，所述网页注册点击事件为手势事件。
本发明实施装置还包括按钮播放模块，用于：
设置播放按钮元素，将所述播放按钮元素覆盖在所述img标签上；以及
响应于对所述播放按钮元素的点击操作，通过所述视频播放器播放与所述视频。
本发明实施装置中，所述偏移量包括顶部偏移量和左侧偏移量，所述尺寸包括宽度和高度。
另外，在本发明实施例中所述装置的具体实施内容，在上面所述方法中已经详细说明了，故在此重复内容不再说明。
图4示出了可以应用本发明实施例的示例性系统架构400。
如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405(仅仅是示例)。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种通讯客户端应用。
终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。
服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。
需要说明的是，本发明实施例所提供的方法一般由服务器405执行，相应地，装置一般设置于服务器405中。
应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。
下面参考图5，其示出了适于用来实现本发明实施例的终端设备的计算机系统500的结构示意图。图5示出的终端设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。
如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有系统500操作所需的各种程序和数据。CPU 501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
以下部件连接至I/O接口505：包括键盘、鼠标等的输入部分506；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分507；包括硬盘等的存储部分508；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分509。通信部分509经由诸如因特网的网络执行通信处理。驱动器510也根据需要连接至I/O接口505。可拆卸介质511，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器510上，以便于从其上读出的计算机程序根据需要被安装入存储部分508。
特别地，根据本发明公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元(CPU)501执行时，执行本发明的系统中限定的上述功能。
需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。
附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括创建模块、设置模块、播放模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，播放模块还可以被描述为“播放视频模块”。
作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：
创建img标签，将当前网页中的video标签替换为所述img标签；
按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述网页中坐标轴的距离；
响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
根据本发明实施例的技术方案，利用oc语言和js语言交互，使用创建的<img>标签替换掉网页中的<video>标签，并将一帧视频图片显示在<img>标签上，之后用户操作时获取<img>标签的位置，将可定制的视频播放器无痕插入到该位置处，解决网页视频功能和样式无法定制的问题，以便更好更多的给用户传递信息，提升交互度，进而提升用户体验。
上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。
Claims (10)
1.一种视频播放器的嵌入方法，其特征在于，包括：
创建img标签，将当前网页中的video标签替换为所述img标签；
按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述网页中坐标轴的距离；
响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
2.根据权利要求1所述的方法，其特征在于，在所述创建img标签之后，还包括：
响应于对所述视频中一帧图片的提取操作，将所述一帧图片覆盖在所述img标签上，以在所述img标签处插入视频或播放视频。
3.根据权利要求2所述的方法，其特征在于，所述img标签的标识为插入视频；
在所述按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架之前，还包括：
响应于对所述网页中一位置的点击操作，基于网页注册点击事件，确定点击位置相对于所述坐标轴的坐标值，获取位于所述坐标值处的网页元素；
若所述网页元素为图片元素且所述图片元素的标识为所述插入视频，则确定所述网页元素处待插入可定制的视频播放器；其中，一帧图片包括多个网页元素。
4.根据权利要求1所述的方法，其特征在于，还包括：
设置播放按钮元素，将所述播放按钮元素覆盖在所述img标签上；以及
响应于对所述播放按钮元素的点击操作，通过所述视频播放器播放与所述视频。
5.一种视频播放器的嵌入装置，其特征在于，包括：
创建模块，用于创建img标签，将当前网页中的video标签替换为所述img标签；
设置模块，用于按照所述img标签的偏移量和尺寸，设置可定制的视频播放器的框架，将设置后的视频播放器覆盖在所述img标签上；其中，所述偏移量表示与所述网页中坐标轴的距离；
播放模块，用于响应于对视频播放地址的点击操作，通过所述视频播放器播放与所述视频播放地址对应的视频；其中，所述视频播放地址通过所述video标签获取。
6.根据权利要求5所述的装置，其特征在于，所述创建模块，还用于：响应于对所述视频中一帧图片的提取操作，将所述一帧图片覆盖在所述img标签上，以在所述img标签处插入视频或播放视频。
7.根据权利要求6所述的装置，其特征在于，所述img标签的标识为插入视频；
所述装置还包括识别模块，用于：
响应于对所述网页中一位置的点击操作，基于网页注册点击事件，确定点击位置相对于所述坐标轴的坐标值，获取位于所述坐标值处的网页元素；
若所述网页元素为图片元素且所述图片元素的标识为所述插入视频，则确定所述网页元素处待插入可定制的视频播放器；其中，一帧图片包括多个网页元素。
8.根据权利要求5所述的装置，其特征在于，还包括按钮播放模块，用于：设置播放按钮元素，将所述播放按钮元素覆盖在所述img标签上；以及
响应于对所述播放按钮元素的点击操作，通过所述视频播放器播放与所述视频。
9.一种电子设备，其特征在于，包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-4中任一所述的方法。
10.一种计算机可读介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-4中任一所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010915829.XA CN113784194A (zh) | 2020-09-03 | 2020-09-03 | 一种视频播放器的嵌入方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010915829.XA CN113784194A (zh) | 2020-09-03 | 2020-09-03 | 一种视频播放器的嵌入方法和装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113784194A true CN113784194A (zh) | 2021-12-10 |
Family
ID=78834966
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010915829.XA Pending CN113784194A (zh) | 2020-09-03 | 2020-09-03 | 一种视频播放器的嵌入方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113784194A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114339369A (zh) * | 2021-12-29 | 2022-04-12 | 四川九州电子科技股份有限公司 | 适用于机顶盒的电视端页面展示方法 |
| CN114416209A (zh) * | 2022-01-25 | 2022-04-29 | 爱集微咨询(厦门)有限公司 | 页面加载方法、装置和可读存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106162380A (zh) * | 2015-04-28 | 2016-11-23 | 天脉聚源（北京）科技有限公司 | 一种在线视频调用方法及系统 |
| CN107257510A (zh) * | 2017-06-05 | 2017-10-17 | 努比亚技术有限公司 | 视频统一播放方法、终端及计算机可读存储介质 |
| CN111523065A (zh) * | 2019-02-02 | 2020-08-11 | 阿里巴巴集团控股有限公司 | 富文本数据处理方法、装置、电子设备及计算机存储介质 |
| CN115474074A (zh) * | 2022-08-29 | 2022-12-13 | 咪咕文化科技有限公司 | 一种视频背景替换方法、装置、计算设备和存储介质 |
-
2020
- 2020-09-03 CN CN202010915829.XA patent/CN113784194A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106162380A (zh) * | 2015-04-28 | 2016-11-23 | 天脉聚源（北京）科技有限公司 | 一种在线视频调用方法及系统 |
| CN107257510A (zh) * | 2017-06-05 | 2017-10-17 | 努比亚技术有限公司 | 视频统一播放方法、终端及计算机可读存储介质 |
| CN111523065A (zh) * | 2019-02-02 | 2020-08-11 | 阿里巴巴集团控股有限公司 | 富文本数据处理方法、装置、电子设备及计算机存储介质 |
| CN115474074A (zh) * | 2022-08-29 | 2022-12-13 | 咪咕文化科技有限公司 | 一种视频背景替换方法、装置、计算设备和存储介质 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114339369A (zh) * | 2021-12-29 | 2022-04-12 | 四川九州电子科技股份有限公司 | 适用于机顶盒的电视端页面展示方法 |
| CN114416209A (zh) * | 2022-01-25 | 2022-04-29 | 爱集微咨询(厦门)有限公司 | 页面加载方法、装置和可读存储介质 |
| CN114416209B (zh) * | 2022-01-25 | 2024-06-07 | 爱集微咨询(厦门)有限公司 | 页面加载方法、装置和可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20210073058A1 (en) | Message processing method and apparatus, storage medium, and computer device | |
| CN109801347B (zh) | 一种可编辑图像模板的生成方法、装置、设备和介质 | |
| CN109460233B (zh) | 页面的原生界面显示更新方法、装置、终端设备及介质 | |
| US20150278164A1 (en) | Method and apparatus for constructing documents | |
| CN111143725A (zh) | 页面生成方法、装置和电子设备 | |
| CN110020329B (zh) | 用于生成网页的方法、装置和系统 | |
| CN105335132B (zh) | 一种自定义应用程序功能的方法、装置以及系统 | |
| CN110070593B (zh) | 图片预览信息的显示方法、装置、设备及介质 | |
| CN113031946B (zh) | 一种渲染页面组件的方法和装置 | |
| WO2023040443A1 (zh) | 用于绘制画布的方法和装置 | |
| CN111294395A (zh) | 一种终端页面传输方法、装置、介质和电子设备 | |
| CN113784194A (zh) | 一种视频播放器的嵌入方法和装置 | |
| AU2015376591A1 (en) | Desktop sharing method and mobile terminal | |
| JP2018508061A (ja) | 適応型電子文書 | |
| CN112486482A (zh) | 一种页面展示方法和装置 | |
| CN107562324B (zh) | 数据显示控制的方法和终端 | |
| CN110807162A (zh) | 加载占位图的方法和装置 | |
| CN110647327B (zh) | 基于卡片的用户界面动态控制的方法和装置 | |
| CN110069186B (zh) | 显示应用的操作界面的方法和设备 | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| CN110618811B (zh) | 信息呈现方法和装置 | |
| CN112492399B (zh) | 信息显示方法、装置及电子设备 | |
| CN110147283B (zh) | 一种显示内容切换显示方法、装置、设备及介质 | |
| CN113220381A (zh) | 一种点击数据展示方法和装置 | |
| CN111177634A (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 |