Есть ли способ, чтобы сделать видео HTML5 в полноэкранном режиме?

большинство ответов здесь устарели.

теперь можно вывести любой элемент в полноэкранный режим с помощью полноэкранный API, хотя это все еще довольно беспорядок, потому что вы не можете просто позвонить div.requestFullScreen() во всех браузерах, но должны использовать браузер конкретные методы с префиксами.

Я создал простую обертку несколько экранов.js это упрощает использование полноэкранного API.

текущая поддержка браузеров это:

• Chrome 15+
• Firefox 10+
• Safari 5.1+

обратите внимание, что многие мобильные браузеры не поддерживают полноэкранный вариант пока.

сафари поддерживает его через webkitEnterFullscreen.

хром должен поддерживать его, так как это также WebKit, но ошибки.

Крис Blizzard из Firefox сказал, что они выходят со своей собственной версией полноэкранного режима, которая позволит любому элементу перейти в полноэкранный режим. например, холст

Филипп Ягенштедт из Опера сказал, что они будут поддерживать его в более поздней версии.

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

webkitEnterFullScreen();

Это должно быть вызвано на элементе тега видео, например, в полноэкранном режиме первый тег видео на странице использовать:

document.getElementsByTagName('video')[0].webkitEnterFullscreen();

обратите внимание: это устаревший ответ и больше не актуально.

Я думаю, что если мы хотим иметь открытый способ просмотра видео в наших браузерах без каких-либо плагинов с закрытым исходным кодом (и все нарушения безопасности, которые приходят с историей плагина flash...). Тег должен найти способ активировать полный экран.. Мы могли бы справиться с этим, как flash: чтобы сделать полноэкранный режим, он должен быть активирован левым щелчком мыши и ничего больше, я имею в виду, что ActionScript не может запускать полноэкранный режим при загрузке вспышки образец.

надеюсь, я был достаточно ясен: в конце концов, я только французский студент ИТ, а не английский поэт :)

Увидимся!

программируемый способ сделать полноэкранный режим теперь работает в Firefox и Chrome (в последних версиях). Хорошей новостью является то, что здесь была разработана спецификация:

http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

вам все равно придется иметь дело с префиксами поставщиков на данный момент, но все детали реализации отслеживаются в MDN сайт:

https://developer.mozilla.org/en/DOM/Using_full-screen_mode

многие современные веб-браузеры реализовали полноэкранный API, который позволяет вам уделять полноэкранное внимание определенным элементам HTML. Это действительно отлично подходит для отображения интерактивных медиа, таких как видео в полностью захватывающей среде.

чтобы заставить работать полноэкранную кнопку, вам нужно настроить другой прослушиватель событий, который вызовет requestFullScreen() функция при нажатии кнопки. Чтобы убедиться, что это будет работать во всех поддерживаемых браузерах, вам также нужно будет проверить смотрите, если requestFullScreen() доступна и резервная версия с префиксом поставщика (mozRequestFullScreen и webkitRequestFullscreen), если это не так.

var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

Ссылка: -https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Ссылка:- http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

вы можете изменить ширину и высоту, чтобы быть 100%, но это не будет охватывать браузер chrome или оболочку ОС.

дизайнерское решение связано с тем, что HTML живет внутри окна браузера. Плагины Flash не находятся внутри окна, поэтому они могут работать в полноэкранном режиме.

Это имеет смысл, иначе вы могли бы сделать теги img, которые покрывали оболочку, или сделать теги h1, чтобы весь экран был буквой.

нет, невозможно иметь полноэкранное видео в html 5. Если вы хотите знать причины, вам повезло, потому что битва за полноэкранный режим ведется прямо сейчас. Смотрите список рассылки WHATWG и ищите слово "видео". Я лично надеюсь, что они предоставляют полноэкранный API в HTML 5.

Firefox 3.6 имеет полноэкранный режим для видео HTML5, щелкните правой кнопкой мыши на видео и выберите "полноэкранный режим".

последние webkit nightlies также поддерживают полноэкранное видео HTML5, попробуйте возвышенное плеер С последней ночной и удерживайте Cmd / Ctrl при выборе полноэкранного режима.

Я думаю, Chrome / Opera также будет поддерживать что-то вроде этого. Надеюсь, IE9 также будет поддерживать полноэкранное видео HTML5.

Это поддерживается в WebKit через webkitEnterFullscreen.

из CSS

video {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

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

в то же время альтернативным решением было бы просто максимизировать окно (Javascript может обеспечить размеры экрана), а затем максимизировать видео в нем. Дайте ему идти, а затем просто посмотреть, если результаты приемлемы для ваших пользователей.

HTML 5 видео идет полноэкранный режим в последней ночной сборки Safari, хотя я не уверен, как это технически выполняется.

решение:

    function bindFullscreen(video) {
            $(video).unbind('click').click(toggleFullScreen);
    }

    function toggleFullScreen() {
            if (!document.fullscreenElement &&    // alternative standard method
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                            document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                            document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                            document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
            } 
            else {
                    if (document.exitFullscreen) {
                            document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                            document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                            document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                            document.webkitExitFullscreen();
                    }
            }
    }

да. Ну, что происходит с HTML5 Видео является то, что вы просто положить <video> тег и браузер даст ему собственный пользовательский интерфейс, и, таким образом, возможность для полноэкранного просмотра. Это действительно делает жизнь намного лучше для пользователей США, чтобы не видеть "искусство", которое может сделать какой-то разработчик, играющий с Flash :) он также добавляет последовательность к платформе, что приятно.

все просто, все проблемы можно решить так,

1) есть побег всегда вывести вас из полноэкранного режима (это не относится к ручному вводу полноэкранного режима через f11)

2) временно отобразить небольшой баннер с надписью полноэкранный режим видео вводится (браузером)

3) блок полноэкранный действие по умолчанию, как это было сделано для всплывающих окон и локальной базы данных в HTML5 и API местоположения и т. д. и т. п.

Я не вижу любые проблемы с этим дизайном. кто-то думает, что я что-то пропустил?

начиная с Chrome 11.0.686.0 dev channel Chrome теперь имеет полноэкранное видео.

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

Если ни один из этих ответов не работают (а они не для меня) вы можете настроить два видео. Один для обычного размера, а другой для полноэкранного размера. Когда вы хотите переключиться на полноэкранный режим

1. используйте javascript, чтобы установить атрибут " src "полноэкранного видео на атрибут" src " меньшего видео
2. настройки видео.currentTime на полноэкранном видео будет таким же, как и небольшое видео.
3. используйте css 'display:none', чтобы скрыть небольшое видео и отобразить большой с via 'position: absolute' и 'z-index:1000' или что-то действительно высокое.