Giả sử chúng ta có thẻ video mẫu sau trên trang web
<video class="hideVideo" width="350" height="255" controls> <source src="" id="unique_video_id"> You cannot play video here...... </video>
Để ẩn video trên trang web, hãy sử dụng yourVariableName.style.display =’none’.
Ví dụ
Sau đây là mã -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<style>
.hideVideo {
display: block;
z-index: 999;
margin-top: 10px;
margin-left: 10px;
}
</style>
<body>
<video class="hideVideo" width="350" height="255" controls>
<source src="" id="unique_video_id">
You cannot play video here......
</video>
</body>
<script>
var hideVideo = document.getElementsByClassName("hideVideo")[0];
hideVideo.style.display = "none";
</script>
</html> Để chạy chương trình trên, hãy lưu tên tệp “anyName.html (index.html)”. Nhấp nhanh 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 Mã Visual Studio.
Đầu ra
Điều này sẽ tạo ra kết quả sau trên bảng điều khiển -
Trong đầu ra mẫu ở trên, thẻ video đã bị vô hiệu hóa. Nếu bạn muốn bật, chỉ cần bình luận dòng trên, tức là
//hideVideo.style.display = "none";
Sau khi comment dòng trên, thẻ video sẽ được bật như hình bên dưới -
