视频未在 Extjs 窗口中扩展到全屏答案

【问题标题】：Video is not expanding to full screen in Extjs window视频未在 Extjs 窗口中扩展到全屏
【发布时间】：2016-02-21 04:27:02
【问题描述】：

平台：Ext JS 4.2.1

浏览器：铬：版本 46.0.2490.86 m 火狐 40.0.3 IE10、IE11

要求：

我在 EXTJS 窗口 html 内容中使用 HTML 5 视频标签。我使用的是自定义按钮而不是视频控件属性。

使用默认控件属性时，我无法在控制托盘中看到展开全屏图标。我添加了自定义按钮而不是默认控件。播放、暂停和音量按钮按预期工作正常，但全屏无法正常工作，即使我已将正确的监听器添加到全屏按钮，如下所示

// Event listener for the full-screen button

fullScreenButton.addEventListener("click", function() {
    if (video.requestFullscreen) {

        video.requestFullscreen();

    } 
   else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen(); // Firefox
    }
    else if (video.webkitRequestFullscreen) 
   {
        console.log('fullScreenButton clicked');

        video.webkitRequestFullscreen(); // Chrome and Safari

        console.log('Executed webkitRequestFullscreen()');
    }
    else if (video.msRequestFullscreen) {

        video.msRequestFullscreen(); // Internet Explorer

    }
});

测试fiddelhttps://fiddle.sencha.com/#fiddle/118s

Scenario screenshot is here

我想通过播放器中的全屏按钮按预期在全窗口屏幕中展开视频。任何帮助将不胜感激。

【问题讨论】：

标签： video extjs window screen

【解决方案1】：

如果您在点击全屏按钮之前打开开发者控制台，您会看到以下消息

全屏请求被拒绝，因为至少有一个文档的包含元素不是 iframe 或没有 “allowfullscreen”属性。

希望通过检查您可以找到解决方案。

【讨论】：