Cách ẩn điều khiển video trong HTML
|
Sau đây là bài đăng của khách bởi Sara Soueidan. Tôi biết Sara qua tất cả những công việc xuất sắc của cô ấy trên CodePen. Cô ấy đang làm việc trên một số điều khiển video HTML5 tùy chỉnh và nhận thấy rằng các tùy chỉnh bị mất khi video chuyển sang chế độ toàn màn hình (ví dụ về điều đó xảy ra). Đi sâu vào bóng tối DOM, Sara tìm ra giải pháp… Show Nếu bạn đã từng làm việc với video HTML5 thì có lẽ bạn đã tự hỏi làm thế nào bạn có được một loạt các nút điều khiển, thanh trượt và ngón tay cái thanh trượt trên trang của mình, khi bạn chỉ thêm một thẻ Các trình duyệt thêm các điều khiển này dưới dạng “cây con” của thẻ video vào phần hiển thị tài liệu. Các phần tử này (nút, thanh trượt, v.v. ) là một phần của DOM, nhưng thực tế bạn không thể nhìn thấy chúng trong cây DOM chính, bạn chỉ thấy chúng được hiển thị trên trang. Thêm về điều này trong thời gian ngắn Sự cố về điều khiển video HTML5 ở chế độ toàn màn hìnhGần đây, khi làm việc trên một khung video HTML5 tùy chỉnh, tôi tình cờ phát hiện ra một vấn đề mà rất nhiều nhà thiết kế và nhà phát triển gặp phải trong lĩnh vực này. Thay vì hiển thị các điều khiển tùy chỉnh mà tôi đang làm việc, các điều khiển trình duyệt gốc xuất hiện trên video khi video chuyển sang chế độ toàn màn hình. Giống như rất nhiều người khác, tôi đã tìm kiếm câu trả lời cho vấn đề này nhưng không may mắn tìm được bất kỳ câu trả lời nào. (Cập nhật. lỗi này được lưu trong trình theo dõi lỗi của Chrome) Sau một số kiểm tra trong các công cụ dành cho nhà phát triển, tôi thấy rằng
Làm thế nào để chúng tôi thực hiện công việc này? Điểm thứ hai là dễ dàng. chỉ cần ghi đè biểu định kiểu tác nhân người dùng. Chúng tôi luôn làm điều đó trong bảng định kiểu của mình. Chúng tôi sẽ nhận được điều này trong thời gian ngắn. Nhưng còn điểm đầu tiên thì sao? Lưu ý rằng kỹ thuật được giải thích trong bài viết này để ẩn các điều khiển gốc chỉ hoạt động trong các trình duyệt hỗ trợ Shadow DOM Giới thiệu nhanh về Shadow DOMCây con của các phần tử DOM do trình duyệt tạo ra là cái mà chúng tôi gọi là “Shadow DOM”. Nói một cách dễ hiểu, đó là một loạt các phần tử DOM, giống như những phần tử bạn đã quen thuộc, như James Edwards tóm tắt chức năng của Shadow DOM một cách hoàn hảo trong bài viết của anh ấy cho SitePoint
Lý do tại sao các trình duyệt làm điều này là bởi vì các nhà phát triển trình duyệt đã quyết định đóng gói một số phần tử DOM để ẩn chúng khỏi các nhà phát triển của chúng tôi, vì vậy chúng tôi không quan tâm đến chi tiết triển khai của các phần tử này, nhằm giúp chúng tôi làm việc với mọi thứ dễ dàng hơn. Ngoài ra, như James Edwards cũng đã nói trong bài viết của mình
Vì vậy, bây giờ chúng ta biết rằng các điều khiển được thêm vào thẻ video chỉ là một phần của cây con DOM bóng được tạo cho thẻ này bởi trình duyệt Ẩn các điều khiển video gốcChúng ta cần có khả năng tạo kiểu cho các điều khiển vốn là một phần của Shadow DOM, nhưng làm cách nào để thực hiện điều đó nếu các bộ chọn CSS thông thường mà chúng ta biết không thể truy cập các phần tử Shadow DOM? Sau khi đọc bài viết giới thiệu tuyệt vời này của Dimitri Glazkov, tôi biết được rằng “có một khả năng thuộc tính giả tiện dụng, cho phép các cây con Shadow DOM liên kết một định danh phần tử giả tùy ý với một phần tử trong cây con. ” Điều đó có nghĩa là một số phần tử bên trong cây con DOM bóng tối có thể được tạo kiểu bằng cách nhắm mục tiêu chúng thông qua phần tử giả được liên kết của chúng. Nghe thật tuyệt Nhưng làm cách nào để xác định phần tử giả nào được liên kết với phần tử DOM bóng mà chúng ta cần tạo kiểu? Firefox cũng cung cấp hai phần tử giả cho các đầu vào phạm vi kiểu hiện tại nó hỗ trợ chúng bắt đầu từ phiên bản 23. 0 và Nhưng còn các phần tử giả ít được biết đến khác được liên kết với các phần tử DOM bóng khác thì sao? Xác định các phần tử giả được liên kết với các phần tử Shadow DOMMột trong những tính năng tuyệt vời của công cụ dành cho nhà phát triển Chrome là bạn có thể kiểm tra các cây con DOM bóng trong bảng Thành phần giống như bạn sẽ kiểm tra cây DOM “thông thường”. Tất cả bạn phải làm là kích hoạt tính năng này
Bây giờ, khi bạn kiểm tra phần tử Sau đó, giống như bạn có thể lấy các quy tắc kiểu cho bất kỳ phần tử HTML nào nếu bạn nhấp vào phần tử đó trong bảng Thành phần, bạn cũng có thể thấy các phần tử giả được liên kết với cây con của DOM bóng. Khá gọn gàng, phải không?. ) Vì vậy, đối với các điều khiển video, chúng ta có thể thấy từ ảnh chụp màn hình rằng có một phần tử giả được gọi là Đặt Nhưng hãy nhớ rằng phần tử giả này được liên kết với Vì vậy, trừ khi bạn muốn ẩn tất cả các điều khiển phương tiện gốc của trình duyệt, bạn sẽ cần chỉ định loại điều khiển phương tiện nào sẽ ẩn, đó là những điều khiển được liên kết với phần tử video và bạn sẽ nhắm mục tiêu chúng bằng cách chỉ định “phạm vi” cho điều này Điều này sẽ ẩn hoàn toàn các điều khiển gốc Một tùy chọn khác là bạn có thể đi sâu hơn vào cây con để tìm phần tử giả được liên kết với Vì vậy, đi sâu hơn một cấp, chúng tôi nhận được phần tử giả được liên kết với Đặt thuộc tính Và đó là tất cả những gì bạn cần làm để ẩn các điều khiển gốc ở chế độ toàn màn hình. Đơn giản, phải không? Hiển thị các điều khiển video tùy chỉnhĐối với các điều khiển tùy chỉnh, chúng vẫn không xuất hiện trong bản trình diễn của tôi sau khi ẩn các điều khiển gốc, bởi vì, như bạn đã thấy trong ảnh chụp màn hình ở trên, biểu định kiểu tác nhân người dùng có giá trị cho chỉ mục z được đặt thành đầy đủ- Tôi không biết tại sao các nhà phát triển lại chọn giá trị này cụ thể, nhưng có thể là do, như Nate Volker đã chỉ ra trong nhận xét của anh ấy bên dưới rằng con số này là giá trị tối đa cho một số nguyên có chữ ký 32 bit, có thể là kiểu dữ liệu của trình duyệt . Vì vậy, để đảm bảo hiển thị các điều khiển tùy chỉnh, bạn cần đặt chỉ mục z cho các điều khiển tùy chỉnh bằng hoặc cao hơn giá trị này Đặt nó thành 2147483646 làm cho các điều khiển biến mất ở chế độ toàn màn hình trên Firefox và đôi khi (một lỗi?), Trong Chrome, do đó, chỉ mục z cho vùng chứa điều khiển phải là >= 2147483647 Bản tóm tắtĐể ẩn các điều khiển gốc ở chế độ toàn màn hình trong các trình duyệt hỗ trợ Shadow DOM, bạn cần phải
Và đó là khá nhiều nó Thử nghiệmXem Điều khiển video HTML5 tùy chỉnh của bút ở chế độ toàn màn hình của Chris Coyier (@chriscoyier) trên CodePen Còn các trình duyệt khác không hỗ trợ Shadow DOM thì sao?Trong khi làm việc tôi cũng đã kiểm tra kết quả trên Firefox. Đặt Chắc chắn, bạn có thể mong đợi hành vi tương tự trong các trình duyệt khác không hỗ trợ DOM bóng tối Cách duy nhất mà tôi tìm thấy để ẩn các điều khiển gốc trong các trình duyệt này là che các điều khiển gốc bằng các điều khiển tùy chỉnh, bằng cách chỉ cần đặt các điều khiển tùy chỉnh lên trên chúng bằng cách sử dụng các kiểu CSS cơ bản và đơn giản nhắm mục tiêu toàn bộ . Có một giải pháp khả thi khác ở đây. Ông. James Edwards đã lưu ý trong nhận xét của mình bên dưới rằng các điều khiển gốc cũng có thể được ẩn trong chế độ toàn màn hình theo một cách khác mà không cần phải sử dụng DOM bóng, bằng cách áp dụng chế độ toàn màn hình cho một phần tử, ví dụ: , chứa phần tử video. Tôi đã thử nghiệm kỹ thuật của anh ấy và nó đã hoạt động trong Chrome và nó cũng hoạt động trong phiên bản Firefox mới nhất trên Windows 7, và theo lời của Mr. Edwards nó cũng sẽ hoạt động trong các trình duyệt khác hỗ trợ chế độ toàn màn hình Đọc thêm
Và nếu bạn quan tâm, bạn cũng có thể xem cách bạn có thể sử dụng API DOM bóng tối và HTML |
