Có cách nào để tạo video toàn màn hình HTML5 không?

Có cách nào để phát toàn màn hình video bằng <video>thẻ HTML5 không?

Và nếu điều này là không thể, có ai biết liệu có lý do cho quyết định này không?

HTML 5 không cung cấp cách nào để tạo toàn màn hình video, nhưng đặc tả Toàn màn hình song song cung cấp requestFullScreenphương thức cho phép các thành phần tùy ý (bao gồm <video>các thành phần) được tạo toàn màn hình.

Nó có hỗ trợ thử nghiệm trong một số trình duyệt .

Câu trả lời gốc:

Từ thông số HTML5 (tại thời điểm viết: Tháng Sáu '09):

Tác nhân người dùng không nên cung cấp API công khai để khiến video được hiển thị toàn màn hình. Một tập lệnh, kết hợp với tệp video được tạo cẩn thận, có thể lừa người dùng nghĩ rằng hộp thoại theo chế độ hệ thống đã được hiển thị và nhắc người dùng nhập mật khẩu. Ngoài ra còn có nguy cơ gây phiền toái "đơn thuần", với các trang khởi chạy video toàn màn hình khi nhấp vào liên kết hoặc các trang được điều hướng. Thay vào đó, các tính năng giao diện cụ thể của tác nhân người dùng có thể được cung cấp để dễ dàng cho phép người dùng có được chế độ phát lại toàn màn hình.

Các trình duyệt có thể cung cấp giao diện người dùng, nhưng không nên cung cấp giao diện lập trình.

Lưu ý rằng cảnh báo trên đã bị xóa khỏi đặc tả.

Hầu hết các câu trả lời ở đây đã lỗi thời.

Giờ đây, có thể đưa bất kỳ yếu tố nào vào toàn màn hình bằng API toàn màn hình , mặc dù nó vẫn khá lộn xộn vì bạn không thể gọi div.requestFullScreen()trong tất cả các trình duyệt mà phải sử dụng các phương thức tiền tố cụ thể của trình duyệt.

Tôi đã tạo một trình bao bọc màn hình đơn giản , giúp sử dụng API toàn màn hình dễ dàng hơn.

Hỗ trợ trình duyệt hiện tại là:

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

Lưu ý rằng nhiều trình duyệt di động dường như chưa hỗ trợ tùy chọn toàn màn hình .

Safari hỗ trợ nó thông qua webkitEnterFullscreen.

Chrome cũng nên hỗ trợ vì WebKit cũng có lỗi nhưng không có lỗi.

Chris Blizzard của Firefox cho biết họ sắp ra mắt với phiên bản toàn màn hình của riêng họ, điều này sẽ cho phép bất kỳ yếu tố nào đi đến toàn màn hình. ví dụ Canvas

Philip Jagenstedt của Opera nói rằng họ sẽ hỗ trợ nó trong phiên bản mới hơn.

Có, thông số video HTML5 nói rằng không hỗ trợ toàn màn hình, nhưng vì người dùng muốn nó và mọi trình duyệt sẽ hỗ trợ nó, thông số kỹ thuật sẽ thay đổi.

webkitEnterFullScreen();

Điều này cần phải được gọi trên thành phần thẻ video, ví dụ, để toàn màn hình thẻ video đầu tiên trên trang sử dụng:

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

Lưu ý: đây là câu trả lời lỗi thời và không còn phù hợp.

Nhiều trình duyệt web hiện đại đã triển khai API FullScreen cho phép bạn tập trung toàn màn hình vào các yếu tố HTML nhất định. Điều này thực sự tuyệt vời để hiển thị phương tiện tương tác như video trong một môi trường hoàn toàn nhập vai.

Để làm cho nút toàn màn hình hoạt động, bạn cần thiết lập một trình nghe sự kiện khác sẽ gọi requestFullScreen()chức năng khi nhấp vào nút. Để đảm bảo rằng điều này sẽ hoạt động trên tất cả các trình duyệt được hỗ trợ, bạn cũng sẽ cần kiểm tra xem liệu requestFullScreen()có sẵn và dự phòng cho các phiên bản tiền tố của nhà cung cấp ( mozRequestFullScreenvà webkitRequestFullscreen) nếu không.

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

Tham khảo: - https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode Tham khảo: - http://blog.teamtreehouse.com/building-custom-controls-for-html5 -video

Tôi nghĩ rằng nếu chúng tôi muốn có một cách mở để xem video trong trình duyệt của mình mà không cần bất kỳ plugin nguồn đóng nào (và tất cả các vi phạm bảo mật đi kèm với lịch sử của plugin flash ...). Thẻ phải tìm cách kích hoạt toàn màn hình .. Chúng tôi có thể xử lý nó như flash: để làm toàn màn hình, nó phải được kích hoạt bằng một cú nhấp chuột trái bằng chuột và không có gì khác, ý tôi là ActionScript không thể khởi chạy toàn màn hình khi tải flash bằng ví dụ.

Tôi hy vọng tôi đã đủ rõ ràng: Rốt cuộc, tôi chỉ là một sinh viên IT người Pháp, không phải là một nhà thơ tiếng Anh :)

Hẹn gặp lại sau!

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

Một cách lập trình để làm toàn màn hình hiện đang hoạt động trong cả Firefox và Chrome (trong các phiên bản mới nhất của chúng). Tin tốt là một thông số đã được phác thảo ở đây:

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

