当前位置: 首页 > news >正文

最新版谷歌浏览器视频播放控件ElephVideoPlayer控件介绍

背景

        前面博文介绍了,通过allWebPlugin中间件,可以实现vlc在任何谷歌、Edge、火狐等现代浏览器上使用。但vlc控件同时只能播放一个视频,如果要同时播放多个视频,需要创建多个vlc控件,不利于系统集成开发。基于此,本人利用国庆假期,开发ElephVideoPlayer视频播放控件。

        ElephVideoPlayer视频播放控件同时最多支持64路视频播放,使用计算机硬件进行视频解码和渲染,极大的提升了视频播放效率。

alWebPlugin中间件核心优势

1、自创定位算法,实现插件与页面布局无缝衔接,极致用户体验
2、自创插件接口调用方法,保持原汁原味的接口调用及事件响应方式,轻松实现OA系统升级改造
3、支持同一页面或不同页面同时加载多个插件,适应各种复杂应用场景
4、自主创新、安全可控,不受浏览器插件技术限制,支持更多浏览器(谷歌、火狐、Edge、360浏览器等)。
5、创新沙箱机制,隔离插件与浏览器运行环境,增强插件与浏览器稳定性和安全性
6、攻克诸多技术难点,实现插件不修改、不注册也能使用,极大的降低插件开发量和维护量。

接口说明

        ElephVideoPlayer视频播放控件具有灵活的接口,可以控制每个窗口播放、暂停、继续播放文本水印等功能,调整控件显示窗口模式、全屏及退出全屏等功能,视频播放状态回调事件,方便业务系统集成调用。其classid为:{61f64db3-758a-4f18-a6c7-3ce757a1f869};其主要接口介绍如下:

1、打开视频接口

LONG Open(LONG nIndex,BSTR strUrl,BSTR strOptions)
接口说明:在第nIndex窗口打开strUrl视频。
参数说明:
nIndex      整数     窗口索引
strUrl      字符串   视频url
strOption   字符串   设置视频播放可选项,可以为空
返回值  0:成功创建视频通道,视频打开成功后,将自动进入播放状态;其他值:创建失败,可能正在打开其他url视频。

2、播放

LONG Play(LONG nIndex)
接口功能:当视频进入暂停状态时,调用本接口,播放视频。
接口说明:
nIndex       整型     窗口索引
返回值:
0:播放成功;其他值表示失败。

3、暂停

LONG Pause(LONG nIndex)
接口功能:当处于播放状态时,调用本接口,暂停视频。
接口说明:
nIndex       整型     窗口索引
返回值:
0:暂停成功;其他值表示失败。

4、关闭视频

LONG Close(LONG nIndex)
接口功能:关闭视频。
接口说明:
nIndex       整型     窗口索引
返回值:
0:表示成功;其他值表示失败。

5、添加文本水印

LONG AddTextWatermark(LONG nIndex,BSTR strName,BSTR strText,LONG nX, LONG nY,LONG fontSize,strFontName,ULONG color)
接口功能:在视频窗口指定位置添加文本水印内容,水印位置、字体、字体大小、颜色可设置。
接口说明:
nIndex           整型         窗口索引
strName          字符串       水印名称
strText          字符串       水印内容
nX               整型         X轴坐标
nY               整型         Y轴坐标
fontSize         整型         字体大小
strFontName      字符串       字体名称
color            无符号整型   字体颜色
返回值:
0:表示成功;其他值表示失败。

6、显示水印

LONG ShowTextWatermark(LONG nIndex, BSTR strName, LONG nX, LONG nY);
接口功能:设置指定窗口水印显示。
接口说明:
nIndex           整型         窗口索引
strName          字符串       水印名称
nX               整型         X轴坐标
nY               整型         Y轴坐标
返回值:
0:表示成功;其他值表示失败。

7、隐藏水印

LONG HideTextWatermark(LONG nIndex, BSTR strName);
接口功能:设置指定窗口水印显示。
接口说明:
nIndex           整型         窗口索引
strName          字符串       水印名称
返回值:
0:表示成功;其他值表示失败。

8、窗口显示方式

LONG SetLayoutModel(LONG nLayoutModel);
接口功能:设置窗口布局模式。如2*2;3*3;4*4等布局方式
接口说明:
nLayoutModel           整型         布局模式
返回值:
0:表示成功;其他值表示失败。

