如何在ExtJS中加载视频？避免Window组件生成新URL

当然可以用Ext.XTemplate来搞定这个需求！而且这是个相当合适的选择——因为XTemplate本质就是用来渲染HTML片段的工具，完全不会触发页面跳转或者URL修改，正好解决了你用Window组件遇到的痛点。

下面是具体的实现思路和代码示例：

1. 定义包含视频标签的XTemplate #

你可以直接在模板里写原生的<video>标签，根据需求设置视频源、控制栏、尺寸等属性：

// 定义视频模板
const videoTemplate = new Ext.XTemplate(
    '<div class="custom-video-wrapper">',
        '<video controls width="640" height="360" poster="{posterUrl}">',
            '<source src="{videoSrc}" type="video/mp4">',
            '<p>抱歉，你的浏览器不支持HTML5视频播放</p>',
        '</video>',
    '</div>'
);

2. 将模板渲染到现有容器中 #

不需要新建Window，你可以把渲染后的视频内容直接放到任意ExtJS容器里（比如Panel、Viewport，甚至页面上的普通DOM元素）：

// 创建一个承载视频的Panel
Ext.create('Ext.panel.Panel', {
    renderTo: Ext.getBody(),
    title: '内嵌视频播放器',
    width: 720,
    height: 500,
    style: 'margin: 20px',
    // 应用模板并传入视频数据
    html: videoTemplate.apply({
        videoSrc: 'your/video/path.mp4', // 替换为你的视频地址
        posterUrl: 'your/poster/image.jpg' // 可选：视频封面图
    })
});

3. 动态更新视频的小技巧 #

如果需要切换视频内容，只需要重新调用模板的apply方法，再更新容器的html属性即可，全程不会影响当前URL：

// 假设我们已经获取了这个Panel的实例
const videoPanel = Ext.ComponentQuery.query('panel[title="内嵌视频播放器"]')[0];
// 切换到新视频
videoPanel.update(videoTemplate.apply({
    videoSrc: 'new/video/path.mp4',
    posterUrl: 'new/poster/image.jpg'
}));

补充：关于Window的URL问题 #

顺便提一句：默认情况下ExtJS的Window组件是不会修改URL的，除非你配置了路由相关的属性（比如history、routeId这类）。如果之前的Window方案是因为路由配置导致的URL变化，也可以检查下配置项调整。不过用XTemplate的方案确实更轻量，完全规避了这类潜在问题。

内容的提问来源于stack exchange，提问作者sandy