HTML5 videoyu tam ekran yapmanın bir yolu var mı?

HTML5 <video>etiketini kullanarak tam ekran video oynatmanın bir yolu var mı ?

Ve eğer bu mümkün değilse, bu kararın bir nedeni olup olmadığını bilen var mı?

HTML 5, bir video tam ekran yapmak için bir yöntem sağlar, ancak paralel Tam Ekran özellikleri malzemeleri requestFullScreendahil (rasgele elemanları olanak sağlayan bir yöntem <video>elemanları) tam ekran yapılacaktır.

It has bir dizi tarayıcı deneysel destek .

Orijinal cevap:

Gönderen HTML5 spec (: June '09 yazma anda):

Kullanıcı aracıları, videoların tam ekran gösterilmesini sağlamak için herkese açık bir API sağlamamalıdır. Dikkatli bir şekilde hazırlanmış bir video dosyasıyla birleştirilen bir komut dosyası, kullanıcıyı sistem kalıcı bir iletişim kutusunun gösterildiğini düşünmesi için kandırabilir ve kullanıcıdan bir parola isteyebilir. Ayrıca, bağlantılar tıklandığında veya sayfalarda gezinildiğinde sayfalar tam ekran videolar başlatırken "salt" can sıkma tehlikesi de vardır. Bunun yerine, kullanıcının tam ekran oynatma modunu kolayca elde etmesini sağlamak için kullanıcı aracısına özgü arayüz özellikleri sağlanabilir.

Tarayıcılar bir kullanıcı arayüzü sağlayabilir, ancak programlanabilir bir arayüz sağlamamalıdır.

Yukarıdaki uyarının o zamandan bu şartnameden kaldırıldığını unutmayın.

Buradaki cevapların çoğu modası geçmiş.

Tam Ekran API'sını kullanarak herhangi bir öğeyi tam ekrana getirmek artık mümkün , ancak yine div.requestFullScreen()de tüm tarayıcılarda arama yapamayacağınız , ancak tarayıcıya özgü ön ekli yöntemleri kullanmak zorunda olduğunuz için oldukça karışık .

Tam Ekran API'sını kullanmayı kolaylaştıran basit bir sarmalayıcı screenfull.js oluşturdum .

Mevcut tarayıcı desteği:

• Chrome 15+
• Firefox 10+
• Safari 5.1 ve üzeri

Birçok mobil tarayıcının henüz tam ekran seçeneğini desteklemediğini unutmayın .

Safari bunu destekliyor webkitEnterFullscreen.

Chrome , WebKit olduğu için de desteklemelidir, ancak hatalar çıkarır.

Firefox'tan Chris Blizzard, herhangi bir öğenin tam ekrana geçmesine izin verecek şekilde kendi tam ekran sürümüyle çıkacaklarını söyledi. örneğin Tuval

Opera'dan Philip Jagenstedt, daha sonraki bir sürümde destekleyeceklerini söyledi.

Evet, HTML5 video özelliği tam ekranı desteklemediğini söylüyor, ancak kullanıcılar istediği ve her tarayıcı bunu destekleyeceği için özellik değişecek.

webkitEnterFullScreen();

Örneğin, sayfa kullanımındaki ilk video etiketini tam ekran görüntülemek için video etiketi öğesinde bunun çağrılması gerekir:

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

Uyarı: Bu eski bir yanıttır ve artık alakalı değildir.

Birçok modern web tarayıcısı, belirli HTML öğelerine tam ekran odaklama yapmanıza olanak tanıyan bir FullScreen API uyguladı. Bu, tamamen sürükleyici bir ortamda videolar gibi etkileşimli ortamları görüntülemek için gerçekten harika.

Tam ekran düğmesinin çalışmasını sağlamak için requestFullScreen(), düğmeyi tıklattığınızda işlevi çağıracak başka bir olay dinleyicisi ayarlamanız gerekir . Bunun desteklenen tüm tarayıcılarda çalışacağından emin olmak requestFullScreen()için, satıcının ön ekli sürümlerine ( mozRequestFullScreenve webkitRequestFullscreen) uygun olup olmadığını ve geri dönüp dönmediğini kontrol etmeniz gerekecektir .

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

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

Kapalı kaynak eklentileri (ve flash eklentisinin geçmişi ile gelen tüm güvenlik ihlalleri olmadan) tarayıcılarımızdaki videoları görüntülemek için açık bir yol olmasını istiyorsak düşünüyorum. Etiketin tam ekranı etkinleştirmenin bir yolunu bulması gerekiyor .. Flash'ın yaptığı gibi halledebiliriz: tam ekran yapmak için, farenizle sol tıklamayla etkinleştirilmeli ve başka bir şey yok, yani ActionScript tarafından başlatılamıyor örneğin flaş yüklenirken tam ekran.

Umarım yeterince açıkım: Sonuçta ben sadece bir Fransız şair öğrenciyim, ingiliz bir şair değilim :)

Görüşürüz!