代码集成

产品集成比较简单,代码如下:

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<TITLE>对象 WebElephVideoPlayer 的 ATL 测试页</TITLE><script type="text/javascript" src="js/allWebPlugin.Common.v2.0.0.60.js"></script><script type="text/javascript" src="js/allWebPlugin.UI.v2.0.0.60.js"></script> <script type="text/javascript" src="js/allWebPlugin.Main.v2.0.0.60.js"></script>  <script type="text/javascript">function init(){//WebElephVideoPlayer.Open("http://vd2.bdstatic.com/mda-mi1dd05gmhwejdwn/sc/cae_h264/1630576203346678103/mda-mi1dd05gmhwejdwn.mp4","");//WebElephVideoPlayer.Open("E:\\mda-rid1kujhyyrtu0je.mp4","");var installPackageUrl = "http://127.0.0.1:6651/install/allwebPlugin_x86_v2.0.1.16_20240806.exe";var installPackageVersion = "2.0.0.28";	if(awp_IsInstall(installPackageVersion,installPackageUrl)){awp_CreatePlugin("WebElephVideoPlayer","{61f64db3-758a-4f18-a6c7-3ce757a1f869}");}}function Open(){WebElephVideoPlayer.Open(0,"http://demo-videos.qnsdk.com/only-video-1080p-60fps.m4s","rtsp_transport=tcp;timeout=3000000");//音频需要测试WebElephVideoPlayer.Open(1,"http://vd2.bdstatic.com/mda-mi1dd05gmhwejdwn/sc/cae_h264/1630576203346678103/mda-mi1dd05gmhwejdwn.mp4","");WebElephVideoPlayer.Open(2,"https://img.qunliao.info:443/4oEGX68t_9505974551.mp4","rtsp_transport=tcp;timeout=6000000");WebElephVideoPlayer.Open(3,"http://demo-videos.qnsdk.com/VR-Panorama-Equirect-Angular-4500k.mp4","");WebElephVideoPlayer.AddTextWatermark(1,"left-top","我爱北京天安门,\r\n天安门上太阳升。",10,10,50,"宋体",0xffeeeeee);WebElephVideoPlayer.AddTextWatermark(1,"left-bottom","我爱北京天安门,\r\n天安门上太阳升。",10,630,40,"楷体",0xffff0000);//WebElephVideoPlayer.HideTextWatermark(1,"left-bottom");WebElephVideoPlayer.SetLayoutModel(4);WebElephVideoPlayer.Open(4,"http://demo-videos.qnsdk.com/only-video-1080p-60fps.m4s","");WebElephVideoPlayer.Open(5,"https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4","");WebElephVideoPlayer.Open(6,"http://vd2.bdstatic.com/mda-mhhf5mr00yyhpfjs/1080p/cae_h264/1629284581057661229/mda-mhhf5mr00yyhpfjs.mp4","");WebElephVideoPlayer.Open(7,"http://vd2.bdstatic.com/mda-mhig1c3sw223mx8p/1080p/cae_h264/1629380139191731149/mda-mhig1c3sw223mx8p.mp4","");WebElephVideoPlayer.Open(8,"https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4","");WebElephVideoPlayer.Open(9,"https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4","");WebElephVideoPlayer.Open(10,"https://www.apple.com/105/media/us/iphone-x/2017/01df5b43-28e4-4848-bf20-490c34a926a7/films/feature/iphone-x-feature-tpl-cc-us-20170912_1920x1080h.mp4","");WebElephVideoPlayer.Open(11,"http://vd2.bdstatic.com/mda-mhhf5mr00yyhpfjs/1080p/cae_h264/1629284581057661229/mda-mhhf5mr00yyhpfjs.mp4","");WebElephVideoPlayer.Open(12,"http://vd2.bdstatic.com/mda-mhhf5mr00yyhpfjs/1080p/cae_h264/1629284581057661229/mda-mhhf5mr00yyhpfjs.mp4","");WebElephVideoPlayer.Open(13,"http://vd2.bdstatic.com/mda-mhhf5mr00yyhpfjs/1080p/cae_h264/1629284581057661229/mda-mhhf5mr00yyhpfjs.mp4","");WebElephVideoPlayer.Open(14,"http://vd2.bdstatic.com/mda-mhhf5mr00yyhpfjs/1080p/cae_h264/1629284581057661229/mda-mhhf5mr00yyhpfjs.mp4","");WebElephVideoPlayer.Open(15,"http://vd2.bdstatic.com/mda-mhhf5mr00yyhpfjs/1080p/cae_h264/1629284581057661229/mda-mhhf5mr00yyhpfjs.mp4","");}function Play(){	for(var i = 0;i < 64;i++){WebElephVideoPlayer.Play(i);}}function Pause(){for(var i = 0;i < 64;i++){WebElephVideoPlayer.Pause(i);}}function Close(){for(var i = 0;i < 64;i++){WebElephVideoPlayer.Close(i);}}function SetMute(){for(var i = 0;i < 64;i++){WebElephVideoPlayer.SetMute(i,true);}}function GetUrl(){alert(WebElephVideoPlayer.GetUrl(0));}function OnCreated(){console.log("OnCreated");}function OnQuit(){console.log("OnQuit");}function OnPlayStateChange(nIndex,lPlayState){/*0:	STATE_IDLE1:	STATE_OPENING2:	STATE_PLAYING3:	STATE_PAUSED4:	STATE_BUFFERING5:	STATE_CLOSING6:	STATE_ENDED7:	STATE_ERROR*/console.log("OnPlayStateChange:" + "nIndex: " + nIndex + ", lPlayState: " + lPlayState);}	</script>
</HEAD>
<BODY onload="init()">
<input type="button" value=" 打    开 "  onclick="Open();" id="open_button">
<input type="button" value=" 停    止 "  onclick="Close();" id="stop_button">  
<input type="button" value=" 播    放 "  onclick="Play();" id="play_button">
<input type="button" value=" 暂    停 "  onclick="Pause();" id="stop_button"> 
<input type="button" value=" 静    音 "  onclick="SetMute();" id="no_sound"> 
<input type="button" value=" 获取 URL "  onclick="GetUrl();" id="url">   
<input type="button" value=" 全    屏 "  onclick="WebElephVideoPlayer.fullscreen = true;">
<br />
<!--OBJECT ID="WebElephVideoPlayer" CLASSID="CLSID:61f64db3-758a-4f18-a6c7-3ce757a1f869" width="800" height="600"></OBJECT!-->
<canvas id="WebElephVideoPlayer" style="width:100%;height:99%"><p class="error">Sorry, It looks as though your browser does not support the canvas tag.</p>
</canvas>
</BODY>
</HTML>

应用效果

谷歌浏览器内16个画面同时显示效果
谷歌浏览器下其他布局播放效果
http://www.dtcms.com/a/474769.html

相关文章:

  • SAP MM供应商主数据维护接口分享
  • 第二章:模块的编译与运行-11 Preliminaries
  • 在手机上建网站小程序免费制作平台 知乎
  • 浑南区建设局网站做外贸在什么网站做
  • CR 分解
  • JavaScript 零基础入门:从语法到实战全解析
  • 怎么做付费的小说网站个人网站名字
  • LeetCode讲解篇之2320. 统计放置房子的方式数
  • 基本型电子商务网站成都专业网站建设哪家好
  • 2017年做那个网站致富四川建设信息网
  • 硬盘制为启动盘的过程 操作系统的引导过程
  • 局域网怎么做网站wordpress10款音乐插件
  • 建设企业网站企业网上银行登录官网开放平台登录
  • 【LeetCode】67. 二进制求和
  • 使用Onnxruntime对onnx模型量化介绍
  • 新乡专业做网站多少钱青岛李沧区网站建设
  • 线段树算法详解与实现
  • 前端开发入门:什么是前端?它有什么用?前端开发入门
  • 不开网店怎么做淘宝网站网站seo的主要优化内容
  • 基于 WebSocket 协议的实时弹幕通信机制分析-抖音
  • 做网站推广需要具备哪些条件WordPress已安装主题
  • vector、list、deque的差异
  • 开设网站维护公司个人网页主页
  • devexpress做网站简单门户网站模板
  • 没有注册公司可以建网站吗企业网站开发公司-北京公司
  • 企业级文件共享服务全解析:NFS 和 Samba 搭建指南与 Windows 乱码解决
  • Docker中的无法正常使用os.system
  • 中济建设官方网站慧聪网登录
  • 北京网站建设的网站的设计页面
  • python中mod函数怎么用