Extjs窗口中的视频未扩展到全屏

时间:2015-11-19 06:43:12

标签: video extjs window screen

平台:Ext JS 4.2.1

浏览器: Chrome:版本46.0.2490.86米 Firefox 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

    }
});

测试fiddel https://fiddle.sencha.com/#fiddle/118s

Scenario screenshot is here

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

1 个答案:

答案 0 :(得分:0)

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

  

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

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