CSS'den

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

Tam ekran yapmanın programlanabilir bir yolu şu anda hem Firefox hem de Chrome'da (en son sürümlerinde) çalışıyor. İyi haber şu ki, burada bir spesifikasyon taslağı hazırlanmıştır:

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

Şimdilik satıcı önekleriyle uğraşmanız gerekecek, ancak tüm uygulama ayrıntıları MDN sitesinde izleniyor:

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

Genişliği ve yüksekliği% 100 olarak değiştirebilirsiniz, ancak tarayıcı kromunu veya OS kabuğunu kapsamaz.

Tasarım kararı, HTML'nin tarayıcı penceresinin içinde kalmasıdır. Flash eklentileri pencerenin içinde değildir, bu nedenle tam ekrana geçebilirler.

Bu mantıklıdır, aksi takdirde kabuğu kaplayan img etiketleri oluşturabilir veya tüm ekran bir harf olacak şekilde h1 etiketleri oluşturabilirsiniz.

Hayır, html 5'te tam ekran videoya sahip olmak mümkün değildir. Nedenlerini bilmek istiyorsanız, şanslısınız çünkü tam ekran için tartışma savaşı şu anda yapılmaktadır. WHATWG posta listesine bakın ve "video" kelimesini arayın. Ben şahsen HTML 5 tam ekran API sağlamak umuyoruz.

Firefox 3.6, HTML5 videoları için tam ekran seçeneğine sahiptir, videoya sağ tıklayın ve 'tam ekran'ı seçin.

En son Webkit geceleri de tam ekran HTML5 videoyu destekler, en son geceyi Sublime oynatıcısını deneyin ve tam ekran seçeneğini seçerken Cmd / Ctrl tuşunu basılı tutun.

Sanırım Chrome / Opera da böyle bir şeyi destekleyecek. Umarım IE9 da tam ekran HTML5 videoyu destekler.

Bu, WebKit'te webkitEnterFullscreen aracılığıyla desteklenir .

Alternatif bir çözüm, tarayıcıya bağlamsal menüde sadece bu seçeneği sağlamak olacaktır. Ne zaman yararlı olacağını görebiliyordu, ancak bunu yapmak için Javascript olması gerekmez.

Bu arada, alternatif bir çözüm pencereyi büyütmek (Javascript ekran boyutları sağlayabilir) ve daha sonra içindeki videoyu büyütmek olacaktır. Bir deneyin ve sonuçların kullanıcılarınız için kabul edilebilir olup olmadığını görün.

HTML 5 videosu, Safari'nin en son gece yapımında tam ekrana geçiyor, ancak teknik olarak nasıl başarılı olduğundan emin değilim.

Komple çözüm:

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

Sitenizi aşamalı web uygulaması (PWA) olarak tanımlama seçeneğiniz varsa, manifest.jsondisplay: "fullscreen" altında da kullanma seçeneği vardır . Ancak bu yalnızca kullanıcı web uygulamanızı ana ekrana ekler / yükler ve oradan açarsa çalışır.

Evet. HTML5 videoda olan şey, <video>etiketi koymanız ve tarayıcının kendi kullanıcı arayüzünü ve böylece tam ekran görüntüleme yeteneğini vermesidir. Bu gerçekten bazı kullanıcılar Flash ile oynayan "sanat" görmek zorunda değilsiniz kullanıcılar için hayatı çok daha iyi hale getirir :) Ayrıca platforma tutarlılık ekler, bu güzel.

basit, tüm problemler böyle çözülebilir,

1) kaçış sizi her zaman tam ekran modundan çıkarır (bu, f11 üzerinden manuel olarak tam ekrana girmek için geçerli değildir)

2) Tam ekran video moduna girildiğini (tarayıcı tarafından) geçici olarak küçük bir başlık görüntüler

3) html5'teki pop-up'lar ve yerel veritabanı ve konum api vb.

Bu tasarımla ilgili herhangi bir sorun görmüyorum. kimse bir şey özledim düşünüyorum?

Chrome 11.0.686.0 geliştirici kanalından itibaren Chrome'un tam ekran videosu var.

Kullanıcıya F11'e (birçok tarayıcı için tam ekran) basmasını söyler ve videoyu sayfanın tamamına yerleştirirseniz bunu yapabilirsiniz.

Bu cevapların hiçbiri işe yaramazsa (benim için yapmadılar gibi) iki video oluşturabilirsiniz. Biri normal boyut için, diğeri de tam ekran boyutu için. Tam ekrana geçmek istediğinizde

1. Tam ekran videonun 'src' özelliğini daha küçük videolar 'src' özelliğine ayarlamak için javascript kullanın
2. Tam ekran videodaki video.currentTime öğesini küçük videoyla aynı olacak şekilde ayarlayın.
3. Küçük videoyu gizlemek ve büyük olanı 'position: absolute' ve 'z-index: 1000' veya gerçekten yüksek bir şeyle görüntülemek için css 'display: none' kullanın.