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?
html
video
html5-video
fullscreen
nicudotro
źródło
źródło
Odpowiedzi:
W HTML 5 nie ma możliwości, aby wideo było pełnoekranowe, ale równoległa specyfikacja Fullscreen dostarcza
requestFullScreen
metodę, 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):
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.
źródło
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:
Należy pamiętać, że wiele przeglądarek mobilnych nie obsługuje jeszcze opcji pełnego ekranu .
źródło
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.
źródło
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:
Uwaga: to jest nieaktualna odpowiedź i nie ma już znaczenia.
źródło
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ć, czyrequestFullScreen()
jest dostępny, i wrócić do wersji z prefiksem dostawcy (mozRequestFullScreen
iwebkitRequestFullscreen
), jeśli nie jest.Ź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
źródło
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
Z CSS
źródło
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
źródło
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ą.
źródło
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.
źródło
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.
źródło
Jest to obsługiwane w WebKit przez webkitEnterFullscreen .
źródło
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.
źródło
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.
źródło
Kompletne rozwiązanie:
źródło
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.źródło
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.źródło
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?
źródło
Począwszy od Chrome 11.0.686.0 kanale dev Chrome ma teraz pełnoekranowego wideo.
źródło
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.
źródło
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
źródło