最新版谷歌浏览器视频播放控件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>
应用效果

