Czy istnieje sposób, aby HTML5 wideo na pełnym ekranie?

Większość odpowiedzi tutaj są nieaktualne.

Jest teraz możliwe wprowadzenie dowolnego elementu na Pełny ekran za pomocąFullscreen API , chociaż nadal jest to niezły bałagan, ponieważ nie można po prostu wywołać div.requestFullScreen() we wszystkich przeglądarkach, ale trzeba użyć specyficznych dla przeglądarki metod prefiksowych.

Stworzyłem prosty wrapper screenfull.js , który ułatwia korzystanie z pełnoekranowego API.

Obecna obsługa przeglądarki to:

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

Zauważ, że wiele przeglądarek mobilnych nie obsługuje jeszcze opcji pełnoekranowej .

Safari obsługuje go przez webkitEnterFullscreen.

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

Chris Blizzard z Firefox powiedział, że wychodzą z własną wersją fullscreen, która pozwoli każdemu elementowi przejść na Pełny ekran. np. Canvas

Tak, Specyfikacja wideo HTML5 mówi, że nie obsługuje pełnoekranowego, ale ponieważ użytkownicy tego chcą, a każda przeglądarka będzie go obsługiwać, Specyfikacja się zmieni.

webkitEnterFullScreen();

To musi być wywołane na elemencie znacznika wideo, na przykład, aby uzyskać pełny ekran pierwszy znacznik wideo na stronie Użyj:

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

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

Myślę, że jeśli chcemy mieć otwarty sposób na oglądanie filmów w naszych przeglądarkach bez żadnych wtyczek zamkniętego źródła (i wszystkich naruszeń bezpieczeństwa, które pochodzi z historii wtyczki flash...). Tag musi znaleźć sposób, aby aktywować Pełny ekran.. Możemy obsłużyć to jak flash robi: aby zrobić fullscreen, musi być aktywowany przez kliknięcie lewym przyciskiem myszy i nic więcej, chodzi mi o to, że ActionScript nie jest możliwe, aby uruchomić pełnoekranowy przy ładowaniu Flasha przez przykład.

I hope Wyraziłem się jasno: w końcu jestem tylko francuskim informatykiem, a nie angielskim poetą:)

Do Zobaczenia!

Programowalny sposób na pełnoekranowy działa teraz zarówno w Firefoksie, jak i Chrome (w ich najnowszych wersjach). Dobrą wiadomością jest to, że spec został szkic tutaj:

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

Nadal będziesz musiał zająć się prefiksami dostawców, ale wszystkie szczegóły implementacji są śledzone w witrynie MDN:

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

Wiele nowoczesnych przeglądarek internetowych zaimplementowało pełnoekranowy API, który pozwala na skupienie całego ekranu na określonych elementach HTML. Jest to naprawdę świetne do wyświetlania multimediów interaktywnych, takich jak filmy w w pełni wciągającym środowisku.

Aby uruchomić przycisk pełnoekranowy, należy skonfigurować inny detektor zdarzeń, który wywoła funkcję requestFullScreen() po kliknięciu przycisku. Aby upewnić się, że będzie to działać we wszystkich obsługiwanych przeglądarkach, musisz również sprawdzić, czy requestFullScreen() jest dostępna i alternatywna dla wersji poprzedzonych przez Sprzedawcę (mozRequestFullScreen i 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();
}

Odniesienie: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Numer referencyjny: - http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

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

Decyzja projektowa jest spowodowana tym, że HTML mieszka w oknie przeglądarki. Wtyczki Flash nie są wewnątrz okna, więc mogą przejść na Pełny ekran.

To ma sens, w przeciwnym razie można zrobić znaczniki img, które pokrywały powłokę, lub zrobić znaczniki h1, aby cały ekran był literą.

Nie, nie jest możliwe, aby mieć pełnoekranowy film w html 5. Jeśli chcesz znać powody, masz szczęście, ponieważ bitwa argument dla pełnoekranowego toczy się właśnie teraz. Zobacz listę dyskusyjną WHATWG i poszukaj słowa "wideo". Osobiście mam nadzieję, że dostarczają one fullscreen API w HTML 5.

Firefox 3.6 ma opcję pełnego ekranu dla filmów HTML5, kliknij prawym przyciskiem myszy na wideo i wybierz "pełny ekran".

Najnowsze nightlies Webkit obsługuje również Pełny ekran wideo HTML5, spróbuj sublime player {[4] } z najnowszym nightly i przytrzymaj Cmd / Ctrl podczas wybierania opcji Pełny ekran.

Domyślam się, że Chrome / Opera również będzie obsługiwać coś takiego. Mam nadzieję, że IE9 będzie również obsługiwać Pełny ekran wideo HTML5.

Jest to obsługiwane w WebKit poprzez webkitEnterFullscreen.

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

Alternatywnym rozwiązaniem byłoby zmuszenie przeglądarki do podania tej opcji w menu kontekstowym. Nie trzeba mieć Javascript, aby to zrobić, choć mogłem zobaczyć, kiedy to będzie przydatne.

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

HTML 5 video robi pełnoekranowy w najnowszym Nightly build Safari, choć nie jestem pewien, jak to jest 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();
                    }
            }
    }

Tak. Cóż, co się dzieje z wideo HTML5 jest to, że po prostu umieścić tag <video> i przeglądarka da własny interfejs użytkownika, a tym samym możliwość oglądania na pełnym ekranie. To naprawdę sprawia, że życie u nas użytkowników jest o wiele lepsze, aby nie musieć oglądać "sztuki" jaką może zrobić jakiś programista bawiący się Flashem :) dodaje to również spójności platformie, co jest miłe.

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

1) have escape always take you out of fullscreen mode (Nie dotyczy to ręcznego wprowadzania trybu pełnoekranowego przez f11)

2) tymczasowo wyświetla mały baner z informacją o wprowadzeniu trybu pełnoekranowego wideo (przez przeglądarkę)

3) domyślnie blokuje działanie pełnoekranowe, tak jak zostało to zrobione dla wyskakujących okienek i lokalnej bazy danych w html5 i location api i etc, itd.

Nie widzę żadnych problemów z tym design. ktoś myśli, że coś przeoczyłem?

Od Chrome 11.0.686.0 dev channel Chrome ma teraz pełnoekranowe wideo.

Możesz to zrobić, jeśli powiesz użytkownikowi, aby nacisnął F11( Pełny ekran dla wielu przeglądarek), i umieścisz wideo na całej stronie.

Jeśli żadna z tych odpowiedzi nie działa (tak jak dla mnie), możesz ustawić dwa filmy. Jeden dla zwykłego rozmiaru, a drugi dla rozmiaru pełnoekranowego. Gdy chcesz przełączyć się na tryb pełnoekranowy

1. Użyj javascript, aby ustawić atrybut " src "wideo pełnoekranowego na atrybut" src " mniejszych filmów
2. Ustaw wideo.currentTime na filmie pełnoekranowym, aby był taki sam jak mały film.
3. Użyj css "display: none", aby ukryć mały film i wyświetlić duży z via 'position: absolute 'i' z-index:1000 ' lub coś naprawdę wysokiego.