如何解决Ext JS - 如何预览本地视频文件?
在 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
可以播放(预览)本地视频文件吗?
解决方法
对于现代工具包: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';
}
}
}]
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。