Czy istnieje sposób, aby wideo HTML5 było pełnoekranowe?

Czy istnieje sposób na odtworzenie wideo na pełnym ekranie za pomocą <video>tagu HTML5 ?

A jeśli nie jest to możliwe, to czy ktoś wie, czy jest powód takiej decyzji?

W HTML 5 nie ma możliwości, aby wideo było pełnoekranowe, ale równoległa specyfikacja Fullscreen dostarcza requestFullScreenmetodę, która pozwala na tworzenie pełnoekranowych dowolnych elementów (w tym <video>elementów).

Ma eksperymentalne wsparcie w wielu przeglądarkach .

Oryginalna odpowiedź:

Ze specyfikacji HTML5 (w czasie pisania: czerwiec 2009):

Klienty użytkownika nie powinny udostępniać publicznego interfejsu API do wyświetlania filmów na pełnym ekranie. Skrypt w połączeniu ze starannie spreparowanym plikiem wideo może skłonić użytkownika do myślenia, że ​​wyświetlone zostało systemowe okno dialogowe i poprosić użytkownika o podanie hasła. Istnieje również niebezpieczeństwo „zwykłej” irytacji, ponieważ strony wyświetlają filmy na pełnym ekranie po kliknięciu linków lub nawigacji po stronach. Zamiast tego można zapewnić funkcje interfejsu specyficzne dla agenta użytkownika, aby umożliwić użytkownikowi łatwe uzyskanie trybu odtwarzania na pełnym ekranie.

Przeglądarki mogą zapewniać interfejs użytkownika, ale nie powinny zapewniać interfejsu programowalnego.

Zauważ, że powyższe ostrzeżenie zostało usunięte ze specyfikacji.

Większość odpowiedzi tutaj jest nieaktualna.

Teraz można przenieść dowolny element do trybu pełnoekranowego za pomocą interfejsu API pełnego ekranu , chociaż nadal jest to niezły bałagan, ponieważ nie można po prostu wywoływać div.requestFullScreen()we wszystkich przeglądarkach, ale trzeba użyć metod z prefiksem specyficznych dla przeglądarki.

Stworzyłem proste opakowanie screenfull.js, które ułatwia korzystanie z pełnoekranowego API.

Obecna obsługa przeglądarek to:

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

Należy pamiętać, że wiele przeglądarek mobilnych nie obsługuje jeszcze opcji pełnego ekranu .

Safari obsługuje to przez webkitEnterFullscreen.

Chrome powinien go obsługiwać, ponieważ jest to również WebKit, ale błędy się pojawiają.

Chris Blizzard z Firefoksa powiedział, że wychodzi z własną wersją pełnego ekranu, która pozwoli każdemu elementowi przejść do pełnego ekranu. np. płótno

Philip Jagenstedt z Opery mówi, że będą go wspierać w późniejszym wydaniu.

Tak, specyfikacja wideo HTML5 mówi, że nie ma obsługi pełnego ekranu, ale ponieważ użytkownicy tego chcą, a każda przeglądarka będzie go obsługiwać, specyfikacja ulegnie zmianie.

webkitEnterFullScreen();

Należy to wywołać w elemencie tagu wideo, na przykład, aby wyświetlić w trybie pełnoekranowym pierwszy tag wideo na stronie, użyj:

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

Uwaga: to jest nieaktualna odpowiedź i nie ma już znaczenia.

Wiele nowoczesnych przeglądarek internetowych zaimplementowało interfejs API FullScreen, który umożliwia skupienie się na pełnym ekranie na niektórych elementach HTML. Jest to naprawdę świetne do wyświetlania multimediów interaktywnych, takich jak filmy, w całkowicie wciągającym środowisku.

Aby przycisk pełnego ekranu działał, musisz skonfigurować inny odbiornik zdarzeń, który będzie wywoływał requestFullScreen()funkcję po kliknięciu przycisku. Aby upewnić się, że to zadziała we wszystkich obsługiwanych przeglądarkach, będziesz musiał również sprawdzić, czy requestFullScreen()jest dostępny, i wrócić do wersji z prefiksem dostawcy ( mozRequestFullScreeni webkitRequestFullscreen), jeśli nie jest.

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();
}

Źródła: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Odniesienia: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -filmy

Myślę, że jeśli chcemy mieć otwarty sposób oglądania filmów w naszych przeglądarkach bez żadnych zamkniętych wtyczek źródłowych (i wszystkich naruszeń bezpieczeństwa, które towarzyszą historii wtyczki flash ...). Tag musi znaleźć sposób na aktywację pełnego ekranu. Moglibyśmy sobie z tym poradzić jak flash: aby zrobić pełny ekran, trzeba go aktywować lewym przyciskiem myszy i nic więcej, mam na myśli to, że ActionScript nie może uruchomić pełny ekran przy ładowaniu flasha na przykład.

Mam nadzieję, że powiedziałem wystarczająco jasno: w końcu jestem tylko francuskim studentem informatyki, a nie angielskim poetą :)

Do zobaczenia!

Z 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;
}

Programowalny sposób na pełnoekranowy działa teraz zarówno w przeglądarce Firefox, jak i Chrome (w ich najnowszych wersjach). Dobra wiadomość jest taka, że ​​specyfikacja została przygotowana tutaj:

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

