EXTJS 3.x 播放视频完美解决。

最新推荐文章于 2025-06-11 15:17:07 发布

原创最新推荐文章于 2025-06-11 15:17:07 发布 · 913 阅读

0 ·

CC 4.0 BY-SA版权

编程专栏收录该内容

160 篇文章

订阅专栏

博主与同事研究后，分享查看媒体的代码思路。新建一个window，在pannel中直接放置html，其标签可包含视频、图片等多种格式媒体，通过刷新html来查看列表记录中的图片或视频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码，跟同事研究半天。

查看图片已经写了，再写一篇视频的。

思路：新建一个window，再pannel中直接放html，html标签中可以是任何格式的媒体，视频，图片，mp3，input，div,li等等。然后再刷新里面的html，达到查看列表记录中图片或者视频的目的。

var showPig = {
			text: '查看工单视频',
			width: 85,
			disabled: false,
			iconCls: 'download',
			handler:function() {
				var	selectedRecord = grid.getSelectionModel().getSelected();
	            if(selectedRecord == null)
	            {
	                showAlertMsg("没有选择记录",grid);
	                return;
	            }
	            var imgPath = selectedRecord.data.imgPath;
	            html = '<div style="width:100%;height:100%;"><video id="videoSource" style="width:100%;height:100%;" src="'+Ext.contextPath+imgPath+'" controls="controls">您的浏览器不支持 video 标签。</video><div>';//
	            songPlayer.show();
	            Ext.getCmp("playerPanel").body.update(html); 
	          //Ext.getCmp('imgsrc').initialConfig.autoEl.src = Ext.contextPath+imgPath;
		}
	};
	menuArr.push(showPig);
	menuArr.push('-');

 var playerForm=new Ext.Panel({  
        xtype : 'panel',  
        id : 'playerPanel',  
        width:600,  
        height:600, 
        html:""
    })
    var songPlayer = new Ext.Window({  
        layout : 'fit',  
        width:600,  
        height:600,  
        modal : true,  
        frame: true,
        closable : false, 
        items : [playerForm]  ,
    	buttons: [{
			id : 'ensure2',
			text: '确定',
			handler: function() {
				songPlayer.hide();
				Ext.getCmp("playerPanel").body.update("");  
			}
		},{
			text: '关闭',
			handler: function() {
				songPlayer.hide();
				Ext.getCmp("playerPanel").body.update("");  
//				var oVideo = document.getElementById('videoSource');
//				oVideo.pause();
//				  Ext.getCmp('playerPanel').html ="";
			}
		}]
    });