Ext JS - 如何预览本地视频文件？答案

【问题标题】：Ext JS - how to preview local video file?Ext JS - 如何预览本地视频文件？
【发布时间】：2021-04-28 03:29:29
【问题描述】：

在 extjs 中从给定 url 播放视频非常简单：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            itemId: 'foo',
            html: '<iframe width="300" height="200" src="//content.jwplatform.com/videos/HkauGhRi-640.mp4" frameborder="0" allowfullscreen></iframe>',
        });
    }
});

但是，使用filefield 播放（预览）本地视频文件很热门吗？

【问题讨论】：

您是否可以选择使用标准 Javascript（ie: 不是通过 ExtJS 之类的框架）。无论如何，您的代码似乎只是得到一个<iframe>，但您需要创建一个<video> 标签。 (1) 如果您的 “本地文件” 表示用户选择的视频（它是一个字节数组），或者它是否意味着您知道本地的 url，这并不明显文件（如“intro.mp4”）？
@VC。一 - 谢谢。不，我对 ExtJS 解决方案特别感兴趣。 <video> 标签应该在<iframe> 内部还是外部？

标签： video extjs filefield

【解决方案1】：

对于现代工具包：https://docs.sencha.com/extjs/7.3.1/modern/Ext.Video.html

Ext.create({
    xtype: 'panel',
    renderTo: Ext.getBody(),
    width: 800,
    height: 600,
    shadow: true,
    scrollable: true,
    title: 'My Video Panel',
    layout: 'hbox',
    items: [{
        xtype: 'video',
        onVideoplayerid0Play: function (media, eOpts) {
            var video = Ext.get(media.id).select('video:first-of-type ', true).elements[0];
            if (video.style.display == 'none') {
                video.style.display = '';
            }
        },
        url: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
        listeners: {
            painted: function (video) {
                video.play();
            },
            play: function(video) {
                // BUG fix. on auto play the black display is not disappeared. 
                document.getElementsByClassName('x-video-ghost')[0].style.display = 'none';
            }
        }
    }]
});

【讨论】：