Как на компьютере сделать на весь экран видео

Обновлено: 04.07.2024

YouTube – самая популярная в мире интернет-площадка для просмотра и размещения видеороликов. Большинство пользователей для воспроизведения видео, перемотки, для переходов к видео в плейлисте, регулировки громкости и т.д, используют компьютерную мышь. Управление многими функциями можно осуществлять и с помощью так называемых горячих клавиш (комбинаций клавиш), что очень часто позволяет быстрее и удобнее выполнить желаемые действия.

Для управления воспроизведением видео можно использовать следующие клавиши:

F – нажатие клавиши позволяет перейти в полноэкранный режим, повторное нажатие переход в начальное состояние плеера.
Esc – также используется для выхода из полноэкранного режима.
Пробел (Space) – наверное, самая известная клавиша для остановки/возобновления воспроизведения видео. Также для этих целей можно использовать клавишу K (англ).
Комбинации клавиш Shift + < и Shift + > позволяют управлять скоростью воспроизведения видео.

управление скоростью воспроизведения на клавиатуре управление скоростью воспроизведения на клавиатуре

Для перемотки видео:

клавиши J и L – перемотка видеоролика на 10 секунд назад или вперед.
Клавиши стрелки влево/вправо (← и →) – перемотка видео назад/вперед на 5 секунд.
0 (ноль) – возврат к началу видео.
1-9 – переход к одной из частей видеоролика (обычно видео в YouTube разделено на 9 частей).
End – остановка видео и переход к следующему ролику.

Для регулировки громкости:

M – быстрое отключение/включение звука.
Стрелки вверх и вниз (↑ и ↓) – однократное нажатие увеличивает/уменьшает громкость на 5%, удержание клавиш – быстрый переход к отключению звука или переход к максимальному значению.

Для плейлистов:

N – переход к следующему видео.
P – переход к предыдущему видео.

Также вполне могут пригодиться и несколько других клавиш:

/ – выделение поля поиска, а клавиша Esc – выход из поля поиска.
Home и End – быстрый переход в самый верх или самый низ страницы с видео.

Напишите в комментариях какие горячие клавиши для видеохостинга YouTube вы еще знаете.

Для воспроизведения видероликов на компьютере используются специализированные программы - видеоплееры. Изменение размеров изображения в самых разных вариантах не относится к редким или особо сложным функциям, поэтому трудно найти версию такой программы, в которой будет отсутствовать команда развертывания изображения на весь экран.

Как открыть видео на весь экран
Почему видео перевернуто
Как настроить полноэкранный режим

Если для воспроизведения видео вы используете стандартный проигрыватель операционной системы Windows (Windows Media Player), то для переключения в полноэкранный режим задействуйте горячие клавиши Alt + Enter. Эта команда продублирована отдельной кнопкой, расположение которой зависит от версии программы. Например, в стандартном интерфейсе 12-ой версии эта маленькая квадратная пиктограмма размещена в правом нижнем углу окна. А если кликнуть изображение воспроизводимого ролика правой кнопкой мыши, то всплывет контекстное меню, в котором тоже будет присутствовать строка, соответствующая этой команде («Во весь экран») - можно использовать и ее.

В интерфейсах видеопроигрывателей других производителей размещение аналогичной кнопки может быть самым разным, но большинство из них используют для дублирования ее нажатия одно и то же сочетание горячих клавиш Alt + Enter. Контекстное меню других проигрывателей тоже будет содержать в разных вариантах команду развертывания изображения на весь экран. Например, в проигрывателе The KMPlayer в разделе «Отображение» этого меню есть целых пять вариантов этой команды. Они позволяют развернуть видео на полный экран таким способом, чтобы оно оставалось в окне приложения или было в безоконном режиме, сохраняло пропорции или растягивалось на полный экран, а также отображалось вместо фоновых «обоев» рабочего стола.

Для решения данной проблемы я задумал написать браузерное расширение под Chrome и Firefox. Идея такая: при проигрывании любого браузерного видео вызывается экранное меню, которое позволяет произвольно менять масштаб и соотношение сторон картинки.

iframe

Первая проблема, с которой я столкнулся, заключается в том, что видео на сайтах вовсе не обязательно располагается на основной странице, а может быть запрятано глубоко во вложенных iframe. Я решил просканировать все iframe-элементы и найти в каждом из них все элементы video. Кстати, этим решается и другая проблема — никогда не знаешь, где рекламное видео, а где сам фильм. Давайте для начала найдем их всех.

