ExtJS实现视频播放功能以及设置视频播放起始时间调用mediaplayer

ExtJS在语法上用起来和JS还是有一定区别&＃xff0c;初始用起来很不习惯&＃xff0c;但总起来说还是把视频播放的功能做出来了&＃xff0c;分享出来&＃xff0c;以供参考。

使用ExtJS调用mediaplayer其实还是用的标签或者使用标签&＃xff0c;在我参考不少文章中&＃xff0c;有将两者一起使用的&＃xff08;难道做出来后你的画面不会出现两个视频窗口吗&＃xff09;&＃xff0c;但其实使用其中一种即可&＃xff0c;而且属性参数的设置是都有的&＃xff0c;都可以进行设置&＃xff0c;下面先介绍两种写法的基本属性设置。

1.

首先src:读取视频文件的路径&＃xff0c;mediaplayer支持多种视频文件的播放&＃xff0c;但貌似flv的不支持。

id的名字自己起&＃xff0c;方便后面对视频进行控制.

autostart:是否自动播放。

showcontrols&＃xff1a;是否显示播放、快进等控制按钮。

showstatusbar&＃xff1a;是否显示播放进度等样式。

currentPosition&＃xff1a;当前播放的起始位置&＃xff0c;0代表从头播放&＃xff0c;单位是秒。当然也可以进行小时分钟的设置&＃xff0c;这里不做探讨。

其他一些基本样式属性就不做介绍了。

2.&＃39;

可以看到&＃xff0c;一些基本属性的设置是一样的&＃xff0c;这里可以自己进行尝试&＃xff0c;喜欢用那种自己选。

另外使用标签时注意有一个classid&＃61;"clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">设置&＃xff0c;这个其实是设置不同版本的mediaplayer的&＃xff0c;而且引用的版本如果不对的话有时在你的电脑上视频画面是显示不出来的。如果用这个方法显示不出来&＃xff0c;可以尝试换几个版本号试一下。

3.获取播放时长

如果仅仅是简单的播放&＃xff0c;那么只要用上述两种标签写上文件路径写对就可以播放了。

播放时长的获取其实很简单&＃xff0c;调用的是一个对象的方法。

function getInfo(nn) {var pl &＃61; document.getElementById(nn);//var pl &＃61; document.getElementById("mediaplayer");var time &＃61; 0;time &＃61; pl.duration;}

其中参数nn代表的是标签里面的id。

4.设置播放起始时间

function getInfo(nn) {var pl &＃61; document.getElementById(nn);//var pl &＃61; document.getElementById("mediaplayer");var realtime &＃61; 0;var time &＃61; 0;time &＃61; pl.duration;realtime &＃61; time.toString().split(&＃39;.&＃39;)[0];realtime -&＃61; 5;if (realtime > 0)pl.currentPosition &＃61; realtime;}

time &＃61; pl.duration;获取的是以秒记得总时长&＃xff0c;可以根据自己需要设定&＃xff0c;

pl.currentPosition &＃61; realtime;

realtime可以自己设置&＃xff0c;此处就是设置起始时间的。

下面是一份我自己的Extjs的四个视频画面播放的代码&＃xff1a;

Ext.onReady(function () {//提示Ext.QuickTips.init();//获取视频播放时长function getInfo(nn) {var pl &＃61; document.getElementById(nn);//var pl &＃61; document.getElementById("mediaplayer");var realtime &＃61; 0;var time &＃61; 0;time &＃61; pl.duration;realtime &＃61; time.toString().split(&＃39;.&＃39;)[0];realtime -&＃61; 5;if (realtime > 0)pl.currentPosition &＃61; realtime;}//视频画面1var video1 &＃61; Ext.create(&＃39;Ext.panel.Panel&＃39;, {id: &＃39;media&＃39;,html:&＃39;&＃39;,listeners: {afterRender: function () {//setTimeout(getInfo, 1000);setTimeout(function () { getInfo("mediaplayer"); }, 1000);}}});//视频画面2var video2 &＃61; Ext.create(&＃39;Ext.panel.Panel&＃39;, {id: &＃39;media1&＃39;,html:&＃39;&＃39;,listeners: {afterRender: function () {//setTimeout(getInfo, 1000);setTimeout(function () { getInfo("mediaplayer1"); }, 1000);}}});//视频画面3var video3 &＃61; Ext.create(&＃39;Ext.panel.Panel&＃39;, {id: &＃39;media2&＃39;,html:&＃39;&＃39;,listeners: {afterRender: function () {//setTimeout(getInfo, 1000);setTimeout(function () { getInfo("mediaplayer2"); }, 1000);}}});//视频画面4var video4 &＃61; Ext.create(&＃39;Ext.panel.Panel&＃39;, {id: &＃39;media3&＃39;,html:&＃39;&＃39;,listeners: {afterRender: function () {//setTimeout(getInfo, 1000);setTimeout(function () { getInfo("mediaplayer3"); }, 1000);}}});/页面总布局///var viewport &＃61; Ext.create(&＃39;Ext.container.Viewport&＃39;, {layout: &＃39;border&＃39;,items: [{region: &＃39;center&＃39;,border: 0,bodyStyle: &＃39;padding: 6px;&＃39;,layout: &＃39;border&＃39;,items: [{region: &＃39;west&＃39;,width: 250,border: 0,layout: &＃39;fit&＃39;,collapsible: true,collapsed: false, //控制页面加载时菜单是否展开split: true,items: tree1},{region: &＃39;center&＃39;,border: 0,align: &＃39;stretch&＃39;,layout: &＃39;border&＃39;,//items:testitems: [{region: &＃39;north&＃39;,border: 0,height: &＃39;50%&＃39;,layout: &＃39;border&＃39;,align: &＃39;stretch&＃39;,split: true,items: [{region: &＃39;center&＃39;,height:&＃39;100%&＃39;,border: 0,layout: {xtype: &＃39;box&＃39;,align: &＃39;stretch&＃39;},items: video1},{region: &＃39;east&＃39;,border: 0,width: &＃39;50%&＃39;,split: true,layout: &＃39;fit&＃39;,align: &＃39;stretch&＃39;,items: video2}]},{region: &＃39;center&＃39;,border: 0,layout: &＃39;border&＃39;,split: true,items: [{region: &＃39;center&＃39;,border: 0,layout: &＃39;fit&＃39;,items: video3},{region: &＃39;east&＃39;,border: 0,width: &＃39;50%&＃39;,split: true,layout: &＃39;fit&＃39;,items: video4}]}]}]}]});});