Hướng dẫn how can i add a button over a video in html? - Làm cách nào để thêm một nút trên video trong html?
Thêm một nút qua ảnh rất dễ dàng bằng cách sử dụng thuộc tính tuyệt đối của CSS nhưng còn nút phát lớp phủ qua video HTML5 thì sao? Đối với điều này, chúng tôi sẽ nhờ sự giúp đỡ của JavaScript cùng với CSS. Show
JavaScript sẽ giúp chúng tôi phát/tạm dừng video trong khi CSS sẽ sử dụng để định vị phần tử nút. Trong bài viết trước của chúng tôi, chúng tôi đã giải thích phương pháp thêm văn bản CSS vào video và ở đây chúng tôi sẽ sử dụng gần như cùng một kỹ thuật nhưng với việc bổ sung JavaScript. Nút video sẽ hoạt động theo cả hai cách. Nó sẽ cho phép bạn phát video trên nhấp chuột và cũng tạm dừng video khi nhấp lại. Chúng tôi sẽ sử dụng nút HTML sau đó đặt thẻ video HTML5 để xác định video. Bằng cách sử dụng JavaScript, chúng tôi sẽ xử lý chức năng chơi/tạm dừng của nó. Chúng tôi cũng sẽ quản lý trạng thái hoạt động của nút. Cuối cùng, chúng tôi sẽ làm cho nút hoạt động với video. Chúng ta hãy xem xét quá trình thực hiện và biết làm thế nào chúng ta có thể làm điều đó: Chúng tôi sẽ bắt đầu với HTML và chúng tôi hầu như không có một vài dòng mã HTML. Những gì chúng tôi cần là có một nút mà chúng tôi sẽ định vị qua video và sau đó chúng tôi sẽ có mã HTML5 video xác định bên dưới mã nút. Rằng nó về HTML và bây giờ là CSS. Đầu tiên, chúng tôi sẽ thực hiện video đáp ứng HTML5 toàn màn hình làm nền. Chúng tôi làm điều này đạt được bằng cách sử dụng vị trí tuyệt đối. Kiểu CSS cho nút chơi lớp phủChúng tôi sẽ đặt chiều rộng và chiều cao thành 100% và cũng thêm quá trình chuyển đổi. Điều quan trọng, chúng tôi sẽ sử dụng chỉ số Z để giữ video ở chế độ nền và trên nút trên video. video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -1; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; } Để sắp xếp trung tâm nút của video, chúng tôi sẽ sử dụng vị trí tuyệt đối giống như chúng tôi đã làm cho video. Để làm cho nút trông đẹp mắt, chúng tôi sẽ thêm màu nền, kích thước phông chữ và màu sắc. button { background-color: #666; border: medium none; color: #fff; display: block; font-size: 18px; left: 0; margin: 0 auto; padding: 8px 16px; position: absolute; right: 0; top: 50%; } Màu nền nút sẽ thay đổi trạng thái không hoạt động. button.active { background-color: #0077a2; } JavaScriptSau khi xác định chức năng sẵn sàng, chúng tôi sẽ sử dụng chức năng GetEuityByID để lấy ID của video. Tiếp theo, trên chức năng nhấp chuột sẽ đặt lớp hiện tại để thêm cấp độ hoạt động và phát video. $( document ).ready(function() { var ctrlVideo = document.getElementById("video"); $('button').click(function(){ if ($('button').hasClass("active")){ ctrlVideo.play(); $('button').html("Pause"); $('button').toggleClass("active"); } else { ctrlVideo.pause(); $('button').html("play"); $('button').toggleClass("active"); } }); }); Đó là tất cả, hãy cho tôi biết bằng nhận xét bên dưới nếu bạn có thể thêm nút phát lớp phủ trên video HTML5. Chia sẻ video của bạn như một liên kết có thể đi được .. Làm cách nào để nhúng một nút trong HTML?Hãy tự mình thử » Cách chèn một nút trong HTML.Thẻ trong HTML xác định một nút có thể nhấp. Cú pháp. Cú pháp chung là: Tên nút.Bên trong một yếu tố bạn có thể đặt nội dung sau: Thêm văn bản. ....Thêm hình ảnh. Bạn có thể đặt một hình ảnh trong nút HTML. .... Thuộc tính HTML. Nút HTML có nhiều thuộc tính khác nhau ..Bên trong một yếu tố bạn có thể đặt nội dung sau: Thêm văn bản. ....Thêm hình ảnh. Bạn có thể đặt một hình ảnh trong nút HTML. .... Thuộc tính HTML. Nút HTML có nhiều thuộc tính khác nhau .. Làm thế nào để bạn thêm một nút vào một kịch bản? .Container .btn: Hover {& nbsp; màu nền: màu đen;} Hãy tự mình thử » Tiếp theo: Bước 3: Nghe các sự kiện video Thêm điều khiển video bằng cách thiết lập các nút tùy chỉnh trong sáng tạo của bạn. Tạo & nbsp; a Thẻ mẫu trong tệp HTML Kiểu mẫu trong tệp CSS Trong tệp JavaScript của Creative, gán các biến cho mỗi nút điều khiển video, sau đó thêm trình nghe sự kiện. Tiếp theo, thêm mã để trả lời khi nhấp vào mỗi nút. Một vài tính năng video không có sẵn với video HTML5. Hãy chắc chắn rằng bạn làm việc xung quanh họ cho phù hợp. Mã mã
Tiếp theo: Bước 3: Nghe các sự kiện video Là hữu ích không? Làm thế nào chúng ta có thể cải thiện nó? |