Функция getVideos вызывает рекурсивно сама себя до тех пор, пока в последнем iframe не будут найдены все элементы video. Все видео добавляются в массив ap_ext_space.videos. В качестве входного параметра функция getVideos принимает документ текущей страницы. При первом запуске берется главный документ. По ходу еще на каждое видео навешиваются обработчики, но об этом ниже.

Экранное меню

Хорошо, список всех видео-элементов у нас есть. Теперь как отобразить экранное меню? Просто добавим его блочный элемент к каждому видео. Да, тогда у нас будет много экранных меню, но в один момент времени все равно отображается только одно видео: один из рекламных роликов либо сам фильм. И меню вместе с ними будет показываться только одно.

Видео, как правило, располагается в родительском div-элементе. Добавим к нему в качестве последнего child наш div-элемент меню. Таким образом, экранное меню всегда будет отображаться поверх видео.

Изображение экранного меню закодируем в base64 в формате png с прозрачным альфа-каналом и поместим в ap_ext_space.imgUR, так как браузер не позволит нам подгрузить изображение с другого домена. Создание меню для каждого видео:

Если добавлять div-элемент экранного меню к видео таким образом: videoEl.parentNode.appendChild(div), то он будет отображаться поверх видео даже в полноэкранном режиме. Осталось только отцентрировать его, а точнее, сделать это со всеми привязанными к видео-элементам блочными элементами меню (они имеют размер 520x410):

Кстати, в итоге я решил вообще скрыть меню в оконном режиме и разрешить управление размерами видео только в полноэкранном режиме. В оконном в этом нет смысла.

Обработчики

Здесь, думаю, и так все понятно. На каждую кнопку экранного меню навешены обработчики клика, тача и еще — нажатия соответствующего сочетания клавиш, чтобы управлять видео даже при скрытом меню. Кнопки управляют величинами масштабов: ap_ext_space.scale, ap_ext_space.scalew и ap_ext_space.scaleh, увеличивая или уменьшая эти значения, а затем изменяется размер каждого найденного выше видео-элемента следующим образом:

Кроме того, я также повесил на обработчики событий видео seeked, abort, pause, play, playing, seeked на каждый video-элемент (в функции getVideos() выше) вызов единственной функции, которая перерисовывает экранное меню с пересчетом его координат, так как иногда оно «уезжает» при некоторых действиях пользователя. То же сделал и для события изменения размеров окна браузера.

Пространство имен

Вообще, что это за ap_ext_space такой? Дело в том, что все функции, которые используются для изменения размера видео, должны быть внедрены в соответствующую страницу (либо в основную, либо — в iframe). Поэтому я просто объединил эти функции, а также, вместе с ними — и фон экранного меню в формате base64 в единое пространстве имен. Инжектируется все это в код текущей вкладки браузера из бэкграунд-скрипта следующим образом:

Ну а внутри ap_ext_space уже срабатывает поиск всех iframe, затем — всех video внутри каждого из них, строится экранное меню с обработчиками и так далее.

Как пользоваться

Запустить видео. Кликнуть на иконку расширения. Развернуть видео на полный экран. Настраивать масштаб и соотношение сторон. Меню можно скрыть сочетанием клавиш ctrl+0.

Расширение называется Browser Video Tuner, оно бесплатное и в данный момент доступно в магазинах расширений Chrome и Firefox. Также, его, естественно, можно установить и во все Chrome-совместимые браузеры типа Opera, Yandex Browser и так далее. Стоит отметить, что расширение срабатывает не на всех сайтах с видео. Там, где доступ к iframe-элементам извне защищен политикой безопасности, то ни одного видео просто не будет найдено. И в консоли появится соответствующее предупреждение об этом. Меню в этом случае просто не отобразится. Но на Youtube и на многих онлайн-кинотеатрах все работает.

С некоторыми браузерами замечены небольшие проблемы. Например, в Yandex Browser выводимое изображение как-то портится и напоминает сильно пережатый jpeg. Но на функциональность это никак не влияет

Я искал способ выводить экранное меню в полноэкранном режиме просто поверх всего документа без внедрения его внутрь iframe-ов, чтобы не зависеть от политики безопасности браузера, и попробовать управлять размерами всего документа в целом, но пока мне это не удалось. Думаю, в дальнейшем расширение будет дополняться новыми функциями.

Благодаря комментариям к статье удалось улучшить расширение. Теперь видео распознается практически на всех сайтах. Для этого после клика на иконке расширения происходит встраивание кода не только в основной документ активной вкладки но и во все ее дочерние элементы iframe.

Версия 1.4 для Firefox уже доступна. Эта же версия для Chrome в данный момент находится на модерации.