Полноэкранная функция для пользовательского видеоплеера вышла из строя после обновления до Chrome версии 69, какие изменения могут вызвать это? - PullRequest
Новая
       9

Полноэкранная функция для пользовательского видеоплеера вышла из строя после обновления до Chrome версии 69, какие изменения могут вызвать это?

0 голосов
/ 12 октября 2018

Я работал над созданием пользовательского видеоплеера, я разработал полноэкранный режим, в котором проигрыватель масштабируется по размеру экрана в полноэкранном режиме.Но эта функция сломалась, когда вышло новое обновление Chrome.Он все еще работает в Chrome версии 65. Ниже приводится ссылка на скрипку, где я пытался повторить ошибку.

https://jsfiddle.net/dhwanilshah/0j31px2v/20/

Div игрока не масштабируется при масштабировании контейнерачто раньше случалось. 

// Scale to fit the screen, this scales the parent but not the children
function callFullScreen () {
  var el = document.getElementById('main-video-container')
  // Scaling parameters are calculated based on the screen sizes of the device to best fit the screen
  el.style.transform = 'scale(1.5, 1.5)'
  // Supports most browsers and their versions.
  const requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen
  if (requestMethod) { // Native full screen.
    requestMethod.call(el)
  }
}

Я протестировал эту функцию, и тот же код работает на Chrome версии 65, а не на Chrome версии 69.

Любые предложения приветствуются и приветствуются!

Заранее спасибо!

1 Ответ

0 голосов
/ 15 октября 2018

Используя инструменты разработки браузера, довольно легко понять, откуда это происходит.Перейдите в полноэкранный режим, осмотрите элемент - и вы увидите, что на панели «Стили» перечеркнуто transform: scale(1.5, 1.5);.

Посмотрите дальше вниз, чтобы увидеть, какие стили применяются, и вы обнаружите, что существует правило изтаблица стилей браузера с селектором :not(:root):-webkit-full-screen, который явно устанавливает transform: none !important; (и значения для многих других свойств с помощью! важный тоже.)

Самый простой обходной путь здесь будет то, что вы не применяетепреобразование в элемент, который вы «делаете» в полноэкранном режиме, но в дочерний элемент внутри него.Тогда селектор :not(:root):-webkit-full-screen больше не будет совпадать.

...