Fullscreen bằng HTML5

Cập nhật: Lượt xem: 1262 [ HTML ]

Hướng dẫn cách sử dụng html5 fullscreen API để làm cho một elment bật được chố độ fullscreen. API rất đơn giản nhưng lại rất hữu ích.

Fullscreen bằng HTML5

Hôm nay chúng ta có một hướng dẫn cơ bản về Fullscreen API trong html5. Đây sẽ là tiền đề cho mội vài hướng dẫn sau đó.

Đầu tiên bạn cần chú ý là API này đang ở giai đoạn thử nghiệm, chưa chính thức được phát triển theo một “Chuẩn” thật sự số định giữa các trình duyệt. Vì vập API này sẽ có thể còn thay đổi nhiều trong tương lai. Nếu bạn áp dụng nó, thì hãy sẵn sàng thay đổi, cập nhật bất cứ lúc nào. Dù sao thì những lời mà bạn vừa đọc được có một chút chém gió nhẹ. Thực ra, nếu có thay đổi, cũng sẽ không khó để bạn cập nhật đâu. Vì vậy đừng lo.

Fullscreen API

Fullscreen API cho phép bạn trình bày một element trên website ở chế độ toàn màn hình. Giống như khi bạn xem video fullscreen vậy.
API thực sự hữu ích khi bạn muốn trình chiếu video, Slide gallery ảnh, game html5 hoặc một slideShow.

Tương thích

fullscreenAPI

Như các bạn thấy, hầu như các phiên bản mới nhất của các trình duyệt thông dụng đề đã hỗ trợ API này. Riêng chrome là hỗ trợ sớm và nhiều nhất thông qua các phiên bản.

Các phương thức và thuộc tính phổ biến

Cũng giống như trong css3, các API có sự khác nhau về tiền tố trong tên các phương thức. ms cho Microsoft, moz cho Gecko, webkit cho webkit :

  • requestFullscreen() : Gửi yêu cầu đến trình duyệt để cho element trở thành fullscreen. Phương thức này là bất đồng bộ.
  • exitFullscreen() ( CancelFullScreen() trong Gecko ) : Thoát khỏi fullscreen.
  • fullscreenElement: kiểm tra xem element có đang fullscreen hay không
  • fullscreenEnabled : Cho biết là element có cho thể fullscreen hay không. nếu thuộc tính allowfullscreen của element là false thì không thể fullscreen được.

Mở chế độ fullscreen

Để yêu cầu chuyển qua chế độ fullscreen bạn cần gọi phương thức requestFullscreen() kèm theo element mà bạn muốn hiển thị. Ở đây ta viết lại thành hàm lauchfullscreen(element):

function enterFullscreen(element) {
    if (element.requestFullscreen) {
        //Luôn thử phương thức không có prefix trước
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); // cho phép sử dụng bàn phím
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

Sử dụng hàm:

launchFullScreen(document.documentElement); // Toàn trang
launchFullScreen(document.getElementById("videoElement")); // Chỉ một element #videoElement và các element con của nó

Thoát khỏi fullscreen

function exitFullscreen() {
    if(document.exitFullscreen) {
        document.exitFullscreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

Khi vào chế độ fullscreen chúng ta cần khai báo đối tượng mà chúng ta muốn, nhưng khi thoát thì không cần. vì cùng lúc chỉ có thể có một đối tượng được fullscreen, nên khi thoát, trình duyệt sẽ tự biết.

Hỗ trợ css

Có một sợ khác biệt nhỏ giữa  Gecko và WebKit đó là khi mở chế độ toàn màn hình trong html5, Gecko sẽ tự động thêm thuộc tính css cho element widht 100% và height 100%. Còn trong webkit thì chúng ta phải tự làm.

:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

Để hiểu đễ hơn và biết cách sử dụng các phương thức này, cách nhanh nhất là chúng ta cùng xem demo đơn giản ở trên nhé.

Loading...