Video toàn màn hình css

Khi muốn xem trang web ở chế độ toàn màn hình, bạn hãy nhấn phím F11. Tuy nhiên, khi bạn chỉ muốn hiển thị chế độ toàn màn hình cho một phần tử nào đó, thì chúng ta không thể thực hiện theo cách trên

HTML5 cung cấp một API mới cho phép bạn hiển thị toàn màn hình bất kỳ phần tử nào của một trang web đó là API toàn màn hình HTML5

Các phương thức chính của HTML5 Fullscreen API

MethodMô tả. requestFullScreen()
webkitRequestFullScreen()
mozRequestFullScreen()Hiển thị toàn màn hình với phần tử được chỉ định. hủy bỏFullScreen()
webkitCancelFullScreen()
mozRequestFullScreen()Thoát mode display toàn màn hình. toàn màn hình
webkitIsFullScreen
mozfullScreenXem phần tử đang hiển thị ở chế độ toàn màn hình. toàn màn hình
-webkit-toàn màn hình
-moz-fullscreenTương tác với phần tử chỉ được xác định khi ở chế độ toàn màn hình

API toàn màn hình HTML5 thực sự rất hữu ích khi bạn làm việc với các phần tử như hình ảnh hoặc video. Sau đây để hiểu rõ hơn về cách làm việc với HTML5 Fullscreen API, mình xin viết một hướng dẫn sử dụng toàn màn hình với bản đồ sử dụng tờ rơi

HTML

<div class="map-wrapper">
	<div id="map" class="map">div>
	<a id="fullscreen" class="fullscreen" href="#">Fullscreena>
div>

JavaScript

FullScreen mode

var fullscreen_element = document.getElementById('map');
var fullscreen_button = document.getElementById('fullscreen');

fullscreen_button.addEventListener('click', function() {
	launchFullScreen(fullscreen_element);
}, false);

function launchFullScreen(element) {
	if (element.requestFullScreen) {
		element.requestFullScreen();
	} else if (element.mozRequestFullScreen) {
		element.mozRequestFullScreen();
	} else if (element.webkitRequestFullScreen) {
		element.webkitRequestFullScreen();
	} else if (element.msRequestFullScreen) {
		element.msRequestFullScreen();
	}
}

Thoát chế độ FullScreen

function cancelFullscreen() {
  if (document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

CSS

Ở chế độ toàn màn hình, ta có thể định kiểu cho thành phần được lựa chọn

.map:-webkit-full-screen { width: 100%; height: 100%; }
.map:-moz-full-screen { width: 100%; height: 100%; }
.map:-ms-full-screen { width: 100%; height: 100%; }
.map:full-screen { width: 100%; height: 100%; }

HTML5 FullScreen API là một API đơn giản và mạnh mẽ. Mình hi vọng với API đơn giản này, các bạn có thể viết những ứng dụng tương tác dễ dàng hơn khi cần hiển thị chế độ toàn màn hình

Liên kết

• Hệ thống quản lý
• E-mail
• Website Trường
• tân sinh viên
• học tập
• Học trực tuyến
• Thi trực tuyến

tài nguyên

• Tải phần mềm Zoom
• Tải Microsoft Teams
• Mở VPN
• Tải Google Drive PC

Các vấn đề thường gặp

• Liên quan đến mật khẩu
• Tài khoản Office 365
• Kết nối wifi

CTUConnection

• Facebook
• YouTube
• Tiktok
• LinkedIn
• Instagram

• Tổng hợp hướng dẫn
• Thực Chiến Marketing Online
• Tiếp thị trực tuyến MO

Hướng dẫn chỉnh sửa toàn màn hình cho hình, không bị vỡ hoặc mất kích thước gốc của hình

748

• Nếu sản phẩm bạn tải xuống không hiển thị toàn màn hình và HD tiêu chuẩn, rất đơn giản, bạn chỉ cần sử dụng phần mềm Paint có sẵn trong máy tính để chỉnh sửa hình ảnh
• Mở hình sản phẩm của bạn vào
• Kết quả
  

 

• Sau đó, bạn kéo mở rộng khung trang (lưu lý do không kéo mở rộng khung hình) sao cho 4 mặt của hình đều có khoảng trắng tương đối và hình nằm chính giữa, như thế này

 

• Cuối cùng, bạn hãy lưu hình mới chỉnh sửa lên hình cũ để tránh lộn xộn hình

 

• hướng dẫn video

CÁC THÀNH PHẦN CỦA BẠN THÀNH CÔNG

Ms Thảo > SV1013 > Đại học Mở TPHCM

• THẺ
• sinh viên

Trước Cách QC sản phẩm tốt nhất cho người đang bán hàng trực tuyến

Sau Hướng dẫn làm video giới thiệu sản phẩm bằng phần mềm Proshow Producer

m2