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

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

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

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

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

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

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

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

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

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

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

да, 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" или что-то действительно высокое.