Ẩn video css

Hide Self View Zoom là gì?

Hide Self View Zoom là gì?

Hide Self View (Ẩn khung hình bản thân). Nếu video của bạn được bật trong cuộc họp có nhiều người tham gia, video sẽ tự động hiển thị cho tất cả những người tham gia, bao gồm cả bạn. Nếu bạn có thể thể hiện bản thân, bạn có thể thấy cách bạn nhìn đối diện với người khác. Nếu bạn ẩn khung hình bản thân, màn hình video của riêng bạn sẽ biến mất khỏi màn hình, để lại nhiều vị trí hơn cho những người tham gia khác nhìn thấy. Bạn có thể kiểm tra việc ẩn hay hiện mình trong màn hình video của riêng bạn cho mỗi cuộc họp

Để chạy chương trình trên ta lưu tên file “anyName. html(chỉ mục. html)”. Nhấp chuột phải vào tệp và chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Visual Studio Code

đầu ra

Điều này sẽ tạo ra đầu ra sau trên bảng điều khiển -

Trong đầu ra mẫu ở trên, thẻ video đã bị tắt. Nếu bạn muốn kích hoạt, chỉ cần bình luận dòng trên i. e

Bạn có bao giờ tự hỏi tại sao chúng ta có rất nhiều kỹ thuật giấu một phần tử khi tất cả chúng giống như đang làm một điều tương tự ?

Tất cả các phương pháp này thực sự có khác nhau một chút và sự khác biệt này chỉ ra mỗi phương pháp nên được sử dụng trong một trường hợp cụ thể. Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên

Hướng dẫn này sẽ đề cập đến những điểm khác biệt nhỏ mà bạn cần lưu ý khi ẩn phần tử bằng cách sử dụng bất kỳ phương pháp nào ở trên

Nội dung

1, Độ mờ

Thuộc tính

.hide {
   visibility: hidden;
}

1 là để thiết lập

.hide {
   visibility: hidden;
}

7 (độ trong suốt ) của phần tử. Nó không được thiết kế để thay đổi giới hạn khung của phần tử bên dưới bất kỳ hình thức nào

Điều này có nghĩa là cài đặt độ mờ xuống 0 chỉ để ẩn phần tử một cách trực quan. Phần tử vẫn sử dụng vị trí của nó và ảnh hưởng đến cục bộ của trang web. Nó cũng sẽ phản hồi lại với tương tác của người dùng

.hide {
   visibility: hidden;
}

3

Nếu bạn định sử dụng thuộc tính độ mờ để ẩn hoàn toàn khỏi màn hình – thật đáng tiếc, điều này là không thể. Phần tử và tất cả nội dung của nó sẽ vẫn được trình duyệt hiển thị (hiển thị trắng), giống như tất cả các phần tử khác trên trang web. Nói cách khác, phần tử vẫn đang hoạt động (vẫn bắt được các tương tác từ người dùng) như cách nó không bị làm mờ

Chính vì thế tôi khuyến mãi nên sử dụng thuộc tính

.hide {
   visibility: hidden;
}

1 tạo ra các hiệu ứng sinh động

Vui lòng xem demo

Khi bạn di chuột qua khối thứ hai bị ẩn, phần tử sẽ chuyển dòng trôi nổi từ trạng thái trong suốt hoàn toàn rõ ràng rõ ràng. Và khi chuột ko còn ở khối thứ 2 nữa thì khối này bị ẩn đi. Điều này chứng tỏ rõ ràng, khối ẩn đi vẫn có thể tiếp nhận các tác động tương tác từ người dùng

2, Khả năng hiển thị

Thuộc tính tiếp theo trong danh sách là

Khả năng hiển thị của

.hide {
   visibility: hidden;
}

9. Thuộc tính cài đặt này sẽ làm ẩn phần tử

Cũng giống như thuộc tính

.hide {
   visibility: hidden;
}

1, ẩn phần tử sẽ vẫn ảnh hưởng đến cấu trúc cục bộ của trang web. Sự khác biệt duy nhất là thời gian này nó sẽ không nắm bắt bất kỳ tương tác nào của người dùng khi bị ẩn khỏi người dùng

Thuộc tính này cũng có thể làm cho các hình ảnh động miễn phí là trạng thái ban đầu và cuối cùng có các giá trị khác nhau. Điều này đảm bảo rằng quá trình chuyển đổi giữa các trạng thái hiển thị có thể được trơn tru thay vì đột ngột

.hide {
   visibility: hidden;
}

7

Sự khác biệt giữa Visibility và Opacity

• Lưu ý rằng các phần tử con của một phần tử với

  .hide {
     visibility: hidden;
  }
  

  2 được đặt ở

  .hide {
     visibility: hidden;
  }
  

  3 vẫn có thể vẫn hiển thị nếu thuộc tính

  .hide {
     visibility: hidden;
  }
  

  2 của chúng được đặt về

  .hide {
     visibility: hidden;
  }
  

  04
• Hãy thử di chuột qua phần tử ẩn và không nằm trong đoạn văn bên, bạn sẽ thấy con trỏ truột của bạn không thay đổi thành con trỏ hình dấu tay
• Hơn nữa, nếu bạn cố gắng nhấp vào phần tử, cú nhấp chuột của bạn sẽ không được tạo ra bất kỳ sự kiện nào
• Thẻ

  .hide {
     visibility: hidden;
  }
  

  05 bên trong

  .hide {
     visibility: hidden;
  }
  

  06 vẫn sẽ nắm bắt tất cả hoạt động của chuột. Ngay khi bạn di chuột qua văn bản, biểu tượng

  .hide {
     visibility: hidden;
  }
  

  06 sẽ được phát hiện và bắt đầu ghi nhận các sự kiện (con trỏ chuột thay đổi và nền của cả div thay đổi)

