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

144

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?

nicudotro
źródło
@MiffTheFox Lista kontrolna funkcji obsługi HTML5 w nowoczesnej przeglądarce można znaleźć tutaj: findmebyip.com/litmus/#html5-web-applications
ghoppe Kwietnia
## Pierwszy na świecie prawdziwy pełnoekranowy film HTML5 ## blog.jilion.com/2011/07/27/ ... Zobacz także: wiki.mozilla.org/Gecko:FullScreenAPI
Wouter Dorgelo

Odpowiedzi:

90

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.

Quentin
źródło
72

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 .

Sindre Sorhus
źródło
To nie działa. Element iframe1 ma element potomny iframe2 z iframe2, gdy zastosowany jest tryb pełnoekranowy, nic nie robi.
1
@YumYumYum from readme: "Jeśli twoja strona znajduje się wewnątrz <iframe>, będziesz musiał dodać atrybut allowfullscreen (+ webkitallowfullscreen i mozallowfullscreen)."
Sindre Sorhus
Wydaje się, że wersja demonstracyjna nie działa z domyślną przeglądarką systemu Android 4.3.
Kai Noack
@SindreSorhus czy to obsługuje teraz przeglądarki mobilne?
Udara Suranga
31

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.

heff
źródło
2
Ta odpowiedź jest nieaktualna, zobacz odpowiedź Sindre Sorhus (a następnie zagłosuj, aby wyprzedziła te nieaktualne odpowiedzi)
Matt pali się
15
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.

jpkeisala
źródło
Ta odpowiedź jest nieaktualna, zobacz odpowiedź Sindre Sorhus (a następnie zagłosuj, aby wyprzedziła te nieaktualne odpowiedzi)
Matt pali się
Praca w Chrome lub Chromium oraz w Node-Webkit!
Vish
8

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

Pon.
źródło
6

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!


źródło
6

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;
}
Montaser
źródło
2
To nie jest tak naprawdę pełny ekran.
RamenChef
5

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

Ernest
źródło
3

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ą.

Rich Bradshaw
źródło
3

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.

calavera.info
źródło
Duże +1 za link do tej listy mailingowej.
mwilcox
3

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.

Ochrypły
źródło
2

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.

Andre
źródło
1

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.

st3v3
źródło
Dlaczego głosowanie negatywne? Safari 5 ma tryb pełnoekranowy w swoich natywnych kontrolkach. (Ale bez API!
Grrrr
1

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();
                    }
            }
    }
mmm
źródło
0

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.

Jernej Jerin
źródło
-1

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.

SeniorShizzle
źródło
-1

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?

AMK
źródło
1
To nie odpowiada na pytanie.
RamenChef
-1

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

Mohamed Mansour
źródło
-1

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.

Adrian B.
źródło
-1

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.
Leon
źródło