ExtJS在語法上用起來和JS還是有一定區別，初始用起來很不習慣，但總起來說還是把視訊播放的功能做出來了，分享出來，以供參考。

使用ExtJS呼叫mediaplayer其實還是用的<embed>標籤或者使用<object></object>標籤，在我參考不少文章中，有將兩者一起使用的（難道做出來後你的畫面不會出現兩個視訊視窗嗎），但其實使用其中一種即可，而且屬性引數的設定是都有的，都可以進行設定，下面先介紹兩種寫法的基本屬性設定。

1.<embed>

<embed src="E:\\1.mov" id="mediaplayer2" autostart="true" showcontrols="false" showstatusbar="0" bgcolor="white" align="middle" currentPosition="0" width="500" height="300">
 

首先src:讀取視訊檔案的路徑，mediaplayer支援多種視訊檔案的播放，但貌似flv的不支援。

id的名字自己起，方便後面對視訊進行控制.

autostart:是否自動播放。

showcontrols：是否顯示播放、快進等控制按鈕。

showstatusbar：是否顯示播放進度等樣式。

currentPosition：當前播放的起始位置，0代表從頭播放，單位是秒。當然也可以進行小時分鐘的設定，這裡不做探討。

其他一些基本樣式屬性就不做介紹了。

2.<object>

<object height=300 width=500 align=center classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
         <param name="filename" value="E:\\test.mp4">
         <param name="showcontrols" value="false" />
        <param name="showstatusbar" value="1" />
        <param name="defaultFrame" value="" />
        <param name="playCount" value="1" />
        <param name="autoStart" value="-1"" />
        <param name="currentPosition" value="180" />
        <param name="invokeURLs" value="-1" />
        <param name="baseURL" value="" />
        <param name="volume" value="100" />
        <param name="stretchToFit" value="-1" />
        <param name="uiMode" value="mini" />'
        <param name="stretchToFit" value="0" />
        <param name="windowlessVideo" value="0" />
        <param name="enabled" value="-1"" />'
        <param name="enableContextMenu" value="-1" />
        </object>'
 

可以看到，一些基本屬性的設定是一樣的，這裡可以自己進行嘗試，喜歡用那種自己選。

另外使用<object >標籤時注意有一個classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">設定，這個其實是設定不同版本的mediaplayer的，而且引用的版本如果不對的話有時在你的電腦上視訊畫面是顯示不出來的。如果用這個方法顯示不出來，可以嘗試換幾個版本號試一下。

3.獲取播放時長

如果僅僅是簡單的播放，那麼只要用上述兩種標籤寫上檔案路徑寫對就可以播放了。

播放時長的獲取其實很簡單，呼叫的是一個物件的方法。

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

其中引數nn代表的是標籤裡面的id。

4.設定播放起始時間

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

time = pl.duration;獲取的是以秒記得總時長，可以根據自己需要設定，

pl.currentPosition = realtime;

realtime可以自己設定，此處就是設定起始時間的。

下面是一份我自己的Extjs的四個視訊畫面播放的程式碼：

Ext.onReady(function () {
    //提示
    Ext.QuickTips.init();
    
    //獲取視訊播放時長
    function getInfo(nn) {
        var pl = document.getElementById(nn);
        //var pl = document.getElementById("mediaplayer");
        var realtime = 0;
        var time = 0;
        time = pl.duration;
        realtime = time.toString().split('.')[0];
        realtime -= 5;
        if (realtime > 0)
            pl.currentPosition = realtime;
    }
    //視訊畫面1
    var video1 = Ext.create('Ext.panel.Panel', {
        id: 'media',
        html:
        '<embed src="E:\\test.mp4" id="mediaplayer" autostart="true" showcontrols="false" showstatusbar="0" bgcolor="white" align="middle" currentPosition="0" width="500" height="300">',
        listeners: {
            afterRender: function () {
                //setTimeout(getInfo, 1000);
                setTimeout(function () { getInfo("mediaplayer"); }, 1000);
            }
        }
    });
    //視訊畫面2
    var video2 = Ext.create('Ext.panel.Panel', {
        id: 'media1',
        html:
        '<embed src="D:\\1.avi" id="mediaplayer1" autostart="true" showcontrols="false" showstatusbar="0" bgcolor="white" align="middle" currentPosition="0" width="500" height="300">',
        listeners: {
            afterRender: function () {
                //setTimeout(getInfo, 1000);
                setTimeout(function () { getInfo("mediaplayer1"); }, 1000);
            }
        }
    });
    //視訊畫面3
    var video3 = Ext.create('Ext.panel.Panel', {
        id: 'media2',
        html:
        '<embed src="E:\\1.mov" id="mediaplayer2" autostart="true" showcontrols="false" showstatusbar="0" bgcolor="white" align="middle" currentPosition="0" width="500" height="300">',
        listeners: {
            afterRender: function () {
                //setTimeout(getInfo, 1000);
                setTimeout(function () { getInfo("mediaplayer2"); }, 1000);
            }
        }
    });
    //視訊畫面4
    var video4 = Ext.create('Ext.panel.Panel', {
        id: 'media3',
        html:
        '<embed src="E:\\1.mov" id="mediaplayer3" autostart="true" showcontrols="false" showstatusbar="0" bgcolor="white" align="middle" currentPosition="0" width="500" height="300">',
        listeners: {
            afterRender: function () {
                //setTimeout(getInfo, 1000);
                setTimeout(function () { getInfo("mediaplayer3"); }, 1000);
            }
        }
    });



 ////////////////////////////////////////////////////
    /////////////////////頁面總佈局///////////////////
    ////////////////////////////////////////////////////
    var viewport = Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
        {
            region: 'center',
            border: 0,
            bodyStyle: 'padding: 6px;',
            layout: 'border',
            items: [
                {
                    region: 'west',
                    width: 250,
                    border: 0,
                    layout: 'fit',
                    collapsible: true,
                    collapsed: false,  //控制頁面載入時選單是否展開
                    split: true,
                    items: tree1
                },
                {
                    region: 'center',
                    border: 0,
                    align: 'stretch',
                    layout: 'border',
                    //items:test
                    items: [
                         {
                             region: 'north',
                             border: 0,
                             height: '50%',
                             layout: 'border',
                             align: 'stretch',
                             split: true,
                             items: [
                                 {
                                     region: 'center',
                                     height:'100%',
                                     border: 0,
                                     layout: {
                                         xtype: 'box',
                                         align: 'stretch'
                                     },
                                     items: video1
                                 },
                                 {
                                     region: 'east',
                                     border: 0,
                                     width: '50%',
                                     split: true,
                                     layout: 'fit',
                                     align: 'stretch',
                                     items: video2
                                 }
                             ]
                         },
                         {
                             region: 'center',
                             border: 0,
                             layout: 'border',
                             split: true,
                             items: [
                                {
                                    region: 'center',
                                    border: 0,
                                    layout: 'fit',
                                    items: video3
                                },
                                {
                                    region: 'east',
                                    border: 0,
                                    width: '50%',
                                    split: true,
                                    layout: 'fit',
                                    items: video4
                                }
                             ]
                         }
                         ]
                }
            ]
        }]
    });




});