4, Hiển thị

Thuộc tính

.hide {
   visibility: hidden;
}

4 ẩn phần tử theo đúng nghĩa thực của từ đó. Thiết lập

.hide {
   visibility: hidden;
}

4 về

.hide {
   visibility: hidden;
}

5 chắc chắn khối sẽ không được tạo ra

Thuộc tính sử dụng, không có khoảng trống nào để lùi lại sau khi phần tử đã bị ẩn đi. Không chỉ vậy, bất kỳ tương tác trực tiếp nào (click, mouse_up,. v. v. ) any of user will not done when

.hide {
   visibility: hidden;
}

4 was set at

.hide {
   visibility: hidden;
}

5

Hơn nữa, người đọc sẽ không đọc được nội dung của phần tử. Nó giống như phần tử không tồn tại

Tất cả các hậu duệ của phần tử cũng sẽ bị ẩn. Thuộc tính này không thể có được các hoạt ảnh vì vậy sự chuyển đổi giữa các trạng thái khác nhau luôn luôn xung đột

Xin lưu ý, phần tử vẫn có thể truy cập qua DOM. Bạn sẽ có thể thao tác nó giống như bất kỳ yếu tố nào khác

.hide {
   visibility: hidden;
}

90

Please see this demo CSS

Bạn sẽ thấy rằng khối thứ hai có một đoạn văn thuộc tính

.hide {
   visibility: hidden;
}

4 được thiết lập về

.hide {
   visibility: hidden;
}

94 nhưng đoạn văn vẫn vô hình. Đây là một sự khác biệt khác giữa

.hide {
   visibility: hidden;
}

95 và

.hide {
   visibility: hidden;
}

96. Trong trường hợp đầu tiên, bất kỳ hậu duệ nào được thiết lập

.hide {
   visibility: hidden;
}

2 về

.hide {
   visibility: hidden;
}

04 sẽ được hiển thị nhưng đó không phải là những gì xảy ra với

.hide {
   visibility: hidden;
}

4. Tất cả các phần tử con đều bị ẩn bất kể giá trị của các thuộc tính được hiển thị

Bây giờ, di chuột một vài lần trên khối đầu tiên trong bản giới thiệu. Đã hoàn thành tác vụ? . Điều này sẽ làm cho khối thứ hai nhìn thấy được. Giá trị bên trong bây giờ là một số khác không. Điều này là do phần tử, mặc dù ẩn với người dùng nhưng vẫn có thể thao tác bằng JavaScript

4, Vị trí

Giả sử bạn có một phần tử mà bạn muốn tương tác nhưng bạn không muốn nó ảnh hưởng đến việc bố trí trang web của bạn. Không có cách nào có thể xử lý khả năng truy cập vào thời điểm này. Một điều bạn có thể làm trong trường hợp này là chuyển các phần tử ra khỏi khung nhìn. Bằng cách nào đó nó sẽ không ảnh hưởng đến việc bố trí và vẫn hoạt động được. Đây là cách CSS làm điều đó

.hide {
   visibility: hidden;
}

98

Vui lòng xem bản demo này Ý tưởng chính ở đây là đặt giá trị bên trái và âm đủ cao để phần tử không còn hiển thị trên màn hình nữa. Một lợi ích (hoặc nhược điểm tiềm ẩn) của kỹ thuật này là nội dung của một phần xác định tử có thể được đọc bởi các màn hình đọc. Điều này hoàn toàn dễ hiểu bởi vì bạn chỉ di chuyển các phần tử ra khỏi khung để người dùng không thể nhìn thấy nó

5, Đường dẫn clip

Một cách khác để ẩn các phần tử bằng cách cắt chúng. Trước đây, điều này có thể được thực hiện với thuộc tính

.hide {
   visibility: hidden;
}

80 nhưng sau đó không được ủng hộ vì có một thuộc tính tốt hơn được gọi là

.hide {
   visibility: hidden;
}

81

Nitish Kumar gần đây đã giới thiệu một

.hide {
   visibility: hidden;
}

81 tại SitePoint, vì vậy hãy cứ thoải mái thử nghiệm một thuộc tính có hiệu quả vượt trội

Lưu ý rằng thuộc tính

.hide {
   visibility: hidden;
}

81 được sử dụng bên dưới không được hỗ trợ đầy đủ trong IE hoặc Edge. Thuộc tính

.hide {
   visibility: hidden;
}

81 khi được sử dụng để ẩn một phần tử sẽ như sau.

.hide {
   visibility: hidden;
}

0

Xem Demo trong liên kết này

• Nếu bạn di chuột qua phần tử đầu tiên, nó có thể ảnh hưởng đến phần tử thứ hai mặc dù nó được ẩn đi qua clip-path

• Nếu bạn nhấp chuột vào phần tử, nó sẽ loại bỏ các lớp ẩn để tiết lộ các phần tử của chúng ta đã có trước đó. Văn bản này vẫn có thể đọc được bởi trình duyệt

• Mặc dù phần tử của chúng ta không còn nhìn thấy nữa, các phần tử xung quanh nó vẫn hoạt động như thể nó có kích thước chữ nhật ban đầu

• Lưu ý rằng các tương tác của người dùng như di chuột hoặc click chuột không thể thực hiện ở bên ngoài khu vực bị cắt xén. Trong trường hợp của chúng tôi, điều này hàm ý rằng người dùng sẽ không thể tương tác trực tiếp với các phần tử ẩn

Kết luận

Trong hướng dẫn này, chúng tôi đã xem xét năm phương pháp ẩn các phần tử khác nhau với CSS. Mỗi phương pháp đều khác nhau theo cách này hay cách khác. Biết được những gì bạn muốn có thể giúp bạn quyết định phương pháp nào sẽ sử dụng