Bây giờ bạn vẫn sẽ phải xử lý các tiền tố của nhà cung cấp nhưng tất cả các chi tiết triển khai đang được theo dõi trong trang MDN:

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

Bạn có thể thay đổi chiều rộng và chiều cao thành 100%, nhưng nó sẽ không bao phủ trình duyệt chrome hoặc vỏ hệ điều hành.

Quyết định thiết kế là do HTML sống bên trong cửa sổ trình duyệt. Các plugin flash không nằm trong cửa sổ, vì vậy chúng có thể hiển thị toàn màn hình.

Điều này có ý nghĩa, nếu không, bạn có thể tạo các thẻ img bao phủ vỏ hoặc tạo các thẻ h1 để toàn bộ màn hình là một chữ cái.

Không, không thể có video toàn màn hình trong html 5. Nếu bạn muốn biết lý do, bạn thật may mắn vì cuộc chiến tranh luận cho toàn màn hình được chiến đấu ngay bây giờ. Xem danh sách gửi thư WHATWG và tìm từ "video". Cá nhân tôi hy vọng rằng họ cung cấp API toàn màn hình trong HTML 5.

Firefox 3.6 có tùy chọn toàn màn hình cho video HTML5, nhấp chuột phải vào video và chọn 'toàn màn hình'.

Các nightlies Webkit mới nhất cũng hỗ trợ video HTML5 toàn màn hình, hãy thử trình phát Sublime với màn đêm mới nhất và giữ Cmd / Ctrl trong khi chọn tùy chọn toàn màn hình.

Tôi đoán Chrome / Opera cũng sẽ hỗ trợ một cái gì đó như thế này. Hy vọng IE9 cũng sẽ hỗ trợ video HTML5 toàn màn hình.

Điều này được hỗ trợ trong WebKit thông qua webkit EntryFullscreen .

Một giải pháp thay thế sẽ là trình duyệt chỉ cần cung cấp tùy chọn này trên menu ngữ cảnh. Không cần phải có Javascript để làm điều này, mặc dù tôi có thể thấy khi nào nó sẽ hữu ích.

Trong thời gian đó, một giải pháp thay thế đơn giản là tối đa hóa cửa sổ (Javascript có thể cung cấp kích thước màn hình) và sau đó tối đa hóa video trong đó. Hãy thử đi và sau đó chỉ cần xem kết quả có thể chấp nhận được với người dùng của bạn không.

Video HTML 5 có toàn màn hình trong bản dựng Safari hàng đêm mới nhất, mặc dù tôi không chắc nó được hoàn thiện về mặt kỹ thuật như thế nào.

Giải pháp hoàn chỉnh:

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

Nếu bạn có tùy chọn để xác định trang web của mình là ứng dụng web lũy tiến (PWA), thì đó cũng là tùy chọn để sử dụng display: "fullscreen"theo manifest.json . Nhưng điều này sẽ chỉ hoạt động nếu người dùng thêm / cài đặt ứng dụng web của bạn vào màn hình chính và mở nó lên từ đó.

Đúng. Điều xảy ra với video HTML5 là bạn chỉ cần đặt <video>thẻ và trình duyệt sẽ cung cấp giao diện người dùng của riêng nó và do đó khả năng xem toàn màn hình. Nó thực sự làm cho cuộc sống của chúng tôi tốt hơn nhiều khi người dùng không phải thấy "nghệ thuật" mà một số nhà phát triển chơi với Flash có thể tạo ra :) Nó cũng bổ sung tính nhất quán cho nền tảng, điều này thật tuyệt.

Thật đơn giản, tất cả các vấn đề có thể được giải quyết như thế này,

1) có lối thoát luôn đưa bạn ra khỏi chế độ toàn màn hình (điều này không áp dụng để nhập thủ công toàn màn hình qua f11)

2) tạm thời hiển thị một biểu ngữ nhỏ cho biết chế độ video toàn màn hình được nhập (bởi trình duyệt)

3) chặn hành động toàn màn hình theo mặc định, giống như đã được thực hiện cho cửa sổ bật lên và cơ sở dữ liệu cục bộ trong html5 và vị trí api, v.v.

Tôi không thấy bất kỳ vấn đề với thiết kế này. có ai nghĩ tôi đã bỏ lỡ điều gì không?

Kể từ Chrome 11.0.686.0 kênh dev, Chrome hiện có video toàn màn hình.

Bạn có thể làm điều này nếu bạn yêu cầu người dùng nhấn F11 (toàn màn hình cho nhiều trình duyệt) và bạn đặt video trên toàn bộ thân trang.

Nếu không có câu trả lời nào trong số này không hoạt động (vì chúng không phù hợp với tôi), bạn có thể thiết lập hai video. Một cho kích thước thông thường và một cho kích thước toàn màn hình. Khi bạn muốn chuyển sang toàn màn hình

1. Sử dụng javascript để đặt thuộc tính 'src' của video toàn màn hình thành thuộc tính 'src' của video nhỏ hơn
2. Đặt video.civerseTime trên video toàn màn hình giống với video nhỏ.
3. Sử dụng css 'display: none' để ẩn video nhỏ và hiển thị video lớn với thông qua 'vị trí: tuyệt đối' và 'z-index: 1000' hoặc thứ gì đó thực sự cao.