Чи є спосіб зробити повноекранний відео HTML5?

Чи є спосіб відтворити відео на повноекранному екрані за допомогою HTML5 <video> тегу ?

А якщо це неможливо, чи хтось знає, чи є причина для цього рішення?

HTML 5 не дає можливості зробити повноекранний відеоролик, але паралельна специфікація Повноекранного забезпечує requestFullScreenспосіб, який дозволяє довільні елементи (у т.ч.<video> елементи) на повноекранному екрані.

Він має експериментальну підтримку в ряді браузерів .

Оригінальна відповідь:

З специфікації HTML5 (на момент написання: червень '09):

Користувацькі агенти не повинні надавати загальнодоступний API, щоб викликати показ відео у повноекранному режимі. Сценарій у поєднанні з ретельно продуманим відеофайлом може наштовхнути користувача на думку про те, що було показано діалогове вікно системи та запропонувати користувачеві пароль. Існує також небезпека "простого" роздратування, коли сторінки запускають повноекранні відео, коли натискаються посилання або переглядаються сторінки. Натомість функції інтерфейсу, призначені для користувальницького агента, можуть бути забезпечені, щоб легко дозволити користувачеві отримати режим відтворення на весь екран

Браузери можуть надавати користувальницький інтерфейс, але не повинні надавати програмований.

Зауважте, що вищезазначене попередження з тих пір вилучено із специфікації.

Більшість відповідей тут застарілі.

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

Я створив просту обгортку screenfull.js яка полегшує використання API повноекранного режиму.

Поточна підтримка браузера:

• Chrome 15+
• Firefox 10+
• Сафарі 5.1+

Зауважте, що багато мобільних браузерів, схоже, ще не підтримують повний екран .

Safari підтримує це наскрізь webkitEnterFullscreen.

Chrome повинен підтримувати його, оскільки це також WebKit, але помилки виходять.

Кріс Блізард з Firefox сказав, що вони виходять із власною версією повноекранного режиму, яка дозволить будь-якому елементу перейти на повний екран. наприклад полотно

Філіп Ягенштедт із Opera каже, що вони підтримають її в подальшому випуску.

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

webkitEnterFullScreen();

Це потрібно викликати на елементі відеотеги, наприклад, для повноекранного екранування першого відеотега на сторінці використання:

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

Примітка. Ця відповідь застаріла і більше не стосується.

Багато сучасних веб-браузерів реалізували FullScreen 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 -відео

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

Я сподіваюся, що я був досить зрозумілий: зрештою, я лише студент ІТ-французької мови, а не поет англійської мови :)

Побачимось!

Від 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;
}

Програмований спосіб зробити повноекранний зараз працює як у Firefox, так і в Chrome (в останніх версіях). Хороша новина полягає в тому, що тут була розроблена специфікація:

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

Наразі вам доведеться мати справу з префіксами постачальника, але всі деталі реалізації відстежуються на сайті MDN:

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

Ви можете змінити ширину та висоту на 100%, але це не покриє хром браузера або оболонку ОС.

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

Це має сенс, інакше ви можете зробити теги img, які охоплювали оболонку, або зробити теги h1, щоб весь екран був буквою.

Ні, неможливо мати повноекранне відео в html 5. Якщо ви хочете дізнатися причини, вам пощастило, оскільки зараз ведеться аргументація на повноекранному екрані. Дивіться список розсилки WHATWG і шукайте слово "відео". Я особисто сподіваюся, що вони надають повноекранний API в HTML 5.

Firefox 3.6 має повноекранний варіант для відео HTML5, клацніть правою кнопкою миші на відео та виберіть "повний екран".

Останні солов’ї Webkit також підтримують повноекранне відео HTML5, спробуйте програвач Sublime з останніми нічними та утримуйте Cmd / Ctrl, вибираючи параметр на весь екран.

Я думаю, що Chrome / Opera також підтримуватиме щось подібне. Сподіваємось, IE9 також підтримуватиме повний екран відео HTML5.

Це підтримується в WebKit через webkitEnterFullscreen .

Альтернативним рішенням було б, щоб браузер просто надав цю опцію в контекстному меню. Для цього не потрібно мати 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();
                    }
            }
    }

Якщо у вас є можливість визначити свій веб-сайт як прогресивний веб-додаток (PWA), то є також можливість використовувати display: "fullscreen"під manifest.json . Але це спрацює лише в тому випадку, якщо користувач додасть / встановить ваш веб-сайт на головний екран і відкриє його звідти.

Так. Що ж відбувається з відео HTML5, це те, що ви просто помістите <video>тег, і браузер надасть власний інтерфейс, а отже, можливість для перегляду в повноекранному режимі. Це дійсно робить життя набагато кращим для нас, користувачів, щоб не бачити "мистецтво", яке може зробити якийсь розробник, який грає з Flash :) Це також додає послідовності платформі, що приємно.

це просто, усі проблеми можна вирішити так,

1) завжди втеча виводить вас із повноекранного режиму (це не стосується введення в повноекранний режим через f11) вручну

2) тимчасово відобразити невеликий банер із повідомленням, що вводиться режим повноекранного відео (браузером)

3) блокувати дію на повноекранному екрані за замовчуванням, як це було зроблено для спливаючих вікон та локальної бази даних у html5 та api-адресах розташування тощо, тощо.

Я не бачу проблем із цим дизайном. хтось думає, що я щось пропустив?

Станом на Chrome 11.0.686.0 Dev-канал Chrome тепер має повноекранне відео.

Це можна зробити, якщо ви скажете користувачеві натиснути клавішу F11 (повний екран для багатьох браузерів), і ви розмістите відео на всій частині сторінки.

Якщо жодна з цих відповідей не спрацює (як це не зробили для мене), ви можете встановити два відео. Один для звичайного розміру та інший для повноекранного розміру. Коли ви хочете перейти на повний екран

1. Використовуйте javascript, щоб встановити атрибут 'src' на повноекранному екрані для атрибута 'src' для менших відео
2. Встановіть на повноекранному екрані video.currentTime таким же, як у малому відео.
3. Використовуйте css 'display: none', щоб приховати невелике відео та відобразити велике з позиціями via 'position: absolut' та 'z-index: 1000' або чимось справді високим.