Na razie nadal będziesz musiał radzić sobie z prefiksami dostawców, ale wszystkie szczegóły implementacji są śledzone w witrynie MDN:

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

Możesz zmienić szerokość i wysokość na 100%, ale nie obejmie to chromu przeglądarki ani powłoki systemu operacyjnego.

Decyzja projektowa wynika z faktu, że HTML znajduje się w oknie przeglądarki. Wtyczki Flash nie znajdują się w oknie, więc mogą wyświetlać się na pełnym ekranie.

Ma to sens, w przeciwnym razie można by stworzyć tagi img, które zakrywałyby powłokę, lub stworzyć tagi h1 tak, aby cały ekran był literą.

Nie, nie można mieć pełnoekranowego wideo w html 5. Jeśli chcesz poznać powody, masz szczęście, ponieważ toczy się teraz walka argumentów o pełny ekran. Zobacz listę mailingową WHATWG i poszukaj słowa „wideo”. Osobiście mam nadzieję, że udostępnią pełnoekranowe API w HTML 5.

Firefox 3.6 ma opcję pełnego ekranu dla wideo HTML5, kliknij prawym przyciskiem myszy wideo i wybierz „pełny ekran”.

Najnowsze nightlies Webkit obsługują również pełnoekranowe wideo HTML5, wypróbuj odtwarzacz Sublime z najnowszym nightly i przytrzymaj Cmd / Ctrl podczas wybierania opcji pełnego ekranu.

Wydaje mi się, że Chrome / Opera również będzie obsługiwać coś takiego. Mam nadzieję, że IE9 będzie również obsługiwał pełnoekranowe wideo HTML5.

Jest to obsługiwane w WebKit przez webkitEnterFullscreen .

Alternatywnym rozwiązaniem byłoby po prostu udostępnienie tej opcji przez przeglądarkę w menu kontekstowym. Nie trzeba mieć do tego Javascript, chociaż mogłem zobaczyć, kiedy będzie to przydatne.

W międzyczasie alternatywnym rozwiązaniem byłoby po prostu zmaksymalizowanie okna (JavaScript może podać wymiary ekranu), a następnie zmaksymalizowanie zawartego w nim wideo. Spróbuj, a następnie po prostu sprawdź, czy wyniki są akceptowalne dla użytkowników.

W najnowszej nocnej wersji przeglądarki Safari wideo HTML 5 jest wyświetlane w trybie pełnoekranowym, chociaż nie jestem pewien, jak jest to technicznie wykonane.

Kompletne rozwiązanie:

    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();
                    }
            }
    }

Jeśli masz możliwość zdefiniowania swojej witryny jako progresywnej aplikacji internetowej (PWA), możesz również użyć tej opcji display: "fullscreen"w pliku manifest.json . Ale zadziała to tylko wtedy, gdy użytkownik doda / zainstaluje aplikację internetową na ekranie głównym i otworzy ją stamtąd.

Tak. Cóż, to, co dzieje się z wideo HTML5, polega na tym, że po prostu umieszczasz <video>tag, a przeglądarka udostępni swój własny interfejs użytkownika, a tym samym możliwość wyświetlania na pełnym ekranie. To naprawdę sprawia, że ​​życie jest znacznie lepsze dla nas, użytkowników, że nie musimy patrzeć na "grafikę", którą mógłby zrobić jakiś programista grający we Flashu :) Dodaje również spójności platformie, co jest miłe.

to proste, wszystkie problemy można rozwiązać w ten sposób,

1) Miej ucieczkę, która zawsze wyprowadza cię z trybu pełnoekranowego (nie dotyczy to ręcznego przejścia do pełnego ekranu za pomocą klawisza f11)

2) tymczasowo wyświetl mały baner z informacją, że włączony jest tryb wideo na pełnym ekranie (przez przeglądarkę)

3) domyślnie blokuj akcję pełnoekranową, tak jak zostało to zrobione dla wyskakujących okienek i lokalnej bazy danych w html5 i api lokalizacji itp., Itd.

nie widzę żadnych problemów z tym projektem. ktoś myśli, że coś przegapiłem?

Począwszy od Chrome 11.0.686.0 kanale dev Chrome ma teraz pełnoekranowego wideo.

Możesz to zrobić, jeśli powiesz użytkownikowi, aby nacisnął klawisz F11 (pełny ekran w wielu przeglądarkach) i umieścisz wideo na całej treści strony.

Jeśli żadna z tych odpowiedzi nie działa (tak jak w moim przypadku), możesz ustawić dwa filmy. Jeden dla zwykłego rozmiaru, a drugi dla pełnego ekranu. Gdy chcesz przełączyć się na pełny ekran

1. Użyj javascript, aby ustawić atrybut „src” pełnoekranowego wideo na atrybut „src” mniejszych filmów
2. Ustaw video.currentTime na pełnoekranowym wideo tak, aby był taki sam jak mały film.
3. Użyj css „display: none”, aby ukryć małe wideo i wyświetlić duże z „position: bezwzględna” i „z-index: 1000” lub czymś naprawdę wysokim.