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

1

Я работаю над созданием пользовательского видеоплеера, я разработал полноэкранный режим, когда плеер масштабируется, чтобы соответствовать экрану в полноэкранном режиме. Но эта функция появилась, когда появилось новое обновление 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.

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

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

  • 3
    Добро пожаловать в переполнение стека! Как работает SO, весь ваш вопрос (включая любой необходимый код) должен быть в вашем вопросе, а не просто связан. Две причины: люди не должны уходить, чтобы помочь вам; и ссылки гниют, делая вопрос и его ответы бесполезными для людей в будущем. Пожалуйста, поместите минимальный воспроизводимый пример в вопрос, а не на jsFiddle (или в дополнение к jsFiddle). Подробнее: Как мне задать хороший вопрос?
  • 0
    Узнайте, как использовать инструменты разработки для браузера, используя те, которые довольно легко понять, откуда это происходит. Перейдите в полноэкранный режим, осмотрите элемент - и вы увидите, что transform: scale(1.5, 1.5); перечеркнут на панели «Стили». Посмотрите дальше вниз, чтобы увидеть, какие стили применяются, и вы обнаружите, что из таблицы стилей браузера есть правило с селектором :not(:root):-webkit-full-screen который явно устанавливает transform: none !important; (и значения для многих других свойств с! важным тоже.)
Показать ещё 3 комментария
Теги:
google-chrome
fullscreen

1 ответ

0
Лучший ответ

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню