Apakah ada cara untuk membuat video HTML5 layar penuh?

Apakah ada cara untuk memutar video layar penuh menggunakan <video>tag HTML5 ?

Dan jika ini tidak mungkin, apakah ada yang tahu jika ada alasan untuk keputusan ini?

HTML 5 tidak memberikan cara untuk membuat video fullscreen, tetapi spesifikasi Fullscreen paralel menyediakan requestFullScreenmetode yang memungkinkan elemen acak (termasuk <video>elemen) dibuat fullscreen.

Ini memiliki dukungan eksperimental di sejumlah browser .

Jawaban asli:

Dari spec HTML5 (pada saat penulisan: Juni '09):

Agen pengguna tidak boleh menyediakan API publik untuk menyebabkan video ditampilkan dalam layar penuh. Sebuah skrip, dikombinasikan dengan file video yang dibuat dengan hati-hati, dapat menipu pengguna untuk berpikir dialog sistem-modal telah ditampilkan, dan meminta pengguna untuk kata sandi. Ada juga bahaya gangguan "sekadar", dengan halaman meluncurkan video layar penuh ketika tautan diklik atau halaman dinavigasi. Sebagai gantinya, fitur antarmuka khusus agen pengguna dapat disediakan untuk memudahkan pengguna memperoleh mode pemutaran layar penuh.

Browser mungkin menyediakan antarmuka pengguna, tetapi seharusnya tidak menyediakan yang dapat diprogram.

Perhatikan bahwa peringatan di atas telah dihapus dari spesifikasi.

Sebagian besar jawaban di sini sudah usang.

Sekarang dimungkinkan untuk membawa elemen apa saja ke layar penuh menggunakan API Layar Penuh , meskipun masih cukup berantakan karena Anda tidak bisa memanggil div.requestFullScreen()semua browser, tetapi harus menggunakan metode awalan khusus peramban.

Saya telah membuat screenfull.js wrapper sederhana yang membuatnya lebih mudah untuk menggunakan Fullscreen API.

Dukungan browser saat ini adalah:

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

Perhatikan bahwa banyak peramban seluler tampaknya belum mendukung opsi layar penuh .

Safari mendukungnya webkitEnterFullscreen.

Chrome harus mendukungnya karena itu WebKit juga, tetapi kesalahan keluar.

Chris Blizzard dari Firefox mengatakan bahwa mereka akan keluar dengan versi layar penuh mereka sendiri yang akan memungkinkan setiap elemen untuk masuk ke layar penuh. misal kanvas

Philip Jagenstedt dari Opera mengatakan mereka akan mendukungnya dalam rilis nanti.

Ya, spesifikasi video HTML5 mengatakan tidak mendukung layar penuh, tetapi karena pengguna menginginkannya, dan setiap browser akan mendukungnya, spesifikasi tersebut akan berubah.

webkitEnterFullScreen();

Ini perlu dipanggil pada elemen tag video, misalnya, untuk fullscreen tag video pertama pada penggunaan halaman:

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

Perhatikan: ini adalah jawaban yang sudah usang dan tidak lagi relevan.

Banyak browser web modern telah mengimplementasikan API Layar Penuh yang memungkinkan Anda untuk memberikan fokus layar penuh ke elemen HTML tertentu. Ini sangat bagus untuk menampilkan media interaktif seperti video dalam lingkungan yang sepenuhnya mendalam.

Agar tombol layar penuh berfungsi, Anda perlu mengatur pendengar acara lain yang akan memanggil requestFullScreen()fungsi saat tombol diklik. Untuk memastikan bahwa ini akan bekerja di semua browser yang didukung, Anda juga perlu memeriksa untuk melihat apakah requestFullScreen()tersedia dan mundur ke versi yang sudah ada oleh vendor ( mozRequestFullScreendan webkitRequestFullscreen) jika tidak.

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

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

Saya pikir jika kita ingin memiliki cara terbuka untuk melihat video di browser kita tanpa ada plugin sumber tertutup (dan semua pelanggaran keamanan yang menyertai riwayat plugin flash ...). Tag harus menemukan cara untuk mengaktifkan layar penuh .. Kita bisa menanganinya seperti flash lakukan: untuk melakukan layar penuh, itu harus diaktifkan oleh klik kiri dengan mouse Anda dan tidak ada yang lain, maksud saya itu tidak mungkin oleh ActionScript untuk meluncurkan layar penuh pada pemuatan flash dengan contoh.

Saya harap saya sudah cukup jelas: Lagi pula, saya hanya seorang mahasiswa IT Perancis, bukan penyair bahasa Inggris :)

Sampai jumpa!

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

Cara terprogram untuk melakukan layar penuh sekarang berfungsi di Firefox dan Chrome (dalam versi terbaru mereka). Berita baiknya adalah bahwa spec telah dirancang di sini:

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

Anda masih harus berurusan dengan awalan vendor untuk saat ini, tetapi semua detail implementasi dilacak di situs MDN:

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

Anda dapat mengubah lebar dan tinggi menjadi 100%, tetapi itu tidak akan menutupi chrome browser atau OS shell.

Keputusan desain karena HTML ada di dalam jendela browser. Plugin Flash tidak ada di dalam jendela, sehingga bisa masuk layar penuh.

Ini masuk akal, jika tidak, Anda bisa membuat tag img yang menutupi shell, atau membuat tag h1 sehingga seluruh layar adalah huruf.

Tidak, tidak mungkin untuk memiliki video layar penuh dalam html 5. Jika Anda ingin tahu alasannya, Anda beruntung karena pertarungan argumen untuk layar penuh sedang diperjuangkan sekarang. Lihat milis WHATWG dan cari kata "video". Saya pribadi berharap mereka menyediakan API layar penuh dalam HTML 5.

Firefox 3.6 memiliki opsi layar penuh untuk video HTML5, klik kanan pada video dan pilih 'layar penuh'.

Nightkit Webkit terbaru juga mendukung video HTML5 layar penuh, coba pemain Sublime dengan nightly terbaru dan tahan Cmd / Ctrl sambil memilih opsi layar penuh.

Saya kira Chrome / Opera juga akan mendukung sesuatu seperti ini. Semoga IE9 juga akan mendukung video HTML5 layar penuh.

Ini didukung di WebKit melalui webkitEnterFullscreen .

Solusi alternatif adalah dengan harus browser menyediakan opsi ini pada menu kontekstual. Tidak perlu Javascript untuk melakukan ini, meskipun saya bisa melihat kapan itu akan berguna.

Sementara itu solusi alternatif hanyalah memaksimalkan jendela (Javascript dapat memberikan dimensi layar) dan kemudian memaksimalkan video di dalamnya. Cobalah dan lihat saja apakah hasilnya dapat diterima oleh pengguna Anda.

Video HTML 5 benar-benar masuk layar penuh dalam pembuatan Safari terbaru setiap malam, meskipun saya tidak yakin bagaimana hal itu dilakukan secara teknis.

Solusi lengkap:

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

Jika Anda memiliki opsi untuk mendefinisikan situs Anda sebagai aplikasi web progresif (PWA), maka ada juga opsi untuk digunakan di display: "fullscreen"bawah manifest.json . Tetapi ini hanya akan berfungsi jika pengguna menambahkan / menginstal aplikasi web Anda ke layar beranda dan membukanya dari sana.

Iya. Nah apa yang terjadi dengan video HTML5 adalah Anda hanya memasang <video>tag dan browser akan memberikan UI sendiri, dan dengan demikian kemampuan untuk melihat layar penuh. Ini benar-benar membuat hidup kami jauh lebih baik daripada pengguna yang tidak perlu melihat "seni" yang dibuat oleh beberapa pengembang dengan Flash :) Ini juga menambah konsistensi pada platform, yang bagus.

itu sederhana, semua masalah bisa diselesaikan seperti ini,

1) melarikan diri selalu membawa Anda keluar dari mode layar penuh (ini tidak berlaku untuk memasuki layar penuh secara manual melalui f11)

2) untuk sementara menampilkan spanduk kecil yang mengatakan mode video layar penuh dimasukkan (oleh browser)

3) memblokir aksi layar penuh secara default, seperti yang telah dilakukan untuk pop-up dan database lokal di html5 dan lokasi api dan lain-lain, dll.

saya tidak melihat masalah dengan desain ini. Adakah yang mengira aku melewatkan sesuatu?

Pada Chrome 11.0.686.0 saluran dev Chrome sekarang memiliki video layar penuh.

Anda dapat melakukan ini jika Anda memberi tahu pengguna untuk menekan F11 (layar penuh untuk banyak browser), dan Anda meletakkan video di seluruh badan halaman.

Jika tidak ada jawaban yang tidak berfungsi (karena tidak cocok untuk saya), Anda dapat mengatur dua video. Satu untuk ukuran biasa dan satu lagi untuk ukuran layar penuh. Ketika Anda ingin beralih ke layar penuh

1. Gunakan javascript untuk mengatur atribut 'src' video layar penuh ke atribut 'src' video yang lebih kecil
2. Atur video.currentTime pada video layar penuh agar sama dengan video kecil.
3. Gunakan css 'display: none' untuk menyembunyikan video kecil dan tampilkan video besar dengan via 'position: absolute' dan 'z-index: 1000' atau sesuatu yang sangat tinggi.