Hướng dẫn Tìm hiểu APIs Fullscreen của HTML 5

[PVS]

Tìm hiểu APIs Fullscreen của HTML 5

Thuật ngữ này chắc không còn xa lạ gì với bạn nữa phải không nhỉ? Với API này, sẽ giúp cho bạn phóng to toàn màng hình một đối tượng hoặc cả website. Thông thường, các media player thường có chức năng này để người xem có thể thưởng thức trọn vẹn hình ảnh trong phim. Hoặc nếu duyệt web thì bạn có thể nhấp F11 (Windows) hoặc Shift + Command + F (Mac OS) để kích hoạt chức năng xem toàn màng hình. Tất nhiên đó là fullscreen cả màng hình trình duyệt. Vậy muốn fullscreen một phần của website thì sao nhỉ?

#Kết hợp với Media API
Nếu các bạn tinh ý thì trong code html của phần bài viết Video API mình có tạo nút Fullscreen, nhưng chưa đã động gì đến nó. Bây giờ chúng ta sẽ bắt đầu động chạm đến nó đây.

Lưu ý: Các bạn nên kết hợp làm tiếp theo bài viết HTML 5 APIs: Video & Audio – Media API thì mới được nhé.

HTML:

<button id="fullscreen">full screen</button>

JS:

var full = document.querySelector("#fullscreen");

full.onclick = function(){
    if (video.requestFullscreen) {
        video.requestFullscreen();
    } else if (video.mozRequestFullScreen) {
        video.mozRequestFullScreen();
    } else if (video.webkitRequestFullscreen) {
        video.webkitRequestFullscreen();
    }
}

Chỉ cần khai báo như thế là xong rồi đó. Cơ mà tại sao lại dùng nhiều if…else thế kia nhỉ? Thật ra, API này vẫn còn trong giai đoạn draft, nên các trình duyệt phát triển phương thức với tên gọi có kèm theo prefix ở trước.
– requestFullscreen: dùng cho mọi trình duyệt khi đã phát triển hoàn chỉnh.
– mozRequestFullScreen: dùng cho firefox.
– webkitRequestFullscreen: dùng cho Chrome, Safari.
– msRequestFullscreen: dùng cho IE 11+

#Phóng to một đối tượng
Bây giờ chúng ta sẽ tiến hành thực hành một xíu nhé, ví dụ trong phần này sẽ hiển thị fullsreen của một hình ảnh. 
Để đơn giản, trong ví dụ này mình sẽ chỉ dùng api ở webkit thôi nhé.

HTML:

<div class="wrap-img">
    <img src="http://vnxf.vn/styles/vnxf2016/vnxf-logo.png">
    <div class="button">x</div>
</div>

CSS:

.wrap-img{
    width: 50%;
    margin: 0 auto;
    position: relative;
}
img { 
    max-width: 100%;
    border: 10px solid #fff; 
    box-shadow: 0px 0px 50px #ccc;
} 

.button {
    background-color: #ccc;
    text-align: center;
    line-height: 25px;
    display: block;
    width: 25px;
    height: 25px;
    z-index: 100;       
    position: absolute;
    border-radius: 50%;
    top: 10px; 
    right: 10px;
    color: #000;
    cursor: pointer; 
}

JS:

var button = document.querySelector('.button');
var wrap = document.querySelector('.wrap-img');
        //
button.onclick = function(){
    if (document.webkitFullscreenElement) {
        document.webkitCancelFullScreen();
    }else{
        wrap.webkitRequestFullScreen();
    };             
}

Kết quả:

Trong đó các bạn lưu ý div có class là button. Khi nhấp vào nút này thì nó sẽ hiển thị toàn màn hình cho đối tượng wrap-img. Khi nhấp vào lần nữa thì nó sẽ thoát chế độ toàn màn hình. Bây giờ tiến hành khai báo javascript để có thể hoạt động được. Tuy nhiên, mình sẽ nói một chút về cách thức hoạt động của nó nhé. Khi chúng ta nhấp chuột vào trong nút button, thì sẽ dùng phương thức webkitFullscreenElement() kiểm tra xem đối tượng có đang fullscreen không? Nếu có thì mình sẽ dùng webkitCancelFullScreen() để tắt fullscreen. Nếu không thì dùng webkitRequestFullScreen() để yêu cầu bật chế độ fullscreen.

.webkitFullscreenElement(): kiểm tra xem có đối tượng nào đang ở chế độ fullscreen không?
.webkitCancelFullScreen(): phương thức này tắt chế độ fullscreen. Riêng đối với IE thì dùng phương thức msExitFullscreen();
.webkitRequestFullScreen(): yêu cầu hiển thị fullscreen cho một đối tượng nào đó.

#Kết luận
Đây thực sự là một API thú vị. Nó giúp cho lập trình viên trở nên linh động hơn và có thể tự mình quản lý cũng như điều khiển được mọi thứ. Nếu như bạn tư duy tốt, bạn có thể áp dụng nó vào việc xây dưng một slider ảnh khá thú vị đó.

Chúc các bạn thành công.

Nguồn: izwebz.com​