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 tôi 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 tục theo bài viết HTML 5 APIs: Video & Audio – Media API thì mới được nhé.


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 tôi sẽ chỉ dùng api ở webkit thôi nhé.

See the Pen kBmoF by Minh Man (@izwebz) on CodePen.

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àng 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àng hình. Bây giờ tiến hành khai báo javascript để có thể hoạt động được. Tuy nhiên, tôi 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 thi 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ị đó.