Question

点击我的全屏按钮，视频会延伸到原始尺寸，但不会全屏显示。但我不想在两边以上的黑条。没有使用的css属性可以解释这一点。要将视频属性设置为width: 100%;和height: 100%;或自动无效。全屏在Firefox中完美运行，但不适用于Chrome。我使用以下代码进入全屏模式：

$('.fullscreen-btn').click(function () {
            if (movie[0].requestFullscreen) {
              movie[0].requestFullscreen();
            } else if (movie[0].mozRequestFullScreen) {
                movie[0].mozRequestFullScreen();               

            } else if (movie[0].webkitRequestFullscreen) {
              movie[0].webkitRequestFullscreen();
            }
            ...
});

有谁知道如何解决这个问题？

Answer 1

找到解决方案！问题是Chrome的默认html5视频控件与我的自定义控件之间存在冲突。感谢这个问题的回答：hide video controls in fullscreen mode 我发现使用css规则解决了问题：

video::-webkit-media-controls {
  display:none !important;
}

Google Chrome中的全屏模式无效

1 个答案: